2

私は raphaeljs で少し遊び始めましたが、Paper.set() に変換をドラッグして適用するときに小さな問題があります。

これが私の例です：http://jsfiddle.net/PQZmp/2/

1) ドラッグ イベントが にのみ追加され、 には追加されないmarkerのはなぜsliderですか?

2）変換は相対的であると想定されています（つまりtranslate by、ではありませんtranslate to）が、marker2回ドラッグすると、2番目のドラッグは最初のドラッグの最後ではなく最初から開始されます。

編集: ゼロの応答の後、新しい JSFiddle の例を作成しました: http://jsfiddle.net/9b9W3/1/

1)セットの最初の要素の代わりに をthis参照するとクールです。setこれはできませんdragger.apply(slider)か？私はそれを試しましたが、メソッドの最初の実行でのみ機能します（おそらくラファエル内ではすでに実行されていますが、のset代わりに内の最初の要素に対してset）

2) Raphael docsによると、変換はオブジェクトの位置に対して相対的である必要があります (つまりtranslate by、 ではありませんtranslate to)。しかし、上記の jsfiddle に従って起こっていることではありません (両方のマーカー ドラッグ イベントを確認してください)。

3) したがって2)、上記は 3 番目の質問を作成します。atransform("t30,0")が a の場合translation by 30px horizontally、原点はどのように計算されますか? またはに基づいていますattr("x")かgetBBox().x？

4

2 に答える 2

4

ドラッグ イベントは実際にはマーカーとスライダーの両方に追加されていますが、スライダーのストローク幅は 1 で塗りつぶしがないため、正確な境界線をキャッチしない限り、クリックはキャンバスに「落ちます」。

その背後には別の問題があります。ドラッグは両方の要素に適用されていthisますが、ドラッグ ハンドラではセットではなく特定の要素を参照しているため、両方の要素が互いに独立してドラッグされます。

最後に: 各ドラッグが最初の位置から開始される理由は、dx、dy パラメーターdraggerが最初のドラッグ イベントの座標に相対的であり、変換が以前の変換を考慮していないためです。次のような代替案を検討してください。

var r = new Raphael(0, 0, 400, 200);
var marker = r.path("M10,0L10,100").attr({"stroke-width": 5});
var button = r.rect(0, 0, 20, 20, 1).attr( { 'stroke-width': 2, fill: 'white' } );
var slider = r.set( marker, button );

var startx, starty;

var startDrag = function(){
    var bbox = slider.getBBox();
    startx = bbox.x;
    starty = bbox.y;
    console.log(this);
}, dragger = function(dx, dy){
    slider.transform("t" + ( startx + dx ) + "," + starty );
}, endDrag = function(){

};

slider.drag(dragger, startDrag, endDrag);

更新に対処するには:

  1. element.drag の 4 番目、5 番目、6 番目のオプションのパラメーターとして、ドラッグ関数が実行されるコンテキストを指定できると思います。私はこれを自分で試したことはありませんが、これはうまくいくようです：

    Slider.drag( ドラッガー, startDrag, endDrag, スライダー, スライダー, スライダー );

  2. 変換は、オブジェクトの位置に相対的です。これは、開始位置が 0 であるため、最初のスライダーには適していますが、2 番目のスライダーにはあまり適していません。

  3. ...最小/最大スライダーの変換は、実際には個々のマーカーではなく、スケールに関連する必要があります。したがって、マウス カーソルをゼロの位置にドラッグすると、最大スライダー (赤いスライダー) が初期位置に戻ることがわかります。わかる？

于 2012-06-23T19:56:13.793 に答える
0 
    var position;
    var rect = paper.rect(20, 20, 40, 40).attr({
            cursor: "move",
            fill: "#f00",
            stroke: "#000"
    });
    t = paper.text(70,70, 'test').attr({
            "font-size":16, 
            "font-family": 
            "Arial, Helvetica, sans-serif" 
    });
    var st = paper.set();
    st.push(rect, t);
    rect.mySet = st;
    rect.drag(onMove, onStart, onEnd);
    onStart = function () {
        positions = new Array();
        this.mySet.forEach(function(e) {
            var ox = e.attr("x");
            var oy = e.attr("y");
            positions.push([e, ox, oy]);
        });
    }
    onMove = function (dx, dy) {
        for (var i = 0; i < positions.length; i++) {//you can use foreach but I want to
             // show that is a simple array
            positions[i][0].attr({x: positions[i][1] + dx, y: positions[i][2] + dy});
        }
    }
    onEnd = function() {}
于 2013-09-21T06:02:29.027 に答える