[英]Fabric.js: Keep object positions fixed when rescaling group
I am trying to generate a group where some elements should stick at their same size AND position (as seen from the groups's edgs). 我正在尝试创建一个组,其中某些元素应停留在相同的大小和位置(从组的edg中可以看出)。
I figured the size issue. 我发现了尺寸问题。 However, I am failing to get a fully working solution for keeping the positions the same.
但是,我无法获得一个完全有效的解决方案来保持职位不变。 Here is my current approach:
这是我目前的方法:
http://jsfiddle.net/on7kujhs/111/ http://jsfiddle.net/on7kujhs/111/
let originalX = e.originalLeft + e.width / 2, // my true left of my center, relative to group
percentageX = 0.5 + originalX / target.width, // how much I will change my position in percent. zero if originalX is exactly the same as half the width, one if im at right edge
totalChangeX = (target.scaleX - 1) * target.width / 2, // how much the center shifts
myMovX = percentageX * totalChangeX; // how much I moved to the right
if (e.groupedScaleOriginX === 'left') {
e.left = e.originalLeft - myMovX;
} else if (e.groupedScaleOriginX === 'right') {
e.left = e.originalLeft + totalChangeX * (1 - percentageX);
}
I think I figured it out. 我想我知道了。
http://jsfiddle.net/y3o7Lwn6/27/ http://jsfiddle.net/y3o7Lwn6/27/
The key is saving all objects positions relative to the groups borders and modifying them on scaling, as well as saving the true top/left positions relative to the groups top left border: 关键是保存所有对象相对于组边界的位置并在缩放时对其进行修改,以及保存相对于组左上边界的真实顶部/左侧位置:
let dX = (tr.scaleX - 1) / tr.scaleX;
let dY = (tr.scaleY - 1) / tr.scaleY;
if (e.groupedScaleOriginX == 'left') {
e.left = e.originalLeft - dX * e.trueLeft;
} else if (e.groupedScaleOriginX == 'right') {
e.left = e.originalLeft - dX * e.trueRight;
}
if (e.groupedScaleOriginY == 'top') {
e.top = e.originalTop - dY * e.trueTop;
} else if (e.groupedScaleOriginY == 'bottom') {
e.top = e.originalTop - dY * e.trueBottom;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.