修改缩放变化的问题

This commit is contained in:
ival 2021-04-01 23:15:01 +08:00
parent 6ebbdec414
commit 832513c750
6 changed files with 49 additions and 36 deletions

View File

@ -20,7 +20,6 @@ class Compose extends AbstractShape {
shapeInstance: this, shapeInstance: this,
}); });
// this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
this.model.elementCodes.forEach(code => { this.model.elementCodes.forEach(code => {
const el = this.shapeFactory.getShapeByCode(code); const el = this.shapeFactory.getShapeByCode(code);
if (el.instance) { if (el.instance) {
@ -29,17 +28,23 @@ class Compose extends AbstractShape {
} }
}) })
this.instance.dirty(); this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
this.instance.decomposeTransform();
} }
// 拖动 // 拖动
drift({dx, dy}) { drift({dx, dy}) {
this.model.elementCodes.forEach(code => { this.model.position[0] = this.model.position[0] + dx;
const el = this.shapeFactory.getShapeByCode(code); this.model.position[1] = this.model.position[1] + dy;
if (el) { this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
el.drift({dx, dy}); 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});
// }
// })
} }
// 设置高亮 // 设置高亮
@ -69,9 +74,9 @@ class Compose extends AbstractShape {
const el = this.shapeFactory.getShapeByCode(code); const el = this.shapeFactory.getShapeByCode(code);
if (el && if (el &&
el.model) { el.model) {
el.model.composeCode = this.model.code;
this.shapeFactory.removeFromLayer(el.model.type, el.instance); this.shapeFactory.removeFromLayer(el.model.type, el.instance);
this.instance.add(el.instance); this.instance.add(el.instance);
el.model.composeCode = this.model.code;
el.attr(el.model); el.attr(el.model);
} }
}) })
@ -86,9 +91,9 @@ class Compose extends AbstractShape {
if (el && if (el &&
el.model && el.model &&
el.model.composeCode) { el.model.composeCode) {
el.model.composeCode = ''; this.instance.remove(el.instance);
this.remove(el.instance);
this.shapeFactory.addToLayer(el.model.type, el.instance); this.shapeFactory.addToLayer(el.model.type, el.instance);
el.model.composeCode = '';
el.attr(el.model); el.attr(el.model);
} }
}) })
@ -97,13 +102,14 @@ class Compose extends AbstractShape {
// 修改属性 // 修改属性
attr(attrs) { attr(attrs) {
this.model.elementCodes.forEach(code => { // this.model.elementCodes.forEach(code => {
const el = this.shapeFactory.getShapeByCode(code); // const el = this.shapeFactory.getShapeByCode(code);
if (el && // if (el &&
el) { // el) {
el.attr(attrs); // el.attr(attrs);
} // }
}) // })
this.instance.attr(attrs);
} }
// 获取依赖图形 // 获取依赖图形
@ -113,17 +119,18 @@ class Compose extends AbstractShape {
// 获取包围框 // 获取包围框
getBoundingRect() { getBoundingRect() {
let unionRect = null; return this.instance.getBoundingRect();
this.model.elementCodes.forEach(code => { // let unionRect = null;
const el = this.shapeFactory.getShapeByCode(code) // this.model.elementCodes.forEach(code => {
const rect = el.getBoundingRect().clone(); // const el = this.shapeFactory.getShapeByCode(code)
rect // const rect = el.getBoundingRect().clone();
? unionRect // rect
? unionRect.union(rect) // ? unionRect
: (unionRect = rect) // ? unionRect.union(rect)
: null; // : (unionRect = rect)
}) // : null;
return unionRect; // })
// return unionRect;
} }
} }

View File

@ -51,7 +51,8 @@ class Element extends AbstractShape {
// dx = (dx + position[0]) / scale[0]; // dx = (dx + position[0]) / scale[0];
// dy = (dy + position[1]) / scale[1]; // dy = (dy + position[1]) / scale[1];
[dx, dy] = utils.createTransformPosition(this.instance, dx, dy); // [dx, dy] = utils.createTransformPosition(this.instance, dx, dy);
if (this.model.shape.hasOwnProperty('x')) { if (this.model.shape.hasOwnProperty('x')) {
this.model.shape.x += dx; this.model.shape.x += dx;
} }

View File

@ -150,6 +150,7 @@ class JMap {
const updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model; const updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model;
const shape = this.$shapeFactory.getShapeByCode(updateModel.code); const shape = this.$shapeFactory.getShapeByCode(updateModel.code);
const deps = shape.getDepShapes(); const deps = shape.getDepShapes();
let oldShape = null let oldShape = null
let newShape = null; let newShape = null;

View File

@ -75,7 +75,6 @@ class Painter extends Group {
return (view) => { return (view) => {
this.mapShapeLayer[name].add(view); this.mapShapeLayer[name].add(view);
this.$transformHandle.transformView(view); this.$transformHandle.transformView(view);
this.dirty();
} }
} }

View File

@ -33,8 +33,8 @@ export default class TransformHandle {
// 视图进行缩放/平移 // 视图进行缩放/平移
transformView(view) { transformView(view) {
if (view) { if (view) {
view.transform = this.transform; // view.transform = this.transform;
view.decomposeTransform(); // view.decomposeTransform();
this.visibleView(view); this.visibleView(view);
} }
} }
@ -67,6 +67,8 @@ export default class TransformHandle {
layer.eachChild((view) => { layer.eachChild((view) => {
cb.call(context, view); cb.call(context, view);
}, context); }, context);
layer.transform = this.transform;
layer.decomposeTransform();
}, context); }, context);
} }
} }

View File

@ -172,7 +172,7 @@ export default {
fill: 'red', fill: 'red',
stroke: 'black' stroke: 'black'
}, },
composeCode: '100' composeCode: '101'
}, },
{ {
code: '4', code: '4',
@ -187,7 +187,7 @@ export default {
fill: 'red', fill: 'red',
stroke: 'black' stroke: 'black'
}, },
composeCode: '100' composeCode: '101'
}, },
{ {
code: '5', code: '5',
@ -227,13 +227,16 @@ export default {
code: '100', code: '100',
type: 'Device', type: 'Device',
elementCodes: ['1', '2'], elementCodes: ['1', '2'],
// scale: [0.5, 0.5] scale: [0.5, 0.5],
position: [0, 0],
// composeCode: '1000', // composeCode: '1000',
}, },
{ {
code: '101', code: '101',
type: 'Device', type: 'Device',
elementCodes: ['3', '4'], elementCodes: ['3', '4'],
scale: [1, 1],
position: [0, 0],
// composeCode: '1000' // composeCode: '1000'
}, },
// { // {