Transform bounding box in Paper.js

Question

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?

Answer 1

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

Here's a working sketch