What is the most efficient way to reset shape size after scaling in PaperJS

Question

I am trying to create a very simple beacon animation in Paper JS. The idea is that the circle starts out very small and completely opaque, and then becomes larger and more transparent until it disappears and the animation restarts.

I use scaling to make the image larger, but resetting it to its original size becomes problematic, and at the moment I resorted to cloning the second circle to reset, and not just working with one shape, there should be an easier way to do this .

I created jsFiddle to demonstrate my rough code so far, any help would be appreciated.

http://jsfiddle.net/colethecoder/Y3S9n/1

Answer 1

Paperjs does not save the original Path and does not remember any operations that were applied to achieve the current state, so it can be difficult to reset to the previous state. The easiest approach is to use this.scale , which your current code computes, and when you want to reset do this.circle.scale(1/this.scale); Here is jsfiddle this way.

FYI, here is the code path for scaling:

• Item.scale()
• Item.transform()
• Item.apply()
• Path._apply()
• Segment._transformCoordinates()

So, the end result is that _transformCoordinates() is called on each of the four segments in the circle and simply moves the coordinates of the point ... nothing is remembered to “cancel” the scaling later.

Alternatively, to memorize the scale, you can use the Path.fitBounds () function to reduce the circles to an arbitrary size ... for example, you could save the bounding box right after creating the circle, and then unlink to that size.

Answer 2

The way I approached this problem is to bind a new object called originalBounds to paper.js forms immediately after they are created. If I needed to play with its size, going back, it became quite trivial.

Answer 3

Set item.applyMatrix = false if you do not want to save conversions next to item .

For example, the following code linearly (i.e., "additively") animates item.scaling :

 var item = new Path.Rectangle({ point: [75, 75], size: [5, 5], strokeColor: 'black', applyMatrix: false }); function onFrame(event) { item.scaling += 0.1; }