From cb9aa773120350226d72fb5743260e39f0759cf4 Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Fri, 2 Apr 2021 16:19:14 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/iscs_new/core/abstractShape.js | 2 +- src/iscs_new/factory/compose.js | 11 ++- src/iscs_new/factory/element.js | 45 ++--------- src/iscs_new/factory/index.js | 2 +- src/iscs_new/selectingHandle.js | 4 +- src/iscs_new/transformHandle.js | 4 +- src/iscs_new/utils/mobile.js | 12 +++ src/iscs_new/utils/utils.js | 115 +++++++---------------------- src/views/test/index.vue | 35 +++++++-- 9 files changed, 86 insertions(+), 144 deletions(-) create mode 100644 src/iscs_new/utils/mobile.js diff --git a/src/iscs_new/core/abstractShape.js b/src/iscs_new/core/abstractShape.js index 55c4251e1..fc71f5f53 100644 --- a/src/iscs_new/core/abstractShape.js +++ b/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: { diff --git a/src/iscs_new/factory/compose.js b/src/iscs_new/factory/compose.js index 0757679d3..7aca8ac6e 100644 --- a/src/iscs_new/factory/compose.js +++ b/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); } }) - - const rect = this.instance.getBoundingRect(); - this.instance.origin = [rect.x + rect.width/2, rect.y + rect.height/2]; - console.log(this.instance) - + 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}); } @@ -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}); } diff --git a/src/iscs_new/factory/element.js b/src/iscs_new/factory/element.js index 2985d1b7c..9742236cb 100644 --- a/src/iscs_new/factory/element.js +++ b/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(); } } diff --git a/src/iscs_new/factory/index.js b/src/iscs_new/factory/index.js index c4f93c95d..81e6b7b58 100644 --- a/src/iscs_new/factory/index.js +++ b/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); } diff --git a/src/iscs_new/selectingHandle.js b/src/iscs_new/selectingHandle.js index 60a94a22e..8cf19817c 100644 --- a/src/iscs_new/selectingHandle.js +++ b/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) && - rect.contain(shapeRect.x+shapeRect.width, shapeRect.y+shapeRect.height); + return rect.contain(shapeRect.x, shapeRect.y) && rect.contain(shapeRect.x+shapeRect.width, shapeRect.y+shapeRect.height); } return false; } diff --git a/src/iscs_new/transformHandle.js b/src/iscs_new/transformHandle.js index e5dd5f166..e3949df1d 100644 --- a/src/iscs_new/transformHandle.js +++ b/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); }); } diff --git a/src/iscs_new/utils/mobile.js b/src/iscs_new/utils/mobile.js new file mode 100644 index 000000000..b2528d6ad --- /dev/null +++ b/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); +} diff --git a/src/iscs_new/utils/utils.js b/src/iscs_new/utils/utils.js index 2e1377cb4..85a48f146 100644 --- a/src/iscs_new/utils/utils.js +++ b/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.y = rect.y * scaleY + offsetY; + rect.x = (rect.x + dx) * scaleX + offsetX; + 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) { - // const transform = view.transform||matrix.identity(matrix.create()); - // const scaleX = transform[0]; - // const scaleY = transform[3]; - // const offsetX = transform[4]; - // const offsetY = transform[5]; - // x = x / scaleX + offsetX; - // y = y / scaleY + offsetY; - return [x, y] +// 计算图形的旋转中心 +export function createOrigin(view) { + const rect = view.getBoundingRect(); + return [rect.x + rect.width/2, rect.y + rect.height/2]; } // 计算视图中心 @@ -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 center2 = { x: rect2.point.x + rect2.width / 2, y: rect2.point.y + rect2.height / 2 }; - if ( - // 横向判断 和 纵向判断 - 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; + const center1 = { x: rect1.x + rect1.width / 2, y: rect1.y + rect1.height / 2 }; + const center2 = { x: rect2.x + rect2.width / 2, y: rect2.y + rect2.height / 2 }; + 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 } // 通过两点计算弧度 @@ -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) { - return obj instanceof targt; -} - -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)