为Rapha制作动画‡带有背景图像的l.js形状

Animating Raphaël.js shape with background image

本文关键字：图像 背景 形状 js Rapha 动画 #135      更新时间：2023-09-26

我正在尝试使用Raphaël.js制作带有背景图像的矩形动画，请参阅此演示。虽然矩形大小已设置为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);

在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，副作用较少。

相关文章：