使用背景图像为 Raphaël.js 形状设置动画答案

【问题标题】：Animating Raphaël.js shape with background image使用背景图像为 Raphaël.js 形状设置动画
【发布时间】：2014-09-24 07:10:31
【问题描述】：

我正在尝试使用 Raphaël.js 为带有背景图像的矩形设置动画，请参阅 this 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);

【问题讨论】：

标签： javascript raphael

【解决方案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，副作用较少。

【讨论】：