2

このように Raphael を使用して形状 (長方形) を描画する方法はありますか?

http://devfiles.myopera.com/articles/649/example3.html

以下のコードを試しましたが、 ((onmouseup)) イベントの後にのみ四角形が表示されるため、うまくいきませんでした

上記のマウス クリック アンド ホールドの目的の例とは異なり、形状がポイントとして開始され、ユーザーがマウスを離すまで形状のサイズが変化し、形状は永続的になります。

$("#div1").mousedown(function(e) {

    var offset = $("#div1").offset();
    mouseDownX = e.pageX - offset.left;
    mouseDownY = e.pageY - offset.top;

});

$("#div1").mouseup(function(e) {
    var offset = $("#div1").offset();
    var upX = e.pageX - offset.left;
    var upY = e.pageY - offset.top;

    var width = upX - mouseDownX;
    var height = upY - mouseDownY;

    DrawRectangle(mouseDownX, mouseDownY, width, height);

});

function DrawRectangle(x, y, w, h) {

    var element = paper.rect(x, y, w, h);
    element.attr({
        fill : "gray",
        opacity : .5,
        stroke : "#F00"
    });
    $(element.node).attr('id', 'rct' + x + y);

    element.drag(move, start, up);
    element.click(function(e) {

        elemClicked = $(element.node).attr('id');

    });

}

このフィドル http://jsfiddle.net/XMyHz/26/で利用可能な完全な例

4

1 に答える 1

5

Raphael を使用して、リンク先の描画例を再作成する例を次に示します: http://jsfiddle.net/4Kdhz/1/

@Neil が述べたように、マウスを動かしたときに形状の寸法を変更する必要があるため、基本的なフローは次のとおりです。

onmousedown:

  1. 開始点に 0 x 0 の形状を描画します。
  2. onmousemove描画関数を実行するイベント リスナーを追加しdoDraw()ます。

onmouseup:

  1. 形状を削除します。
  2. onmousemoveリスナーをクリアします。

doDraw():

  1. onmousedown座標を使用して開始点を取得します。
  2. 形状の x、y、幅、高さの属性を計算して描画します。

Raphael では、長方形は負の幅または高さを持つことができないため、開始座標を変更し、幅と高さに -1 を掛けることに注意してください。

于 2012-11-12T07:11:46.587 に答える