1

I am looking to animate an image onto a canvas via a circle 'brush' [Think Photoshop default brush] wherever the circle moves on a path the image is revealed.

The image would be a bitmap, not a vector file. The brush will not have any additional detail beyond displaying the image its 'painting'

As additional clarification, the circle brush is moving automatically the user does not move the brush. It is just animated along a path.

I am really curious to see how this can be done with Raphael.

Thanks in advance!

BorisKourt
  • 187
  • 2
  • 15

1 Answers1

1

If you want to achieve something like that, you better think of using Canvas. Since Raphael is a library oriented exclusively to SVG. You can use non-svg images, but you are going to face lots of limitations.

On the other hand, Canvas is pixel oriented, so what you are trying to do is going to be easier.

Raphael is great when it comes to SVG and user interaction, because the elements you create, are nodes inside the DOM, and you can easily bind them to events.

If you still want to achieve something like that with Raphael, you are going to need to start digging a bit into Raphael's methods. Is to difficult for someone to explain the whole process. You better start trying, and ask some question on more particular problems.

Apart from Raphael's documentation, I recommend this exaggeratedly colorful, but useful site which have some working examples.

Either way I think you should reconsider using Raphale over Canvas!

I hope that helps!!

limoragni
  • 2,716
  • 2
  • 32
  • 50
  • Thank you for the time to look into that! I noticed that the bitmap image can be added as a texture to an SVG element which can then be manipulated as one would a normal SVG in Raphael. Thus theoretically I will be able to cut into it via a predefined path. The reason why I am looking in to this via Raphael is because of its out of the box support all the way down to IE6. Which, although can be slow, is important for the small project that this will be used in. But yes, I was worried that I phrased this way too narrowly and should probably have broken it down into a number of pieces. – BorisKourt Jan 24 '13 at 18:55