动画Raphaël.js形状与背景图像的问题

Question

我想动画与Raphaël.jsThis Demo使用背景图像的矩形。虽然矩形尺寸已设置为60x60，并且图像尺寸绝对为60x60，但图像不适合矩形内部！

对我来说，这只是当我使用animate（）函数，并没有所有的图像完美适合矩形内发生。

您能否让我知道为什么会发生这种情况以及我如何解决问题？

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); 

感谢

Answer 1

在Raphael.js Element.attr({fill: 'url(...)'})创建一个平铺<pattern>填写的形状和文本。然而，Raphael.js旨在兼容SVG和VML（由IE 8支持），所以在我看来它会做出一些妥协，比如自动调整<pattern>的位置。因此，翻译<rect>时，<pattern>被翻转，因此它们在画布内部看起来是固定的。

使用Paper.image(src, x, y, w, h)很可能解决您的问题，具有相同的视觉行为。因为<image>坐标不会被Raphael.js隐式改变。就像这样：

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); 

我还建议Snap.svg，这是来自同一作者的Raphael.js，但它是唯一的SVG和具有副作用少。