4

アップデート

私は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

http://jsfiddle.net/Ls7FS/3/

    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;
4

1 に答える 1

2

マウスダウンをバインドすると同時にドラッグイベントを機能させることはできません。

ハンドルにマウスを合わせるとオブジェクトのマウスアウトがトリガーされるため、マウスオーバーも機能しません。

クリックするとハンドルが表示され、マウスを離してもう一度クリックしてドラッグできます。FreeTransformのコールバック関数を使用してドラッグが発生しなかった場合は、クリック時にハンドルを非表示にできます。これがあなたが求めているものであるなら、私はあなたに例をあげることができます。

編集

サンプルコード（http://jsfiddle.net/nNwx8/1/）：

var
    paper = Raphael(0, 0, 500, 500),
    red   = paper.rect(200, 200, 100, 100).attr('fill', '#f00'),
    blue  = paper.rect(260, 260, 100, 100).attr('fill', '#00f')
    ;

register(red);
register(blue);

function register(el) {
    el.data('dragged', false);

    el.click(function() {
        // Toggle handles on click if no drag occurred
        if ( !this.data('dragged') ) {
            if ( this.freeTransform.handles.center === null ) {
                this.toFront();

                this.freeTransform.showHandles();
            } else {
                this.freeTransform.hideHandles();
            }
        }
    });

    paper.freeTransform(el, {}, function(ft, events) {
        if ( events.indexOf('drag start') !== -1 ) {
            el.data('dragged', false);
        }

        if ( events.indexOf('drag') !== -1 ) {
            el.data('dragged', true);
        }
    }).hideHandles();
}
于 2013-03-25T22:59:42.993 に答える