修改代码

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) {

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};

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);

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);
 

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);

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;

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;
 	}

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() {

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;
             };