在 Raphael 中使用 javascript 调整 jpg 的大小

Question

我正在使用 jquery 和 Raphael 创建一个界面，其中的卡片可以四处移动，并且上面有不同的图像。我用图像作为填充创建了矩形对象。目前图像只能是原始图像的大小，但我想调整它们的大小以使其长度增加一倍（原始图像的宽度和高度为 40 像素，但我希望它们为 80）。如何在不更改原始文件的情况下做到这一点？

这是我的代码：

for(var i = 71; i > 0; i--){

    var card_name = orderRecord[i - 1];//orderRecord is a randomly ordered array of ints between 1 and 72

    //the images are titled 'image1.jpg', 'image2.jpg', etc. 
    cards[card_name] = main_canvas.rect(10, 10, 80, 80).attr('fill','url(images/thumbnails/image' + card_name + '.jpg)');
}

Answer 1

您可以使用 Raphael 的 Element.transform() 方法缩放元素。

双倍宽度：

cards[card_name].transform( [ '...s2,1' ] );

双倍宽高：

cards[card_name].transform( [ '...s2,2' ] );