如何在Raphael.js中仅针对纸张的第二元素(图像或矩形)

How To Target Only Second Element of Paper (Image or Rectangle) in Raphael.js

本文关键字：元素 图像 js Raphael      更新时间：2023-09-26

使用拉斐尔.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()或填充:)通过改变图像的选择选项列表，但我不知道如何使用jQuery或JavaScript的目标第二个背景。

你能告诉我怎么做吗?

谢谢

有几段话可以说明评论中提到的要点。

您需要引用image2，然后您需要删除()它。那么你的click函数应该是这样的。

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

注意这里使用的. insertbefore (element)函数。这将把元素放在圆圈的后面，所以悬停仍然有效。

jsfiddle

相关文章：