单击拉斐尔纸更改图像

Question

我有一个程序，用户可以使用 Raphael 将图像添加到论文中。现在我希望能够在单击时将图像更改为另一个图像。这可能吗？我必须为图像添加 ID 吗？如果可以，怎么做？

        var imgURL = "img/img.png";

        var bankNoteImg = new Image();
        bankNoteImg.src = imgURL;

        var width = bankNoteImg.width;
        var height = bankNoteImg.height;

        var image = paper.image(imgURL, X, Y, width, height);

Answer 1

使用拉斐尔 api 的 click and attr 功能。

Element.click 将函数作为参数。使用 this 访问函数内的图像元素。

我创建了一个简单的demo

var paper = Raphael(document.getElementById("papercanvas"), 200, 200);
var img = paper.image(URL1, 100, 100, 100 , 100);

function changeImageSource() {
    this.attr('src', URL2);
}

img.click(changeImageSource);

单击拉斐尔纸更改图像

Changing image on click Raphael paper

raphael