diff --git a/src/editor/controller/initAxis.js b/src/editor/controller/initAxis.js index 491d148..0d9bb76 100644 --- a/src/editor/controller/initAxis.js +++ b/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; } diff --git a/src/editor/group/ShapesGroup.js b/src/editor/group/ShapesGroup.js index 7f28f3d..5e776fe 100644 --- a/src/editor/group/ShapesGroup.js +++ b/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); }); diff --git a/src/editor/mode/point.js b/src/editor/mode/point.js index 64dcc9e..035012c 100644 --- a/src/editor/mode/point.js +++ b/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; diff --git a/src/editor/options.js b/src/editor/options.js index a361174..ee93794 100644 --- a/src/editor/options.js +++ b/src/editor/options.js @@ -26,6 +26,13 @@ export default { } }, + // 提示文本 + tipText: { + fillColor: 'blue', + x: 30, + y: 36 + }, + // 覆盖层 coverLayer: { lineColor: '#4780FF', diff --git a/src/render/Layer.js b/src/render/Layer.js index ffe8445..165aeef 100644 --- a/src/render/Layer.js +++ b/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) { diff --git a/src/render/shape/GridArrow.js b/src/render/shape/GridArrow.js index a1988d9..f9a4692 100644 --- a/src/render/shape/GridArrow.js +++ b/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) { diff --git a/src/render/shape/Text.js b/src/render/shape/Text.js new file mode 100644 index 0000000..2808f2f --- /dev/null +++ b/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(); + } +}); diff --git a/src/render/shape/support.js b/src/render/shape/support.js index e0fb186..ae3d5eb 100644 --- a/src/render/shape/support.js +++ b/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 };