There are 2 images in the form of a circle, for example, in the png format. It is necessary to draw a circle on the web page so that the sector of the first image is visible (the angle of the sector is set, it can be changed), and the rest of the circle (the remaining sector) is from the second image.

How can this be implemented? How to animate? Animation, when we ask that the angle of the sector should change, for example, increase by 50 degrees and it gradually increases.

Important cross-browser compatibility.

@invincible, concretizing: example

It is necessary that the purple part (sector) could decrease, and the yellow one increase and vice versa.

1 answer 1

Raphael - to help you. I didn’t quite understand the task, if you make an illustration, maybe I will help with a specific code, or see examples on the website and in the internet.

  • one
    Yes, it also seems to me that the vector graphics are better suited here than the perversion with pictures =) - stasych
  • I agree. But I note that RaphaelJS also allows you to manipulate images, working with them as objects + bonuses such as cropping, rotation, mask, etc. - invincible
  • And how to crop the image? - megacoder
  • Well, something like this: jsfiddle.net/invincible/J9LeL - invincible