Question

我正在尝试在Paper.js中实现变换边界框，但它还没有正常工作。

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

我虽然在组中有两个路径，而是转换组，但我还没有时间尝试这个。

实施此方法的最佳方法是什么？

Answer 1

每个对象的pivot点都在bounds.center，因为您没有明确声明另一个点。因为您绘制的变换矩形的边界框被旋转手柄偏移，所以您将相对于不同的中心转换每对对象。尝试将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

转换Paper.js中的边界框

1 个答案: