joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

修改代码

Browse Source
This commit is contained in:
ival 2021-04-02 16:19:14 +08:00
parent e2ffe1ca72
commit cb9aa77312
9 changed files with 86 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/iscs_new/core/abstractShape.js
View File

@ -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: {

11
src/iscs_new/factory/compose.js
View File

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

45
src/iscs_new/factory/element.js
View File

@ -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();
}
}

2
src/iscs_new/factory/index.js
View File

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

4
src/iscs_new/selectingHandle.js
View File

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

4
src/iscs_new/transformHandle.js
View File

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

12
src/iscs_new/utils/mobile.js Normal file
View File

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

115
src/iscs_new/utils/utils.js
View File

@ -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)<distance;
export function isInstanceOf(obj, target) {
return obj instanceof target;
}

35
src/views/test/index.vue
View File

@ -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],
position: [0, 0],
scale: [0.5, 0.5],
position: [200, 0],
rotation: 0,
// composeCode: '1000'
},