CODEWITHSUNDEEP
paperjs
user1803975
user1803975

Reputation: 345

I can't copy the transform matrix from one layer to another in paperjs

I need to copy the scale and translate properties from one item to another in paperjs.

I've tried using

itemA.copyAttributes(itemB, false)

but this doesn't seem to do anything?

I've also tried

itemA.transform(itemB.matrix)

Which again doesn't work. I can copy the translate using the lines below

itemA.position.x = itemB.position.x
itemA.position.x = itemB.position.x

But I can't figure out how to copy the scale, any ideas

Upvotes: 0

Views: 504

Answers (1)

sasensi
sasensi

Reputation: 4650

One trick to be able to copy transformations from one item to another is to set item.applyMatrix to false.
This will have the effect of storing item translation, scaling and rotation into properties instead of applied them to its geometry.
You will then be able to apply them to another item.

Here is a sketch demonstrating the solution.

// Create an orange filled square.
var squareA = new Path.Rectangle({
    from: view.center - 200,
    to: view.center - 100,
    fillColor: 'orange',
    // Notice that matrix is not applied, this will allow us to copy scaling and rotation later.
    applyMatrix: false
});

// Create a blue stroked square by cloning the orange one.
squareB = squareA.clone();
squareB.strokeColor = 'blue';
squareB.fillColor = null;

// Transform the orange square.
squareA.translate(100, 100);
squareA.scale(2);
squareA.rotate(80);

// Replicate transformations to blue stroked square by copying individual values.
squareB.position = squareA.position;
squareB.scaling = squareA.scaling;
squareB.rotation = squareA.rotation;

Upvotes: 1

Related Questions