Paperjs 事件增量值延迟？路径比例

Question

所以我一直在尝试为绘制的路径制作 Transform 功能（就像 photoshop 一样）。只有 Left 和 Right（X 轴）的 Atm。

现在我想弄清楚如何使变换框继续调整大小，即使鼠标在另一侧也是如此。所以从这个https://i.imgur.com/znlFhnD.gif to this https://i.imgur.com/2HnNZll.gif

问题是当我尝试 Transform 并通过中心快速移动时，点开始 off 。那是因为 event.delta 和 invert 语句发生了。 https://i.imgur.com/2HnNZll.gif

         if(groupDots.children['rightCenter'].position.getDistance(event.point) > groupDots.children['leftCenter'].position.getDistance(event.point)){
                var as =  -(ccc+cccy)/2
         }else{var as =  (ccc+cccy)/2}

我假设 canvas 刷新速度不够快，无法在 if 语句之间平滑过渡？在这一点上，我正在寻找任何建议：/

感谢任何帮助！

Answer 1

你的分析听起来很正确。
我认为与其在每一帧的原始路径上应用变换（这样每次都会引入一个小的偏移量），不如保留原始路径的隐藏副本并在每一帧上从中计算变换后的路径，直到松开鼠标
这样，鼠标位置将尽可能靠近变换手柄。

让我知道这是否足够清楚。

编辑

为了准确说明我的想法，这里有一个简化的sketch演示。
通过查看您的代码，我认为您应该能够将其转换为您自己的用例。

let shape = new Path.RegularPolygon({
    center: view.center,
    sides: 3,
    radius: 50,
    fillColor: 'orange'
});
shape.rotate(-30);

const handle = new Path.Circle({
    center: shape.bounds.rightCenter,
    radius: 10,
    fillColor: 'blue'
});

let originalShape;

handle.onMouseDown = () => {
    originalShape = shape.clone().set({ visible: false });
};
handle.onMouseDrag = (event) => {
    handle.position.x = event.point.x;
    const center = originalShape.bounds.center;
    const originalVector = originalShape.bounds.rightCenter - center;
    const newVector = handle.position - center;
    const scaleX = newVector.x / originalVector.x;
    shape.remove();
    shape = originalShape.clone().set({ visible: true }).scale(scaleX, 1);
};
handle.onMouseUp = () => {
    originalShape.remove();
    handle.position = shape.bounds.rightCenter;
};

Paperjs 事件增量值延迟？路径比例

Paperjs event delta value delayed? Path scale

canvas

paperjs

编辑