2

こんにちは。ご支援いただきありがとうございます。私はこれで一日中キーボードに頭をぶつけていて、助けが必要です。私は JavaScript と Raphael にかなり慣れていないので、明らかなことではないことを願っています。

Raphael のホームページに投稿された例とほぼ同じ方法で、要素をキャンバス上でドラッグできるようにする必要があるプロジェクトに取り組んでいます : http://raphaeljs.com/graffle.html例外 - ユーザーがブラウザ ウィンドウのサイズを変更すると、それに応じてキャンバス サイズが更新されません。むしろ、キャンバスが (コンソールへの出力を介して) 新しい寸法を正しく報告するという事実にもかかわらず、キャンバスの元の x/y 境界を超えて要素をドラッグすることはできません。

関連するコードのスニペットは次のとおりです。

CSS:

#canvas_container {  
background-color: #696969;
    color: #FFFFFF;
    padding: 15px 25px;
    shadow: 1px 1px #FFFFFF;
    margin-right: 310px;
    margin-top: 75px;
    min-width: 640px;
    min-height: 640px;
    border-radius: 20px;
}

JavaScript/ラファエル:

        //initialize canvas 
    fiddle.paper = new Raphael(document.getElementById("canvas_container"), $('#canvas_container').width(), $('#canvas_container').height()); 

    //resize handler
    $(window).resize(function() {
        if(this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function() {$(this).trigger('resizeEnd');}, 300);            
    });

    $(window).bind('resizeEnd', function() {
    //resize canvas
    fiddle.paper.setSize($('#canvas_container').width(), $('#canvas_container').height());

    });

一体何が足りないの??

4

3 に答える 3

0

まず最初に - 回答してくれた人に感謝します! 皆さんと交流することで、何が起こっているのかを理解することができました。

問題は Raphael Canvas ではなく、ドラッグ/ドロップ (Raphael.FreeTransform) を処理するために使用しているプラ​​グインであることが判明しました。ネイティブの Raphael ドラッグ アンド ドロップ ハンドラーとは異なり、FreeTransform は境界を設定して、ユーザーがキャンバスからオブジェクトをドラッグできないようにします。デフォルトの境界は、キャンバスの境界に設定されています。paper.setSize() でキャンバスのサイズを変更すると、境界オプションで明示的に指示しない限り、プラグインは境界を更新しません。作業用のサイズ変更コードは次のようになります。

        //resize handler
    $(window).resize(function() {
        if(this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function() {$(this).trigger('resizeEnd');}, 300);


    });

    $(window).bind('resizeEnd', function() {
    //resize canvas
        fiddle.paper.setSize($('#canvas_container').width(), $('#canvas_container').height());

        for (var i = 0; i < fiddle.ftArray.length; i ++) {
            fiddle.ftArray[i].setOpts({boundary: {x: 0, y: 0, width: $('#canvas_container').width(), height: $('#canvas_container').height() }});

        }


    });

(ftArray は、ウィンドウの読み込み時に作成される FreeTransform オブジェクトの配列です)

于 2013-04-21T21:28:39.473 に答える
0

IE7-8 のサポートが必要ない場合、自動サイズ変更は非常に簡単です。

fiddle.paper = new Raphael("canvas_container", '100%','100%');
于 2013-04-21T09:29:18.473 に答える