0

下面的代码是如何在 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
4

1 回答 1

1

1)在img.onload之后移动img.src

for(i=1; i<=1; i++){
    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' ]});
    }
    img.src = 'img/'+i+'.jpeg';
}

这是必需的，因为如果您首先设置src然后才定义onload - 图像已经加载，所以onload永远不会触发。

2)问题不清楚——你能用其他方式说吗？

于 2013-03-25T12:35:17.990 回答