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 11:30:19 +08:00
parent 832513c750
commit e2ffe1ca72
10 changed files with 115 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/iscs_new/constant/shapeRender.js
View File

@ -3,5 +3,6 @@ export default {
z: 9,
scale: [1, 1],
position: [0, 0],
rotation: 0
rotation: 0,
origin: [0, 0]
}

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

@ -24,9 +24,9 @@ function shapeStyleBuilder(model) {
// 图形抽象层
class AbstractShape {
constructor({model, option, shapeFactory}) {
constructor({model, shapeType, shapeFactory}) {
this.model = model;
this.option = option;
this.shapeType = shapeType;
this.shapeFactory = shapeFactory;
this.hightLightInstance = new graphic.Rect(shapeStyleBuilder(this.model));
}

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

@ -16,8 +16,7 @@ class Compose extends AbstractShape {
this.instance = new Group({
...shapeRender,
...this.option,
...this.model,
shapeInstance: this,
...this.model
});
this.model.elementCodes.forEach(code => {
@ -28,8 +27,11 @@ class Compose extends AbstractShape {
}
})
const rect = this.instance.getBoundingRect();
this.instance.origin = [rect.x + rect.width/2, rect.y + rect.height/2];
console.log(this.instance)
this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
this.instance.decomposeTransform();
}
// 拖动
@ -37,14 +39,6 @@ class Compose extends AbstractShape {
this.model.position[0] = this.model.position[0] + dx;
this.model.position[1] = this.model.position[1] + dy;
this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
this.instance.decomposeTransform();
console.log(this.model.position, this.instance.transform);
// this.model.elementCodes.forEach(code => {
// const el = this.shapeFactory.getShapeByCode(code);
// if (el) {
// el.drift({dx, dy});
// }
// })
}
// 设置高亮
@ -102,13 +96,6 @@ class Compose extends AbstractShape {
// 修改属性
attr(attrs) {
// this.model.elementCodes.forEach(code => {
// const el = this.shapeFactory.getShapeByCode(code);
// if (el &&
// el) {
// el.attr(attrs);
// }
// })
this.instance.attr(attrs);
}
@ -119,18 +106,7 @@ class Compose extends AbstractShape {
// 获取包围框
getBoundingRect() {
return this.instance.getBoundingRect();
// let unionRect = null;
// this.model.elementCodes.forEach(code => {
// const el = this.shapeFactory.getShapeByCode(code)
// const rect = el.getBoundingRect().clone();
// rect
// ? unionRect
// ? unionRect.union(rect)
// : (unionRect = rect)
// : null;
// })
// return unionRect;
return utils.createBoundingRect(this.instance);
}
}

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

@ -33,62 +33,56 @@ class Element extends AbstractShape {
...shapeRender,
...this.option,
...this.model,
shapeInstance: this,
onmouseover,
onmousemove,
onmouseout
});
this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
}
}
// 拖动
drift({dx, dy}) {
// const scale = this.instance._scale||[1,1];
// const position = this.instance._position||[0,0];
// if (this.model.shape.hasOwnProperty('x')) {
// this.model.shape.x += dx;
// }
// if (this.model.shape.hasOwnProperty('y')) {
// this.model.shape.y += dy;
// }
// console.log(scale, position);
// dx = (dx + position[0]) / scale[0];
// dy = (dy + position[1]) / scale[1];
// [dx, dy] = utils.createTransformPosition(this.instance, 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('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('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('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];
})
}
// 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.instance.attr(this.model)
this.model.position[0] = this.model.position[0] + dx;
this.model.position[1] = this.model.position[1] + dy;
this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
}
// 设置高亮
@ -153,7 +147,8 @@ class Element extends AbstractShape {
// 获取包围框
getBoundingRect() {
return this.instance.getBoundingRect();
return utils.createBoundingRect(this.instance);
// return this.instance.getBoundingRect();
}
}

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

@ -108,22 +108,22 @@ class ShapeFactory extends Eventful {
try {
this.source = source;
zrUtil.each(source.elementList ||[], model => {
take(this.storageShape(this.createShape(model, {shapeType: shapeType.Element})));
take(this.storageShape(this.createShape(model, shapeType.Element)));
}, this);
zrUtil.each(source.composeList ||[], model => {
take(this.storageShape(this.createShape(model, {shapeType: shapeType.Compose})));
take(this.storageShape(this.createShape(model, shapeType.Compose)));
}, this);
} catch (error) {
console.error('[ERROR] ', error);
}
}
createShape(model={}, option={}) {
createShape(model={}, shapeType) {
let shape = null;
const shapeBuilder = shapeBuilderMap[option.shapeType];
const shapeBuilder = shapeBuilderMap[shapeType];
if (shapeBuilder) {
shape = new shapeBuilder({model, option, shapeFactory: this});
shape = new shapeBuilder({model, shapeType, shapeFactory: this});
shape.combine();
}
return shape;

6
src/iscs_new/map.js
View File

@ -117,7 +117,7 @@ class JMap {
setCenter(code) {
const shape = this.$shapeFactory.getShapeByCode(code);
if (shape && shape) {
var rect = utils.createTransformBoundingRect(shape);
var rect = utils.createBoundingRect(shape);
var center = utils.calculateDCenter(rect, { width: this.$zr.getWidth(), height: this.$zr.getHeight() });
this.setOption(center);
}
@ -158,7 +158,7 @@ class JMap {
switch(action.order) {
case orders.BINDING:
case orders.ADD:
newShape = this.$shapeFactory.createShape(updateModel, action);
newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
this.$shapeFactory.storageShape(newShape)
this.$painter.add(newShape);
break;
@ -171,7 +171,7 @@ class JMap {
break;
case orders.UPDATE:
oldShape = this.$shapeFactory.removeShape(shape);
newShape = this.$shapeFactory.createShape(updateModel, action);
newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
this.$painter.remove(oldShape);
this.$shapeFactory.storageShape(newShape)
this.$painter.add(newShape);

7
src/iscs_new/painter.js
View File

@ -35,7 +35,10 @@ class Painter extends Group {
// 创建元素图层
Object.keys(graphic).forEach(key => {
this.mapShapeLayer[key] = new Group({name: `__${key}__`});
this.mapShapeLayer[key] = new Group({
name: `__${key}__`
// matrix.identity(matrix.create())
});
})
// 添加图层
@ -74,7 +77,7 @@ class Painter extends Group {
name = Object.keys(graphic).includes(name)? name: `Group`;
return (view) => {
this.mapShapeLayer[name].add(view);
this.$transformHandle.transformView(view);
this.$transformHandle.visibleView(view);
}
}

40
src/iscs_new/transformHandle.js
View File

@ -13,10 +13,12 @@ export default class TransformHandle {
return this.transform;
}
// 检查显隐
checkVisible(view) {
return utils.createTransformBoundingRect(view).intersect(this.rect);
return utils.createBoundingRectByTransform(view, this.transform).intersect(this.rect);
}
// 重新计算显隐
visibleView(view) {
let visible = false;
if (this.checkVisible(view)) {
@ -30,22 +32,8 @@ export default class TransformHandle {
view.dirty();
}
// 视图进行缩放/平移
transformView(view) {
if (view) {
// view.transform = this.transform;
// view.decomposeTransform();
this.visibleView(view);
}
}
// 处理所有视图缩放/平移
// 缩放/平移图层
transformAll() {
this.traverse(this.transformView, this);
}
// 重新计算显示图形
visibleAll() {
this.traverse(this.visibleView, this);
}
@ -58,18 +46,24 @@ export default class TransformHandle {
// 更新画布尺寸
updateZrSize(opt) {
this.rect = { x: 0, y: 0, width: opt.width, height: opt.height };
this.visibleAll();
this.transformAll();
}
// 遍历group执行回调
// 遍历view执行回调
traverse(cb, context) {
this.$painter.eachChild(layer => {
layer.eachChild((view) => {
this.traverseLayer(layer => {
layer.eachChild(view => {
cb.call(context, view);
}, context);
})
}, context)
}
// 遍历图层执行回调
traverseLayer(cb, context) {
this.$painter.eachChild(layer => {
layer.transform = this.transform;
layer.decomposeTransform();
}, context);
cb.call(context, layer);
});
}
}

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

@ -54,11 +54,24 @@ export function createTransform({scale=[1,1], position=[0,0], rotation=0}) {
return transform;
}
// 计算缩放和偏移后的包围框
export function createTransformBoundingRect(view) {
// 计算自身缩放和偏移后的包围框
export function createBoundingRect(view) {
const rect = view.getBoundingRect().clone();
const scaleX = view.scale[0];
const scaleY = view.scale[1];
const offsetX = view.position[0];
const offsetY = view.position[1];
const transform = view.transform||matrix.identity(matrix.create());
rect.x = rect.x * scaleX + offsetX;
rect.y = rect.y * scaleY + offsetY;
rect.width = rect.width * scaleX;
rect.height = rect.height * scaleY;
return rect;
}
// 计算全局拖拽和缩放后的包围框
export function createBoundingRectByTransform(view, transform) {
const rect = view.getBoundingRect();
const scaleX = transform[0];
const scaleY = transform[3];
const offsetX = transform[4];
@ -68,7 +81,6 @@ export function createTransformBoundingRect(view) {
rect.y = rect.y * scaleY + offsetY;
rect.width = rect.width * scaleX;
rect.height = rect.height * scaleY;
return rect;
}

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

@ -131,6 +131,9 @@ export default {
code: '1',
name: 'a',
type: 'Rect',
scale: [1, 1],
position: [0, 0],
rotation: 0,
shape: {
x: 100,
y: 100,
@ -147,6 +150,9 @@ export default {
code: '2',
name: 'b',
type: 'Circle',
scale: [1, 1],
position: [0, 0],
rotation: 0,
shape: {
cx: 100,
cy: 100,
@ -162,6 +168,9 @@ export default {
code: '3',
name: 'a',
type: 'Rect',
scale: [1, 1],
position: [0, 0],
rotation: 0,
shape: {
x: 200,
y: 100,
@ -178,6 +187,10 @@ export default {
code: '4',
name: 'b',
type: 'Circle',
scale: [1, 1],
position: [200, 0],
rotation: 0,
scale: [0.5, 0.5],
shape: {
cx: 200,
cy: 100,
@ -193,6 +206,9 @@ export default {
code: '5',
name: 'c',
type: 'Droplet',
scale: [0.5, 0.5],
position: [200, 0],
rotation: 0,
shape: {
cx: 300,
cy: 200,
@ -209,6 +225,9 @@ export default {
code: '6',
name: 'd',
type: 'Droplet',
scale: [1, 1],
position: [0, 0],
rotation: Math.PI/2,
shape: {
cx: 400,
cy: 200,
@ -228,7 +247,8 @@ export default {
type: 'Device',
elementCodes: ['1', '2'],
scale: [0.5, 0.5],
position: [0, 0],
position: [200, 0],
rotation: Math.PI/2,
// composeCode: '1000',
},
{
@ -237,6 +257,7 @@ export default {
elementCodes: ['3', '4'],
scale: [1, 1],
position: [0, 0],
rotation: 0,
// composeCode: '1000'
},
// {