javascript - 如何在 Raphael.js 中仅定位纸张的第二个元素(图像或矩形)

Question

eUsing Raphael.js 2.1.0 我正在尝试向纸张对象添加两个背景图像，例如:

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

现在我需要找到一种方法，使用户能够通过更改图像的选择选项列表来仅更改第二个背景图像(从 image() 或 fill:)，但我不知道如何使用 jQuery 定位第二个背景或 JavaScript。

你能告诉我怎么做吗？

谢谢

Answer 1

评论中提到的要点还有几点。

您需要引用 image2，然后您需要对其进行 remove()。所以你的点击功能看起来像这样......

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

注意使用的 .insertBefore( element ) 函数。这会将元素放在圆圈后面，因此悬停仍然有效。

jsfiddle