javascript - raphael.js を使用して、角ごとにコントロール ポイントを持つポリゴンを描画する方法

Question

raphael.js を使用して、多角形の各コーナーにコントロール ポイントを持つ多角形を描画するにはどうすればよいですか。

制御点はドラッグ可能である必要があり、制御点を移動すると、関連する線も移動する必要があります。何かアイデアをください??

Answer 1

これを行う 1 つの方法を次に示します。最初に、次のように各コントロール ポイントに円を描きます。

// Creates canvas
var paper = Raphael("canvas1", "100%", "100%");

// create small circle for each polygon point
var p1 = paper.circle(150, 50, 5).attr("fill", "blue");
var p2 = paper.circle(200, 100, 5).attr("fill", "blue");
var p3 = paper.circle(200, 200, 5).attr("fill", "blue");
var p4 = paper.circle(100, 200, 5).attr("fill", "blue");
var p5 = paper.circle(100, 100, 5).attr("fill", "blue");

次に、更新された場合に線が自動的に再描画されるように、制御点を接続する必要があります。これを行うための便利な関数がこの質問にあります。ここで再現し、ニーズに合わせてわずかに変更しました (dragイベントをリッスンし、行属性を引数として受け入れ、コメントで指摘したバグを修正します。元の質問):

// Modified from: https://stackoverflow.com/questions/9956186/raphael-js-maintain-path-between-two-objects
// Call paper.connect(obj1,obj2,attributes)
// That draws a line between the two objects and maintains the line when the objects are animated
Raphael.fn.connect = function(obj1, obj2, attribs) {
    // list of paths each object has
    if (!obj1.connections) obj1.connections = []
    if (!obj2.connections) obj2.connections = []
    // get the bounding box of each object
    var box1 = obj1.getBBox()
    var box2 = obj2.getBBox()
    // create a line/path from object 1 to object 2
    var p = this.path("M" + (box1.x + box1.width / 2) + ","
            + (box1.y + box1.height / 2) + "L" + (box2.x + box2.width / 2)
            + "," + (box2.y + box2.height / 2))
    // adjust attributes of the path
    p.attr(attribs)
    // set the start and end element for this path
    p.startElement = obj1;
    p.endElement = obj2;
    // add the path to each of the object
    obj1.connections.push(p)
    obj2.connections.push(p)
    // mark each object as being connected
    obj1.connected = true;
    obj2.connected = true;
    // listen for the Raphael frame event
    eve.on("raphael.drag.*", function(obj) {
        // if the object the frame event is fired on is connected
        if (this.connected) {
            // for each connection on this object
            for ( var c in this.connections) {
                var path = this.connections[c]; // temp path
                var b1 = path.startElement.getBBox(); // get the current
                                                        // location of start
                                                        // element
                var b2 = path.endElement.getBBox();// get the current location
                                                    // of end element
                // move the path to the new locations
                path.attr({
                    path : "M " + (b1.x + b1.width / 2) + " "
                            + (b1.y + b1.height / 2) + "L "
                            + (b2.x + b2.width / 2) + " "
                            + (b2.y + b2.height / 2),
                    opacity : Math.max(path.startElement.attr('opacity'),
                            path.endElement.attr('opacity'))
                });
            }
        }
    });
}

この関数を使用して、隣接するコントロール ポイントを接続できるようになりました。

// connect adjacent polygon points
paper.connect(p1,p2,{stroke:"red"});
paper.connect(p2,p3,{stroke:"red"});
paper.connect(p3,p4,{stroke:"red"});
paper.connect(p4,p5,{stroke:"red"});
paper.connect(p5,p1,{stroke:"red"});

次に、コントロール ポイントをドラッグ可能にします。これは次のように行うことができます。

// make points draggable
var start = function () {
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
},
move = function (dx, dy) {
    this.attr({cx: this.ox + dx, cy: this.oy + dy});
},
up = function () {};
paper.set(p1,p2,p3,p4,p5).drag(move, start, up);

これらすべてをまとめると、頂点がドラッグされると更新されるドラッグ可能な頂点とエッジを持つポリゴンが得られます。

ここで実際の動作例を見ることができます