转换Paper.js中的边界框 [英] Transform bounding box in Paper.js

问题描述

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

I am trying to implement a transform bounding box in Paper.js, but it is not working properly yet.

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

Here is my code. As you can see, the path and the selection box do not seem to rotate around the same pivot, and both path get desynchronized after a while. Any idea why this happens?

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

I though about having both paths in a group, and transforming the group instead, but I had no time to try this yet.

实现此目的的最佳方法是什么？

What is the best way to implement this?

推荐答案

每个对象的 pivot point位于 bounds.center ，因为您尚未明确声明另一个点。因为您绘制的变换矩形的边界框被旋转手柄偏移，所以您将相对于不同的中心转换每对对象。尝试用以下代码替换 initSelectionRectangle（path）：

Every object's pivot point is at its bounds.center since you haven't explicitly declared another point. Because the bounding box of the transforming rectangle you've drawn offset by the rotation handle, you're transforming each pair of objects with respect to different centers. Try replacing initSelectionRectangle(path) with:

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

这是一张工作草图

这篇关于转换Paper.js中的边界框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！