如何在Raphael.js

E使用Raphael.js目标只有纸的第二个元素（图片或矩形）2.1.0我想补充两个背景图像的文件对象，如：如何在Raphael.js

var w = 794; 
var h = 680; 
var map = Raphael("canvas"); 
     map.image('http://1.png', 0, 0, 794, 680); 
     map.image('http://2.png', 0, 0, 794, 680);

或者

var w = 794; 
var h = 680; 
var map = Raphael("canvas"); 
map.rect(0,0, 794, 680).attr({ 
           fill: "url(http://1.png)" 
}); 
map.rect(0,0, 794, 680).attr({ 
           fill: "url(http://2.png)" 
});

现在我需要找到一种方法来让用户更改第二个背景图像（从图像（）或填充:)通过更改图像的选择选项列表，但我不知道如何瞄准第二个使用jQuery或JavaScript的背景。

你能告诉我怎么做到这一点吗？

谢谢

来源

2014-05-20 Suffii

不太清楚，我看到的问题，你就不能使用VAR图像2 = map.image（ 'HTTP：//2.png'，0，0，794，680）; //用image2做些什么？ – Ian

嗨岚，谢谢你的回复。你是对的我用你的提示来重新渲染图像。这里是一个示例：http://jsfiddle.net/Behseini/22WJ3/1/但这里有一些问题：1-首先功能不是取代图像，实际上它是添加（覆盖）一个新的图像仍然以名字image2！ ---这也导致新添加的图像下的svg隐藏，所以悬停功能不起作用！你可以让我知道我可以如何替换图像2与新的形象，而不影响悬停功能，当然从画布上删除以前的图像2？ – Suffii

有几点可以达到评论中提到的点。

你需要引用image2，然后你需要删除（）它。所以你的点击功能看起来像这样...

$("#change").on("click",function(){ 
    image2.remove(); 
    image2 = map.image('myimageurl.png', 0, 0, 500, 500).insertBefore(circle); 
});

请注意使用的.insertBefore（元素）函数。这会把元素放在圆圈后面，所以悬停仍然可以工作。

jsfiddle

来源

2014-05-20 17:11:45 Ian

完美！感谢lan，这真棒 – Suffii

如何在Raphael.js

回答

相关问题