CODEWITHSUNDEEP
javascriptraphael
Mona Coder
Mona Coder

Reputation: 6316

Animating Raphaël.js shape with background image

I am trying to animate rectangles with background image using Raphaël.js, see this demo. While the Rectangle size has been set to 60x60 and also the image size is absolutely 60x60 image is not fitting inside the rectangles!

To me this is just happening when I use the animate() function and without that all images perfectly fit inside the rectangles.

Why is this happening and how I can solve the issue?

var r = Raphael('canvas', 500, 500);
r.canvas.style.backgroundColor = '#ccc';

var st = r.set();
st.push(
 r.rect(100,100,60,60),
 r.rect(180,100,60,60),
 r.rect(100,200,60,60)
);
st.attr({fill:"url(http://cdn2.image-tmart.com/prodimgs/1/13010995/Rose-Bouquet-of-Peach-Heart-Home-Decoration-Simulation-Red-Inside-Pink-Outside_3_60x60.jpg?1363942767)",  "stroke-width": 0});

st.animate({transform: "t200,100"}, 500);

Upvotes: 0

Views: 375

Answers (1)

dexjq23
dexjq23

Reputation: 386

In Raphael.js Element.attr({fill: 'url(...)'}) creates a tiled <pattern> to fill in shapes and texts. However, Raphael.js is aimed to be compatible with both SVG and VML (supported by IE 8), so in my opinion it makes some compromises like automatically adjusting the position of <pattern>. Thus, when you translate <rect>, the <pattern> is translated reversely so they look fixed inside the canvas.

Using Paper.image(src, x, y, w, h) is likely to solve your problem, with the same visual behavior. Because <image> coordinate will not be changed implicitly by Raphael.js. Like this:

var r = Raphael('canvas', 500, 500);
r.canvas.style.backgroundColor = '#ccc';

var st = r.set();
st.push(
    r.image(null, 100,100,60,60),
    r.image(null, 180,100,60,60),
    r.image(null, 100,200,60,60)
);

st.attr({src:"http://cdn2.image-tmart.com/prodimgs/1/13010995/Rose-Bouquet-of-Peach-Heart-Home-Decoration-Simulation-Red-Inside-Pink-Outside_3_60x60.jpg?1363942767"});

st.animate({transform: "t200,100"}, 500);

I also recommend Snap.svg, which is from the same author as Raphael.js, but it is for SVG only and has less side effects.

Upvotes: 1

Related Questions