修改代码

src/iscs_new/core/abstractShape.js

@@ -3,9 +3,9 @@ import shapeRender from  '../constant/shapeRender';
 
 function shapeStyleBuilder(model) {
 	return {
-		code: model.code,
 		subType: '__hover__',
 		...shapeRender,
+		...model,
 		z: 9998,
 		cursor: 'pointer',
 		shape: {

src/iscs_new/factory/compose.js

@@ -9,7 +9,6 @@ class Compose extends AbstractShape {
 	constructor(args) {
 		super(args);
 		this.create();
-		this.hightLightInstance.setShape(this.getBoundingRect());
 	}
 
 	create() {
@@ -26,11 +25,10 @@ class Compose extends AbstractShape {
 				this.instance.add(el.instance);
 			}
 		})
-
+		this.instance.scale = this.model.scale;
-		const rect = this.instance.getBoundingRect();
+		this.instance.rotation = this.model.rotation;
-		this.instance.origin = [rect.x + rect.width/2, rect.y + rect.height/2];
+		this.instance.position = this.model.position;
-		console.log(this.instance)
+		this.instance.origin = utils.createOrigin(this.instance);
-
 		this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
 	}
 
@@ -38,6 +36,7 @@ class Compose extends AbstractShape {
 	drift({dx, dy}) {
 		this.model.position[0] = this.model.position[0] + dx;
 		this.model.position[1] = this.model.position[1] + dy;
+		this.instance.origin = utils.createOrigin(this.instance);
 		this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
 	}
 

src/iscs_new/factory/element.js

@@ -9,7 +9,6 @@ class Element extends AbstractShape {
 	constructor(args) {
 		super(args);
 		this.create();
-		this.hightLightInstance.setShape(this.getBoundingRect());
 	}
 
 	create() {
@@ -20,10 +19,12 @@ class Element extends AbstractShape {
 			function onmouseover(e) {
 				that.shapeFactory.trigger(shapeEvent.ShowTips, {...that.instance.getBoundingRect(), text: 'text for test'});
 			}
+
 			// mouse移动事件
 			function onmousemove(e) {
 				onmouseover(e);
 			}
+
 			// mouse离开事件
 			function onmouseout(e) {
 				that.shapeFactory.trigger(shapeEvent.HideTips, that.instance.getBoundingRect());
@@ -38,50 +39,19 @@ class Element extends AbstractShape {
 				onmouseout
 			});
 
+			this.instance.scale = this.model.scale;
+			this.instance.rotation = this.model.rotation;
+			this.instance.position = this.model.position;
+			this.instance.origin = utils.createOrigin(this.instance);
 			this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
 		}
 	}
 
 	// 拖动
 	drift({dx, dy}) {
-		// if (this.model.shape.hasOwnProperty('x')) {
-		// 	this.model.shape.x += dx;
-		// }
-		// if (this.model.shape.hasOwnProperty('y')) {
-		// 	this.model.shape.y += dy;
-		// }
-
-		// if (this.model.shape.hasOwnProperty('cx')) {
-		// 	this.model.shape.cx += dx;
-		// }
-		// if (this.model.shape.hasOwnProperty('cy')) {
-		// 	this.model.shape.cy += dy;
-		// }
-
-
-		// if (this.model.shape.hasOwnProperty('x1')) {
-		// 	this.model.shape.x1 += dx;
-		// }
-		// if (this.model.shape.hasOwnProperty('y1')) {
-		// 	this.model.shape.y1 += dy;
-		// }
-
-		// if (this.model.shape.hasOwnProperty('x2')) {
-		// 	this.model.shape.x2 += dx;
-		// }
-		// if (this.model.shape.hasOwnProperty('y2')) {
-		// 	this.model.shape.y2 += dy;
-		// }
-
-		// if (this.model.shape.hasOwnProperty('points')) {
-		// 	this.model.shape.points.map(point => {
-		// 		return [point[0]+dx, point[1]+dy];
-		// 	})
-		// }
-		// this.instance.attr(this.model)
-
 		this.model.position[0] = this.model.position[0] + dx;
 		this.model.position[1] = this.model.position[1] + dy;
+		this.instance.origin = utils.createOrigin(this.instance);
 		this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
 	}
 
@@ -148,7 +118,6 @@ class Element extends AbstractShape {
 	// 获取包围框
 	getBoundingRect() {
 		return utils.createBoundingRect(this.instance);
-		// return this.instance.getBoundingRect();
 	}
 }
 

src/iscs_new/factory/index.js

@@ -156,7 +156,7 @@ class ShapeFactory extends Eventful {
 	showHightLight(shape) {
 		const target = this.$controller.getTarget();
 		if (shape.hightLightInstance) {
-			shape.hightLightInstance.setShape(shape.getBoundingRect());
+			shape.hightLightInstance.setShape(shape.instance.getBoundingRect());
 			this.$painter.addToLayer(shapeLayer.HightLight)(shape.hightLightInstance);
 		}
 

src/iscs_new/selectingHandle.js

@@ -1,4 +1,5 @@
 import * as graphic from './core/graphic.js';
+import * as utils from './utils/utils'
 import shapeRender from  './constant/shapeRender';
 import shapeLayer from './constant/shapeLayer';
 
@@ -78,8 +79,7 @@ export default class SelectingHandle {
 	checkSelectingRectContainShape(rect, shape) {
 		const shapeRect = shape.getBoundingRect();
 		if (shapeRect) {
-			return rect.contain(shapeRect.x, shapeRect.y) &&
+			return rect.contain(shapeRect.x, shapeRect.y) && rect.contain(shapeRect.x+shapeRect.width, shapeRect.y+shapeRect.height);
-				rect.contain(shapeRect.x+shapeRect.width, shapeRect.y+shapeRect.height);
 		}
 		return false;
 	}

src/iscs_new/transformHandle.js

@@ -15,7 +15,8 @@ export default class TransformHandle {
 
 	// 检查显隐
 	checkVisible(view) {
-		return utils.createBoundingRectByTransform(view, this.transform).intersect(this.rect);
+		console.log(utils.createBoundingRectCheckVisible(view, this.transform).intersect(this.rect));
+		return utils.createBoundingRectCheckVisible(view, this.transform).intersect(this.rect);
 	}
 
 	// 重新计算显隐
@@ -62,6 +63,7 @@ export default class TransformHandle {
 	traverseLayer(cb, context) {
 		this.$painter.eachChild(layer => {
 			layer.transform = this.transform;
+			// layer.decomposeTransform();
 			cb.call(context, layer);
 		});
 	}

src/iscs_new/utils/mobile.js

@@ -0,0 +1,12 @@
+export function isMobile() {
+	var sUserAgent= navigator.userAgent.toLowerCase();
+	var bIsIpad= sUserAgent.match(/ipad/i) == 'ipad';
+	var bIsIphoneOs= sUserAgent.match(/iphone os/i) == 'iphone os';
+	var bIsMidp= sUserAgent.match(/midp/i) == 'midp';
+	var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
+	var bIsUc= sUserAgent.match(/ucweb/i) == 'ucweb';
+	var bIsAndroid= sUserAgent.match(/android/i) == 'android';
+	var bIsCE= sUserAgent.match(/windows ce/i) == 'windows ce';
+	var bIsWM= sUserAgent.match(/windows mobile/i) == 'windows mobile';
+	return (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM);
+}

src/iscs_new/utils/utils.js

@@ -1,5 +1,5 @@
+import BoundingRect from 'zrender/src/core/BoundingRect';
 import * as matrix from 'zrender/src/core/matrix';
-import * as color from 'zrender/src/tool/color';
 
 var base = 0;
 
@@ -48,9 +48,9 @@ export function assignByDepth(source, target, depth) {
 // 创建一个transform
 export function createTransform({scale=[1,1], position=[0,0], rotation=0}) {
 	let transform = matrix.create();
-	transform = matrix.scale(matrix.create(), transform, scale);
 	transform = matrix.translate(matrix.create(), transform, position);
 	transform = matrix.rotate(matrix.create(), transform, rotation);
+	transform = matrix.scale(matrix.create(), transform, scale);
 	return transform;
 }
 
@@ -66,34 +66,37 @@ export function createBoundingRect(view) {
 	rect.y = rect.y * scaleY + offsetY;
 	rect.width = rect.width * scaleX;
 	rect.height = rect.height * scaleY;
+
+	// let x1, y1, x2, y2;
+	// [x1, y1] = view.transformCoordToLocal(rect.x, rect.y);
+	// [x2, y2] = view.transformCoordToLocal(rect.x + rect.width, rect.y + rect.height);
+	// return new BoundingRect(x1, y1, x2-x1, y2-y1);
+
 	return rect;
 }
 
-// 计算全局拖拽和缩放后的包围框
+// 计算变化计算包围框
-export function createBoundingRectByTransform(view, transform) {
+export function createBoundingRectCheckVisible(view, transform) {
 	const rect = view.getBoundingRect();
+	const position = view.position;
+	const dx = position[0];
+	const dy = position[1];
 	const scaleX = transform[0];
 	const scaleY = transform[3];
 	const offsetX = transform[4];
 	const offsetY = transform[5];
 
-	rect.x = rect.x * scaleX + offsetX;
+	rect.x = (rect.x + dx) * scaleX + offsetX;
-	rect.y = rect.y * scaleY + offsetY;
+	rect.y = (rect.y + dy) * scaleY + offsetY;
 	rect.width = rect.width * scaleX;
 	rect.height = rect.height * scaleY;
 	return rect;
 }
 
-// 计算缩放和偏移后的偏移
+// 计算图形的旋转中心
-export function createTransformPosition(view, x, y) {
+export function createOrigin(view) {
-	// const transform = view.transform||matrix.identity(matrix.create());
+	const rect = view.getBoundingRect();
-	// const scaleX = transform[0];
+	return [rect.x + rect.width/2, rect.y + rect.height/2];
-	// const scaleY = transform[3];
-	// const offsetX = transform[4];
-	// const offsetY = transform[5];
-	// x = x / scaleX + offsetX;
-	// y = y / scaleY + offsetY;
-	return [x, y]
 }
 
 // 计算视图中心
@@ -103,49 +106,11 @@ export function calculateDCenter(viewRect, bound) {
 	return { dx, dy };
 }
 
-// 通过Model获取实体
-export function getEntityByModel(mapEntity, mapLink, model) {
-	const link = getLinkByModel(mapLink, model)||{};
-	return mapEntity[link.code];
-}
-
-export function getDomOffset(dom) {
-	let pol = 0;
-	let pot = 0;
-	let offsetLeft = 0;
-	let offsetTop = 0;
-
-	while (dom) {
-		if (pol != dom.offsetLeft) {
-			offsetLeft += dom.offsetLeft;
-			pol = dom.offsetLeft;
-		}
-		if (pot != dom.offsetTop) {
-			offsetTop += dom.offsetTop;
-			pot = dom.offsetTop;
-		}
-		dom = dom.offsetParent;
-	}
-
-	const offset = {
-		x: offsetLeft,
-		y: offsetTop
-	};
-	return offset;
-}
-
 // 矩形碰撞检测
 export function checkRectCollision(rect1, rect2) {
-	const center1 = { x: rect1.point.x + rect1.width / 2, y: rect1.point.y + rect1.height / 2 };
+	const center1 = { x: rect1.x + rect1.width / 2, y: rect1.y + rect1.height / 2 };
-	const center2 = { x: rect2.point.x + rect2.width / 2, y: rect2.point.y + rect2.height / 2 };
+	const center2 = { x: rect2.x + rect2.width / 2, y: rect2.y + rect2.height / 2 };
-	if (
+	return Math.abs(center1.x - center2.x) < rect1.width / 2 + rect2.width / 2 && Math.abs(center1.y - center2.y) < rect1.height / 2 + rect2.height / 2
-		// 横向判断 和 纵向判断
-		Math.abs(center1.x - center2.x) < rect1.width / 2 + rect2.width / 2 &&
-		Math.abs(center1.y - center2.y) < rect1.height / 2 + rect2.height / 2
-	) {
-		return true;
-	}
-	return false;
 }
 
 // 通过两点计算弧度
@@ -154,38 +119,14 @@ export function getRadian(point1, point2) {
 }
 
 // 类型检测
-const cehckJsType = (type) => { return (obj) => { return Object.prototype.toString.call(obj) === `[object ${type.name}]`; }; };
+const checkJsType = (type) => { return (obj) => { return Object.prototype.toString.call(obj) === `[object ${type.name}]`; }; };
 
-export function isFunction() { return cehckJsType(Function); }
+export function isFunction() { return checkJsType(Function); }
 
-export function isArray() { return cehckJsType(Array); }
+export function isArray() { return checkJsType(Array); }
 
-export function isString() { return cehckJsType(String); }
+export function isString() { return checkJsType(String); }
 
-export function isInstanceOf(obj, targt) {
+export function isInstanceOf(obj, target) {
-	return obj instanceof targt;
+	return obj instanceof target;
-}
-
-export function isMobile() {
-	var sUserAgent= navigator.userAgent.toLowerCase();
-	var bIsIpad= sUserAgent.match(/ipad/i) == 'ipad';
-	var bIsIphoneOs= sUserAgent.match(/iphone os/i) == 'iphone os';
-	var bIsMidp= sUserAgent.match(/midp/i) == 'midp';
-	var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
-	var bIsUc= sUserAgent.match(/ucweb/i) == 'ucweb';
-	var bIsAndroid= sUserAgent.match(/android/i) == 'android';
-	var bIsCE= sUserAgent.match(/windows ce/i) == 'windows ce';
-	var bIsWM= sUserAgent.match(/windows mobile/i) == 'windows mobile';
-	// var bIsWebview = sUserAgent.match(/webview/i) == 'webview';
-	return (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM);
-}
-
-export function handleColor(source, target, distance = 200) {
-	const rgbSource = [];
-	const rgbTarget = [];
-	color.parse(source, rgbSource);
-	color.parse(target, rgbTarget);
-	const diffArr = rgbTarget.map((el, i) => { return el- rgbSource[i]; });
-	const sum = diffArr.slice(0, 3).reduce((s, el) => s + (el*el), 0);
-	return Math.sqrt(sum)<distance;
 }

src/views/test/index.vue

@@ -151,7 +151,7 @@ export default {
 						name: 'b',
 						type: 'Circle',
 						scale: [1, 1],
-						position: [0, 0],
+						position: [100, 0],
 						rotation: 0,
 						shape: {
 							cx: 100,
@@ -170,7 +170,7 @@ export default {
 						type: 'Rect',
 						scale: [1, 1],
 						position: [0, 0],
-						rotation: 0,
+						rotation: Math.PI/4,
 						shape: {
 							x: 200,
 							y: 100,
@@ -188,7 +188,7 @@ export default {
 						name: 'b',
 						type: 'Circle',
 						scale: [1, 1],
-						position: [200, 0],
+						position: [0, 0],
 						rotation: 0,
 						scale: [0.5, 0.5],
 						shape: {
@@ -207,7 +207,7 @@ export default {
 						name: 'c',
 						type: 'Droplet',
 						scale: [0.5, 0.5],
-						position: [200, 0],
+						position: [0, 0],
 						rotation: 0,
 						shape: {
 							cx: 300,
@@ -239,7 +239,26 @@ export default {
 							stroke: 'black'
 						},
 						composeCode: ''
-					}
+					},
+					{
+						code: '7',
+						name: 'a',
+						type: 'Rect',
+						scale: [1, 1],
+						position: [0, 0],
+						rotation: Math.PI/4,
+						shape: {
+							x: 100,
+							y: 100,
+							width: 30,
+							height: 60
+						},
+						style: {
+							fill: 'red',
+							stroke: 'black'
+						},
+						composeCode: ''
+					},
 				],
 				composeList: [
 					{
@@ -247,7 +266,7 @@ export default {
 						type: 'Device',
 						elementCodes: ['1', '2'],
 						scale: [0.5, 0.5],
-						position: [200, 0],
+						position: [100, 100],
 						rotation: Math.PI/2,
 						// composeCode: '1000',
 					},
@@ -255,8 +274,8 @@ export default {
 						code: '101',
 						type: 'Device',
 						elementCodes: ['3', '4'],
-						scale: [1, 1],
+						scale: [0.5, 0.5],
-						position: [0, 0],
+						position: [200, 0],
 						rotation: 0,
 						// composeCode: '1000'
 					},