下面的代码是如何在 raphael 中循环图像
var paper = Raphael('canvas', 1000, 1000);
for(i=1; i<=2; i++){
var r_img = paper.image('img/'+i+'.jpeg', 100, 100, 200, 200);
paper.freeTransform(r_img).setOpts({drag:'self', scale:true, rotate:true, draw:[ 'bbox' ]});
}
我有 2 个问题:
1. 如何将图像宽度/高度按比例缩小为原始图像?
2. 可以绑定html代码中存在的图片吗?
<div class="canvas">
<img src="...">
</div>
update
现在我们使用 Raphael 来捕捉图像是 type path in ,然后它会在//中paper.image('path'...)
创建一个image
标签。
如果html中已经有标签,那么Raphael freetransform捕获图像是否可以使用该标签,而不是在/ /中创建新标签。<canvas>
<svg>
<img>
<image>
<canvas>
<svg>
下面的代码是我为问题 1 尝试的。但似乎不起作用,问题 2。我不知道该怎么做,有什么建议吗?
var paper = Raphael('canvas', 1000, 1000);
var img = new Image();// for get the image width/height before
for(i=1; i<=1; i++){
img.src = 'img/'+i+'.jpeg';
img.onload = function(){
var newwidth = this.width;
var newheight = this.height;
var r_img = paper.image('img/'+i+'.jpeg', 100, 100, newwidth, newheight);
paper.freeTransform(r_img).setOpts({drag:'self', scale:true, rotate:true, draw:[ 'bbox' ]});
}
}
//html
<div id='canvas'></div>
//dir
img/1.jpeg, 2.jpeg