javascript - Transform bounding box in Paper.js - Stack Overflow

admin管理员组

文章数量:1430701

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?

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?

• javascript
• paperjs

Share Improve this question Follow asked Nov 6, 2014 at 17:44 arthur.swarthur.sw 11.7k1010 gold badges5252 silver badges110110 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

本文标签： javascriptTransform bounding box in PaperjsStack Overflow