0

以下のコードは、ラファエルで画像をループする方法です

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を使用して、画像がパスと入力されていることをキャッチし、//にタグをpaper.image('path'...)作成します。 すでにhtmlのタグがある場合、Raphael freetransformは、//に新しいタグを作成するのではなく、そのタグを使用して画像をキャッチすることは可能ですか。image<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 に答える