アップデート
私はRaphaelFreetransformを使用して、ユーザーのアップロードからのimgを表示
し、長時間検索しています。以下の方法を実行します
1)click
切り替えますshowhandle``hidehandle
か? 解決しました
2)新しいFreetransformオブジェクトを作成するたびに、新しいボタンを追加します。
-ボタンをクリックすると、オブジェクトを削除できます。
3)RaphaelオブジェクトはtoFront
、Freetransformを使用できます。
RaphaelFreetransformの基本的なコーディングを使用します。
var paper = Raphael($('.canvas')[0], 1000, 1000);
var r_img = paper.image('img/path'+file_type, 100, 100, 200, 200);
paper.freeTransform(r_img).setOpts({drag:'self', scale:true, rotate:true, draw:[ 'bbox' ], keepRatio: true});
ユーザーがキャンバスに2imgをアップロードすると、出力ソースコードは次のようになります。
<image></image>
<image></image>
// 1st image handle
<path></path>
<circle></circle>
<path></path>
<circle></circle>
<path></path>
<rect></rect> // x8
// 2nd image handle
<path></path>
<circle></circle>
<path></path>
<circle></circle>
<path></path>
<rect></rect> // x8
質問を解決します2)
divタグbeボタンを作成すると、1つのグループ(画像とハンドル)が選択されません。
質問3)を解決する
場合click
、リソースimage
を使用できますが、ハンドルも前面に配置する方法はありますか?toFront
img.onload = function(){
var img_width = this.width, img_height = this.height;
var img_scale = img_width / 200;
var new_height = img_height / img_scale;
var ft, r_img = paper.image('img/'+path, 0, 0, 200, new_height), dragged = false;
r_img.click(function(){
// Toggle handles on click if no drag occurred
if(!dragged){
if( ft.handles.center === null){
ft.showHandles();
console.log('front');
r_img.toFront();
//r_img.remove();
}else{
ft.hideHandles();
}
}
});
ft = paper.freeTransform(r_img, {draw:[ 'bbox' ], keepRatio: true, size: 3 }, function(ft, events){
if(events.indexOf('drag start') !== -1){
dragged = false;
}
if(events.indexOf('drag') !== -1){
dragged = true;
}
});
};
img.src = 'img/'+path;