web-dev-qa-db-ja.com

SVGのドラッグ可能要素とサイズ変更可能要素

Svg要素（path、rect、またはcircle）をドラッグ可能にして、サイズ変更ハンドルを与えたいです。

ただし、HTML DOMとは異なり、すべての要素に左上隅のX、Y座標と、コンテンツを囲むボックスの幅と高さがあるわけではありません。これにより、一般的なサイズ変更またはドラッグ手順を作成するのが不便になります。

それぞれのパスまたは円を独自のsvgオブジェクト内に描画して、遊ぶためのボックスを提供するのは良い考えですか？

ドラッグ/サイズ変更は通常どのようにSVGに実装されますか？

javascriptsvgraphael
29
Boris Yeltz

注：ドラッグとサイズ変更の両方で、特定の異なるタイプの要素に対して別々のケースを作成する必要があります。 後で提供する例を見てください。同じ関数セットで楕円と長方形の両方のドラッグが処理されます。 。

要素をドラッグ可能にするには、次を使用します。

_element.drag(move, start, up);
_

3つの引数は、移動（ドラッグ）、開始（マウスダウン）、および停止（マウスアップ）を処理する関数への参照です。

たとえば、（ドキュメントから）ドラッグ可能な円を作成するには：

_window.onload = function() {
var R = Raphael("canvas", 500, 500);    
var c = R.circle(100, 100, 50).attr({
    fill: "hsb(.8, 1, 1)",
    stroke: "none",
    opacity: .5
});
var start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({cx: this.ox + dx, cy: this.oy + dy});
},
up = function () {
    // restoring state
    this.attr({opacity: .5});
};
c.drag(move, start, up);    
};​
_

jsFiddleの例


上記の例では、oxおよびoyプロパティが要素に追加され、その位置が追跡されます。これらのプロパティは、dxおよびdyは、ドラッグされている要素の位置を変更するために使用されます。

より複雑なドラッグアンドドロップ答えるこの質問 =。

オブジェクトのサイズを変更するには、リサイザのドラッグアンドドロップメソッドの2番目のセットを作成し、リサイザのドラッグに基づいてターゲット要素heightおよびwidthを調整するだけです。

ここに私が書いたドラッグアンドドロップとサイズ変更可能なボックスがいっぱいです：

ドラッグアンドドロップとサイズ変更可能なボックスのjsFiddleの例

_window.onload = function() {
var R = Raphael("canvas", 500, 500),
    c = R.rect(100, 100, 100, 100).attr({
            fill: "hsb(.8, 1, 1)",
            stroke: "none",
            opacity: .5,
            cursor: "move"
        }),
    s = R.rect(180, 180, 20, 20).attr({
            fill: "hsb(.8, .5, .5)",
            stroke: "none",
            opacity: .5
        }),
    // start, move, and up are the drag functions
    start = function () {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.attr({opacity: 1});

        this.sizer.ox = this.sizer.attr("x");
        this.sizer.oy = this.sizer.attr("y");
        this.sizer.attr({opacity: 1});
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({x: this.ox + dx, y: this.oy + dy});
        this.sizer.attr({x: this.sizer.ox + dx, y: this.sizer.oy + dy});        
    },
    up = function () {
        // restoring state
        this.attr({opacity: .5});
        this.sizer.attr({opacity: .5});        
    },
    rstart = function () {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");

        this.box.ow = this.box.attr("width");
        this.box.oh = this.box.attr("height");        
    },
    rmove = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({x: this.ox + dx, y: this.oy + dy});
        this.box.attr({width: this.box.ow + dx, height: this.box.oh + dy});
    };   
    // rstart and rmove are the resize functions;
    c.drag(move, start, up);
    c.sizer = s;
    s.drag(rmove, rstart);
    s.box = c;
};​
_

含まれているイベントハンドラー（もちろん.node()と組み合わせて使用​​できます）およびドラッグドロップの説明はページの下部にありますドキュメント内。

ラファエルキャンバスを1つ作成するだけで、各アイテムは異なる要素になります。上の例のように、それらを処理できるように変数に割り当てるだけです（作成された円要素を参照するためにcが使用されました）。

ここでのコメントへの応答は、単純なドラッグアンドドロップ+サイズ変更可能な円です。トリックは、円が配置にcxおよびcy属性を使用し、サイズにr属性を使用することです。メカニズムはほとんど同じです...楕円は少し複雑になりますが、これも正しい属性を操作する問題です。

ドラッグアンドドロップとサイズ変更可能な円のjsFiddleの例

_window.onload = function() {
    var R = Raphael("canvas", 500, 500),
        c = R.circle(100, 100, 50).attr({
            fill: "hsb(.8, 1, 1)",
            stroke: "none",
            opacity: .5
        }),
        s = R.circle(125, 125, 15).attr({
            fill: "hsb(.8, .5, .5)",
            stroke: "none",
            opacity: .5
        });
    var start = function () {
        // storing original coordinates
        this.ox = this.attr("cx");    
        this.oy = this.attr("cy");

        this.sizer.ox = this.sizer.attr("cx");    
        this.sizer.oy = this.sizer.attr("cy")

        this.attr({opacity: 1});
        this.sizer.attr({opacity: 1});
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({cx: this.ox + dx, cy: this.oy + dy});
        this.sizer.attr({cx: this.sizer.ox + dx, cy: this.sizer.oy + dy});
    },
    up = function () {
        // restoring state
        this.attr({opacity: .5});
        this.sizer.attr({opacity: .5});
    },
    rstart = function() {
        // storing original coordinates
        this.ox = this.attr("cx");
        this.oy = this.attr("cy");        

        this.big.or = this.big.attr("r");
    },
    rmove = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({cx: this.ox + dy, cy: this.oy + dy});
        this.big.attr({r: this.big.or + Math.sqrt(2*dy*dy)});
    };
    c.drag(move, start, up);    
    c.sizer = s;
    s.drag(rmove, rstart);
    s.big = c;
};
_
53
Peter Ajtai

Raphael.FreeTransform を見てください。

4
Elbert Alias

Graphitiを試してみてくださいここにリンクがあります： Draw2dおよびGraphiti

それはラファエルに基づいており、非常に使いやすいです。

3
JS Rocker

SVG.js用のこのプラグインもあります。

https://github.com/svgdotjs/svg.resize.js

0
Paul LeBeau