Merge pull request #36 from kekee000/master

add text shape

src/editor/controller/initAxis.js

@@ -46,6 +46,13 @@ function setAxis(options) {
 
 }
 
+function getPointCoordinate(p) {
+    let scale = this.render.camera.scale;
+    let x = Math.round((p.x - this.axis.x) / scale);
+    let y = Math.round(-(p.y - this.axis.y) / scale);
+    return {x, y};
+}
+
 /**
  * 初始化坐标系
  */
@@ -97,5 +104,6 @@ export default function () {
     // 设置吸附选项
     this.sorption.setGrid(this.axis);
 
+    this.getPointCoordinate = getPointCoordinate;
     this.setAxis = setAxis;
 }

src/editor/group/ShapesGroup.js

@@ -223,7 +223,6 @@ export default class ShapesGroup {
      * @param {number} my y偏移
      */
     move(mx, my) {
-
         this.shapes.forEach(function (shape) {
             pathAdjust(shape.points, 1, 1, mx, my);
         });

src/editor/mode/point.js

@@ -140,7 +140,6 @@ export default {
         delete this.curPoint;
 
         let result = this.coverLayer.getShapeIn(e);
-
         if (result) {
             this.curPoint = result[0];
             this.curPoint._style = lang.clone(this.curPoint.style);
@@ -183,9 +182,12 @@ export default {
 
 
     drag(e) {
-
         let camera = this.render.camera;
         if (this.curPoint) {
+            if (!this.tipTextPoint) {
+                this.tipTextPoint = this.coverLayer.addShape('text',
+                Object.assign({text: ''}, this.options.tipText));
+            }
             let current = this.curPoint;
             let reserved = this.curShape.points[current.pointId];
 
@@ -205,7 +207,6 @@ export default {
 
             if (this.sorption.isEnable()) {
                 let result;
-
                 if (result = this.sorption.detectX(current.x)) {
                     current.x = result.axis;
                 }
@@ -217,12 +218,20 @@ export default {
 
             current.point.x = current.x;
             current.point.y = current.y;
-
+            let coord = this.getPointCoordinate(current);
+            this.tipTextPoint.text = coord.x + ',' + coord.y;
+            this.tipTextPoint.x = current.x + 16;
+            this.tipTextPoint.y = current.y + 10;
             this.coverLayer.refresh();
         }
     },
 
     dragend() {
+        if (this.tipTextPoint) {
+            this.coverLayer.removeShape(this.tipTextPoint);
+            this.tipTextPoint = null;
+            this.coverLayer.refresh();
+        }
         if (this.curPoint) {
             let reserved = this.curShape.points[this.curPoint.pointId];
             reserved.x = this.curPoint.x;

src/editor/options.js

@@ -26,6 +26,13 @@ export default {
             }
         },
 
+        // 提示文本
+        tipText: {
+            fillColor: 'blue',
+            x: 30,
+            y: 36
+        },
+
         // 覆盖层
         coverLayer: {
             lineColor: '#4780FF',

src/render/Layer.js

@@ -277,7 +277,6 @@ export default class Layer {
      * @return {this}
      */
     adjust(shape) {
-
         let shapes = [];
         if (shape) {
             shape = this.getShape(shape);
@@ -292,7 +291,6 @@ export default class Layer {
         let drawer;
 
         for (let i = 0, l = shapes.length; i < l; i++) {
-
             shape = shapes[i];
             if ((drawer = support[shape.type])) {
                 if (camera.ratio !== 1) {

src/render/shape/GridArrow.js

@@ -10,7 +10,7 @@ const ARROW_WIDTH = 3; // 箭头宽度
 export default shape.derive({
     type: 'gridarrow',
 
-    adjus(shape, camera) {
+    adjust(shape, camera) {
         let center = camera.center;
         let ratio = camera.ratio;
 
@@ -52,7 +52,7 @@ export default shape.derive({
      * @param {Object} shape shape数据
      * @param {number} shape.p0.x x坐标位置
      * @param {number} shape.p0.y y坐标位置
-     * @param {number} shape.p0.y y坐标位置
+     * @param {Object} camera camera坐标
      * @param {Object} shape.arrow 箭头配置数据
      */
     draw(ctx, shape, camera) {

src/render/shape/Text.js

@@ -0,0 +1,30 @@
+/**
+ * @file 文本节点绘制
+ * @author mengke01(kekee000@gmail.com)
+ */
+
+import shape from './Shape';
+
+export default shape.derive({
+
+    type: 'text',
+
+    getRect(shape) {
+        return false;
+    },
+
+    isIn(shape, x, y) {
+        return false;
+    },
+
+    draw(ctx, shape) {
+        ctx.save();
+        let x = Math.round(shape.x);
+        let y = Math.round(shape.y);
+        if (shape.fillColor) {
+            ctx.fillStyle = shape.fillColor;
+        }
+        ctx.fillText(shape.text, x, y);
+        ctx.restore();
+    }
+});

src/render/shape/support.js

@@ -15,6 +15,7 @@ import graduation from './Graduation';
 import line from './Line';
 import beziercurve from './BezierCurve';
 import gridarrow from './GridArrow';
+import text from './text';
 
 export default {
     circle,
@@ -28,5 +29,6 @@ export default {
     graduation,
     line,
     beziercurve,
-    gridarrow
+    gridarrow,
+    text
 };