转换Paper.js中的边界框

Question

我试图在Paper.js中实现一个变换边界框,但它还没有正常工作.

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

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

实现这个的最佳方法是什么？

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;
}

这是一张工作草图