javascript - 在 Paper.js 中变换边界框

Question

我正在尝试在 Paper.js 中实现一个转换边界框，但它还不能正常工作。

Here是我的代码。如您所见，路径和选择框似乎并没有围绕同一个轴旋转，并且两个路径在一段时间后变得不同步。知道为什么会这样吗？

我考虑过将两条路径都放在一个组中，然后转换组，但我还没有时间尝试这个。

实现它的最佳方法是什么？

Answer 1

每个对象的 pivot 点都在它的 bounds.center 上，因为您还没有明确声明另一个点。因为您绘制的变换矩形的边界框偏移了旋转 handle ，所以您要相对于不同的中心变换每对对象。尝试将 initSelectionRectangle(path) 替换为:

function initSelectionRectangle(path) {
    if(selectionRectangle!=null)
        selectionRectangle.remove();
    var reset = path.rotation==0 && path.scaling.x==1 && path.scaling.y==1;
    var bounds;
    if(reset)
    {
        console.log('reset');
        bounds = path.bounds;
        path.pInitialBounds = path.bounds;
    }
    else
    {
        console.log('no reset');
        bounds = path.pInitialBounds;
    }
    console.log('bounds: ' + bounds);
    b = bounds.clone().expand(10,10);

    selectionRectangle = new Path.Rectangle(b);
    selectionRectangle.pivot = selectionRectangle.position;
    selectionRectangle.insert(2, new Point(b.center.x, b.top));
    selectionRectangle.insert(2, new Point(b.center.x, b.top-25));
    selectionRectangle.insert(2, new Point(b.center.x, b.top));
    if(!reset)
    {
        selectionRectangle.position = path.bounds.center;
        selectionRectangle.rotation = path.rotation;
        selectionRectangle.scaling = path.scaling;
    }

    selectionRectangle.strokeWidth = 1;
    selectionRectangle.strokeColor = 'blue';
    selectionRectangle.name = "selection rectangle";
    selectionRectangle.selected = true;
    selectionRectangle.ppath = path;
    selectionRectangle.ppath.pivot = selectionRectangle.pivot;
}

Here's a working sketch