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?

Lindie

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

Selffulfillment

Thanks very much! I thought about this problem: I tried to avoid the handle on the top edge of the selection box (remove +25), and I this did not solve the problem. But I did not think about setting the pivot point, great! – Lindie

However, there is still a problem with the rotation: if you play with it a little bit, changing position, scale and rotation of two objects, you will see that sometimes, the rotation jumps. Any idea why? – Lindie

It seems that moving the path causes a reset of the rotation and scaling. Reseting the selection box when the path moves solve the problem. I will update your answer to include the fix. – Lindie

@Lindie "could you please share the fix. You wrote you would include the fix which resets the selection box when the path moves. It is not working for me, at least I cannot find the resetting in the code above. Thanks" -- quoted shinichi, who apparently didn't have enough reputation to ask you himself. Sorry if I violated any rules doing this for my fellow human being. – Courson

can fix it by setting 'paper.settings.applyMatrix = false;' – Troudeloup