Raphael jsでパスとイメージをドラッグ可能にする

Question

Raphael jsを使用して、ページの周りに円や四角形以外のオブジェクトをドラッグアンドドロップすることは可能ですか？

パスと画像を追加したいのですが、移動することはできますが、その証明は難しいです。 タッチインターフェイスをサポートしているため、これをRaphaelと連携させたいと思います。ここで

私は少し前にこのを試し、そしてそれは、次のアプローチを使用して作業してしまったコード

<script> 
    window.onload = function() { 
     var R = Raphael(0, 0, "100%", "100%"), 
      r = R.circle(100, 100, 50).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5}), 
      g = R.circle(210, 100, 50).attr({fill: "hsb(.3, 1, 1)", stroke: "none", opacity: .5}), 
      b = R.circle(320, 100, 50).attr({fill: "hsb(.6, 1, 1)", stroke: "#fff", "fill-opacity": 0, "stroke-width": 0.8, opacity: .5}), 
      p = R.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z") .attr({fill: "hsb(.8, 1, 1)", stroke: "none", opacity: .5}); 
     var start = function() { 
      this.ox = this.attr("cx"); 
      this.oy = this.attr("cy"); 
      this.animate({r: 70, opacity: .25}, 500, ">"); 
     }, 
     move = function (dx, dy) { 
      this.attr({cx: this.ox + dx, cy: this.oy + dy}); 
     }, 
     up = function() { 
      this.animate({r: 50, opacity: .5}, 500, ">"); 
     }; 
     R.set(r, g, b, p).drag(move, start, up); 
    }; 
</script> 

Answer 1

です：

• はと最初に隠された、スタイル、絶対位置のdivを追加します。透明な背景とあなたのページに適したボーダースタイリング、jQuery/UIを使用することでドラッグ可能になります。
• ドラッグ可能なRapahel/SVG要素のそれぞれにクリックイベントを追加します。このイベントでは、クリックした要素のdivのサイズを変更して位置を変更して表示するコードを追加します。
• ドラッグすると、ラファエロ要素の位置を更新するコードをdivに追加します。

私は能力をリサイズ追加するには、これを拡張し、これもうまく働いたが、ラファエルに組み込まれ、ドラッグを参照してくださいドロップすると、（理想的に適切ではなくjQueryのを使用するよりも、ライブラリに統合）機能のサイズを変更するために素晴らしいことだ今後これらの機能は、純粋なRaphaelを使用しているブラウザ内のデザイナーに可能性を広げるためです。

Answer 2

これを非サークル用に試してください。サークルの属性は画像、テキストなどとは異なります。

var start = function() { 
     this.ox = this.attr("x"); 
     this.oy = this.attr("y"); 
     this.animate({r: 70, opacity: .25}, 500, ">"); 
    }, 
    move = function (dx, dy) { 
     this.attr({x: this.ox + dx, y: this.oy + dy}); 
    }, 
    up = function() { 
     this.animate({r: 50, opacity: .5}, 500, ">"); 
    }; 

Answer 3

クリスバトラーがあなたに与えた通常のドラッグ機能を理解するのはそれほど難しくありません。 私はこれを使用する：あなたは、これらの機能は、図のすべての並べ替えのために動作させることができるように

var start = function() { 
    //storing original coordinates 
    this.xSource = this.attrs.path[0][1]; 
    this.ySource = this.attrs.path[0][2]; 
    this.xDest = this.attrs.path[1][1]; 
    this.yDest = this.attrs.path[1][2]; 
    this.attr({opacity: 0.5}); 
    }, 
    move = function (dx, dy) { 
    //move will be called with dx and dy 
    var xS = this.xSource+dx; 
    var xD = this.xDest+dx; 
    var yS = this.ySource+dy; 
    var yD = this.yDest+dy; 
    this.attr({path: "M"+ xS +" "+ yS +"L"+ xD +" "+yD}); 
    }, 
    drag = function(){ 
    this.node.drag(this.move,this.start,this.up); 
    }; 

また、あなたはthis.typeと機能にドラッグしている数字のどの並べ替えを知ることができます。

Answer 4

ここでのキーは、xとyのデルタをパスオブジェクトが理解できる値に変換することです。効果的

http://www.nathancolgate.com/post/2946823151/drag-and-drop-paths-in-raphael-js

同じアプローチ：

var paper = Raphael(10, 50, 320, 200); 

var tri = paper.path("M0 0L0 20L25 10L0 0Z").attr("fill", "#ff0"); 
var rex = paper.rect(10, 20, 50, 50).attr("fill", "#ff0"); 

var start = function() { 
    this.odx = 0; 
    this.ody = 0; 
    this.animate({"fill-opacity": 0.2}, 500); 
}, 
move = function (dx, dy) { 
    this.translate(dx - this.odx, dy - this.ody); 
    this.odx = dx; 
    this.ody = dy; 
}, 
up = function() { 
    this.animate({"fill-opacity": 1}, 500); 
}; 

tri.drag(move, start, up); 
rex.drag(move, start, up); 

Answer 5

私はあなたのためのトリックを行いraphael.draggableライブラリを、お勧めします。私はマップアプリケーションを使用して、ユーザーがマップをズームしてからドラッグできるようにしました。

IE8でこのライブラリに問題がありました。mousedown、mousemoveなどを参照している関数イベントではIEが例外を投げ捨てるため、ユーザにeventがnullであることを伝えるためです。 eventをeに置き換え、raphael.draggable.jsスクリプトにe = e || eventを追加することで解決できます。この修正は他のブラウザには影響しません。

ので、startDraggerのメソッドのMouseMoveは、次のとおりです。

function startDragger() { 
    document.onmousemove = function(e) { 
    e = e || event 
    if (paper.draggable.current()) { 
     var transX = e.clientX - lastDragX; 
     var transY = e.clientY - lastDragY; 

     paper.draggable.current().translate(transX, transY); 
     lastDragX = e.clientX; 
     lastDragY = e.clientY; 
    } 
    }; 
} 

そしてリンク： https://github.com/mephraim/raphael.draggable

これはあなたを助けることができる願っています。

Answer 6

誰かがまだ解決策を探している場合は、パスを含むすべての図形を拡大縮小、回転、ドラッグするプラグインがあります。

https://github.com/ElbertF/Raphael.FreeTransform

Answer 7

ラファエルに廃止されている翻訳したように、私は変換で動作するようにネイサンの答えを変更した：

var paper = Raphael(10, 50, 320, 200); 

var tri = paper.path("M0 0L0 20L25 10L0 0Z").attr("fill", "#ff0"); 

var start = function() { 
    this.lastdx ? this.odx += this.lastdx : this.odx = 0; 
    this.lastdy ? this.ody += this.lastdy : this.ody = 0; 
    this.animate({"fill-opacity": 0.2}, 500); 
}, 
move = function (dx, dy) { 
    this.transform("T"+(dx+this.odx)+","+(dy+this.ody)); 
    this.lastdx = dx; 
    this.lastdy = dy; 
}, 
up = function() { 
    this.animate({"fill-opacity": 1}, 500); 
}; 

tri.drag(move, start, up); 

私はラファエルに比較的新しいですし、裁判を通じて、この思い付いたとエラーがあるので、そこにいる誰かが、なぜそれが動作するのか、よりクリーンな方法を説明するかもしれません;）