diff --git a/src/iscs_new/controller.js b/src/iscs_new/controller.js index 41989d4c6..7b6b45925 100644 --- a/src/iscs_new/controller.js +++ b/src/iscs_new/controller.js @@ -14,7 +14,7 @@ class MouseEvent { this.clientX = e.event.clientX; this.clientY = e.event.clientY; - if (shape && !['__selecting__', '__drag__'].includes(shape.subType)) { + if (shape && !['@selecting', '@border', '@drag'].includes(shape.subType)) { if (shape.code) { let composeCode = shape.composeCode; let compose = null; @@ -142,7 +142,7 @@ export default class Controller extends Eventful { } isSpecialSubType(e) { - return ['__drag__', '__selecting__'].includes(e.subType); + return ['@drag', '@selecting'].includes(e.subType); } isSelected(code) { diff --git a/src/iscs_new/draggable/Image.js b/src/iscs_new/draggable/Image.js index ce96ff376..1be2dce8e 100644 --- a/src/iscs_new/draggable/Image.js +++ b/src/iscs_new/draggable/Image.js @@ -8,7 +8,7 @@ import shapeRender from '../constant/shapeRender'; function shapeStyleBuilder({shape}) { return { ...shapeRender, - subType: '__drag__', + subType: '@drag', z: 9998, draggable: false, cursor: 'crosshair', @@ -81,7 +81,7 @@ export default class ImageDraggable extends Group { } mousedown(e) { - if (e.target && ['__selecting__', '__drag__'].includes(e.target.subType)) { + if (e.target && ['@selecting', '@border', '@drag'].includes(e.target.subType)) { if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) { this.target = e.target; this.offset = {x: e.offsetX, y: e.offsetY}; diff --git a/src/iscs_new/draggable/Line.js b/src/iscs_new/draggable/Line.js index 40bde939a..8f869859b 100644 --- a/src/iscs_new/draggable/Line.js +++ b/src/iscs_new/draggable/Line.js @@ -6,7 +6,7 @@ import shapeRender from '../constant/shapeRender'; function lineStyleBuilder() { return { ...shapeRender, - subType: '__drag__', + subType: '@drag', z: 9998, shape: {x1: 0, y1: 0, x2: 0, y2: 0 }, style: { @@ -19,7 +19,7 @@ function lineStyleBuilder() { function circleStyleBuilder({shape}) { return { ...shapeRender, - subType: '__drag__', + subType: '@drag', z: 9999, draggable: false, cursor: 'crosshair', @@ -79,7 +79,7 @@ export default class LineDraggable extends graphic.Group { mousedown(e) { this.offset = {x: e.offsetX, y: e.offsetY}; - if (e.target && ['__drag__'].includes(e.target.subType)) { + if (e.target && ['@drag'].includes(e.target.subType)) { this.target = e.target; if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) { this.setDraggable(true); diff --git a/src/iscs_new/factory/index.js b/src/iscs_new/factory/index.js index 8a5c2e6cb..142140fba 100644 --- a/src/iscs_new/factory/index.js +++ b/src/iscs_new/factory/index.js @@ -69,7 +69,7 @@ class ShapeFactory extends Eventful { this.$painter = map.getPainter(); this.$controller = map.getController(); - this.border = new graphic.Rect(shapeStyleBuilder()); + this.border = new graphic.Rect(shapeStyleBuilder({subType: '@border'})); this.tipsHandle = new TipsHandle(map); diff --git a/src/iscs_new/map.js b/src/iscs_new/map.js index 52c5f95bf..6199c02fb 100644 --- a/src/iscs_new/map.js +++ b/src/iscs_new/map.js @@ -9,6 +9,7 @@ import Controller from './controller'; import StateHandle from './stateHandle'; import ShapeFactory from './factory'; import orders from './utils/orders'; +import ModelBuilder from './modelBuilder'; const renderer = 'canvas'; const devicePixelRatio = 1; @@ -69,6 +70,9 @@ class JMap { // 状态处理器 this.$stateHandle = new StateHandle(this); + // 绘制模块 + this.modelBuilder = new ModelBuilder(this.getZr()); + this.disable = function() { this.off(this.events.Pan, optionHandler); this.off(this.events.Zoom, optionHandler); diff --git a/src/iscs_new/modelBuilder.js b/src/iscs_new/modelBuilder.js new file mode 100644 index 000000000..0397d624d --- /dev/null +++ b/src/iscs_new/modelBuilder.js @@ -0,0 +1,44 @@ +class Handle { + constructor() { + } + + onmousedown(e) { + // console.log('mousedown', e) + } + + onmousemove(e) { + // console.log('mousemove', e) + } + + onmouseup(e) { + // console.log('mouseup', e) + } +} + +class ModelBuilder { + constructor(zr) { + this.zr = zr; + this.handle = new Handle(); + } + + addEventListener() { + if (this.zr) { + this.zr.on('mousedown', this.handle.onmousedown, this.handle); + this.zr.on('mousemove', this.handle.onmousemove, this.handle); + this.zr.on('mouseup', this.handle.onmouseup, this.handle); + } + } + + removeEventListener() { + if (this.zr) { + this.zr.off('mousedown', this.handle.onmousedown); + this.zr.off('mousemove', this.handle.onmousemove); + this.zr.off('mouseup', this.handle.onmouseup); + } + } + + buildModel(shapeType) { + } +} + +export default ModelBuilder; diff --git a/src/iscs_new/option.js b/src/iscs_new/option.js index 75f2fa9d9..12aea491d 100644 --- a/src/iscs_new/option.js +++ b/src/iscs_new/option.js @@ -1,10 +1,10 @@ class Option { constructor(opts, notice) { - this.ratio = 10; + this.ratio = 100; - this.step = 1/this.ratio; + this.step = 0.1; - this.scaleMin = 0.2; + this.scaleMin = 0.3; this.scaleMax = 10; @@ -51,9 +51,9 @@ class Option { getScaleRate(scale) { if (Number.isFinite(scale)) { - const sumScaleNum = (this.scaleRate - this.scaleMin + scale * this.step) * this.ratio; - const maxScaleNum = (this.scaleMax * this.ratio); - return (sumScaleNum%maxScaleNum) / this.ratio + this.scaleMin; + const sumScaleNum = parseInt((this.scaleRate - this.scaleMin + scale * this.step) * this.ratio); + const maxScaleNum = this.scaleMax * this.ratio; + return sumScaleNum > 0? ((sumScaleNum%maxScaleNum) / this.ratio + this.scaleMin).toFixed(1): this.scaleRate; } return this.scaleRate; } diff --git a/src/iscs_new/selectingHandle.js b/src/iscs_new/selectingHandle.js index 64f1fbf66..921826a85 100644 --- a/src/iscs_new/selectingHandle.js +++ b/src/iscs_new/selectingHandle.js @@ -3,22 +3,222 @@ import shapeRender from './constant/shapeRender'; import shapeLayer from './constant/shapeLayer'; import defaultStyle from './config/defaultStyle'; -function shapeStyleBuilder() { - return { - subType: '__selecting__', - ...shapeRender, - z: 9999, - shape: { - x: 0, - y: 0, - width: 0, - height: 0 - }, - style: { +const vernierStyle = { + area: { + areaStyle: { fill: `rgba(200,200,200,0.3)` } + }, + axisLine: { + lineStyle: { + lineWidth: 30, + stroke: 'rgba(255,255,255,0.6)', + shadowBlur: 17, + shadowColor: 'rgba(0,255,0,0.2)', + strokeNoScale: true + } + }, + axisTick: { + length: 5, + lineStyle: { + lineWidth: 2, + stroke: '#000000' + } + }, + axisLabel: { + distance: 3, + textStyle: { + textStroke: '#000', + textAlign: 'center', + textVerticalAlign: 'center' + } } } +class Vernier extends graphic.Group { + constructor(args) { + super(args); + this._scaleRate = 1; + this.area = null; + this.axisLineX = null; + this.axisLineY = null; + } + + _area(rect) { + this.area = new graphic.Rect({ + ...shapeRender, + z: 9999, + silent: true, + shape: { ...rect }, + style: { + ...vernierStyle.area.areaStyle + } + }) + this.add(this.area); + } + + _lineAxisX(rect) { + const minX = Math.min(rect.x, rect.x + rect.width); + const minY = Math.min(rect.y, rect.y + rect.height) + const maxX = Math.max(rect.x, rect.x + rect.width); + const axisLineWidthHalf = vernierStyle.axisLine.lineStyle.lineWidth/this._scaleRate/2; + + this.axisLineX = new graphic.Line({ + ...shapeRender, + z: 9999, + silent: true, + position: [0, -axisLineWidthHalf], + shape: { + x1: minX, + y1: minY, + x2: maxX, + y2: minY + }, + style: { + ...vernierStyle.axisLine.lineStyle, + shadowOffsetX: -5 + } + }) + + const step = 4/this._scaleRate; + const count = parseInt(Math.abs(rect.width/step)); + + for(var i = 0; i in new Array(count).fill(0); i++) { + const offset = step * i; + const tick = i % vernierStyle.axisTick.length == 0 + const len = tick? axisLineWidthHalf*0.8: axisLineWidthHalf*0.5; + if (tick) { + this.add(new graphic.Text({ + ...shapeRender, + z: 10000, + silent: true, + position: [minX + offset, minY - axisLineWidthHalf - vernierStyle.axisLabel.distance], + style: { + ...vernierStyle.axisLabel.textStyle, + text: i / vernierStyle.axisTick.length + } + })) + } + + this.add(new graphic.Line({ + ...shapeRender, + z: 10000, + silent: true, + shape: { + x1: minX + offset, + y1: minY, + x2: minX + offset, + y2: minY - len + }, + style: { + ...vernierStyle.axisTick.lineStyle, + strokeNoScale: true, + } + })) + } + + this.add(this.axisLineX); + } + + _lineAxisY(rect) { + const minX = Math.min(rect.x, rect.x + rect.width); + const minY = Math.min(rect.y, rect.y + rect.height) + const maxX = Math.max(rect.x, rect.x + rect.width); + const maxY = Math.max(rect.y, rect.y + rect.height) + const axisLineWidthHalf = vernierStyle.axisLine.lineStyle.lineWidth/this._scaleRate/2; + + this.axisLineY = new graphic.Line({ + ...shapeRender, + z: 9999, + silent: true, + position: [-axisLineWidthHalf, 0], + shape: { + x1: minX, + y1: minY, + x2: minX, + y2: maxY + }, + style: { + ...vernierStyle.axisLine.lineStyle, + shadowOffsetY: -5 + } + }) + this.add(this.axisLineY); + + + const step = 4/this._scaleRate; + const count = parseInt(Math.abs(rect.height/step)); + + for(var i = 0; i in new Array(count).fill(0); i++) { + const offset = step * i; + const tick = i % vernierStyle.axisTick.length == 0; + const len = tick? axisLineWidthHalf*0.7: axisLineWidthHalf*0.5; + if (tick) { + this.add(new graphic.Text({ + ...shapeRender, + z: 10000, + silent: true, + position: [minX - axisLineWidthHalf - vernierStyle.axisLabel.distance, minY + offset], + style: { + ...vernierStyle.axisLabel.textStyle, + text: i / vernierStyle.axisTick.length + } + })) + } + + this.add(new graphic.Line({ + ...shapeRender, + z: 10000, + silent: true, + shape: { + x1: minX, + y1: minY + offset, + x2: minX - len, + y2: minY + offset + }, + style: { + ...vernierStyle.axisTick.lineStyle, + strokeNoScale: true, + } + })) + } + } + + render(rect) { + this.removeAll(); + this._scaleRate = this.parent? this.parent.transform[0]: 1; + this._area(rect); + this._lineAxisX(rect); + this._lineAxisY(rect); + } + + setShape(rect) { + this.render(rect); + } + + getBoundingRect() { + if (this.area) { + return this.area.getBoundingRect(); + } + return super.getBoundingRect(); + } +} + +// function shapeStyleBuilder() { +// return { +// subType: '@selecting', +// ...shapeRender, +// z: 9999, +// shape: { +// x: 0, +// y: 0, +// width: 0, +// height: 0 +// }, +// style: { +// fill: `rgba(200,200,200,0.3)` +// } +// } +// } export default class SelectingHandle { constructor(map, controller) { @@ -29,7 +229,8 @@ export default class SelectingHandle { this.begPoint = null; this.endPoint = null; - this.selecting = new graphic.Rect(shapeStyleBuilder()); + // this.selecting = new graphic.Rect(shapeStyleBuilder()); + this.selecting = new Vernier({subType: '@selecting'}); } isSelecting() { diff --git a/src/views/test/index.vue b/src/views/test/index.vue index bdbf7eeba..c439eb5ac 100644 --- a/src/views/test/index.vue +++ b/src/views/test/index.vue @@ -67,8 +67,10 @@ export default { }, mounted() { this.init(); + this.$iscs.modelBuilder.addEventListener(); }, beforeDestroy() { + this.$iscs.modelBuilder.removeEventListener(); this.destroy(); }, methods: { @@ -318,7 +320,6 @@ export default { reflect: true }); - window.document.oncontextmenu = function () { return false; };