動畫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和具有副作用少。