jsPlumb连接拉斐尔元素的

Question

我使用 raphael.js 绘制了一些元素，现在我想连接它们， 如何将 raphael 元素与 jsplumb 连接起来？

例如，在下面的 JSFiddle 中：我正在尝试在 2 个圈子之间创建连接，但我不能，因为圈子没有 ID，my code。

我不能用这个：

jsPlumb.connect({source:"id1", target:"id2"})

Answer 1

终于找到了用jsplumb连接raphael元素的解决方案，感谢@Simon Porritt先生（jsPlumb创建者）的帮助：the solution

   jsPlumb.ready(function(){
        jsPlumb.Defaults.Container = "drawing_board";

        // Create a 480 x 640 canvas.
        var paper = Raphael('drawing_board');

        // of 90 pixels.
        var circle1 = paper.circle(140, 110, 90).attr({ fill: '#3D6AA2', stroke: '#000000', 'stroke-width': 8 });
        var circle2 = paper.circle(400, 180, 90).attr({ fill: '#3D6AA2', stroke: '#000000', 'stroke-width': 8 });

        var rect = paper.rect(50, 280, 90, 70).attr({ fill: '#3D6AA2', stroke: '#000000', 'stroke-width': 8 });    

            var ellipse = paper.ellipse(300, 420, 90, 70).attr({ fill: '#3D6AA2', stroke: '#000000', 'stroke-width': 8 });

        var offsetCalculators = {
            "CIRCLE":function(el, parentOffset) {
               var cx = parseInt(el.attr("cx"), 10), 
                   cy = parseInt(el.attr("cy"), 10),
                   r = parseInt(el.attr("r"), 10);
                return {
                    left: parentOffset.left + (cx - r),
                    top:parentOffset.top + (cy - r)
                };
            },
            "ELLIPSE":function(el, parentOffset) {
               var cx = parseInt(el.attr("cx"), 10), 
                   cy = parseInt(el.attr("cy"), 10),
                   rx = parseInt(el.attr("rx"), 10),
                   ry = parseInt(el.attr("ry"), 10);               
                return {
                    left: parentOffset.left + (cx - rx),
                    top:parentOffset.top + (cy - ry)
                };
            },
            "RECT":function(el, parentOffset) {
               var x = parseInt(el.attr("x"), 10),
                   y = parseInt(el.attr("y"), 10);
               return {
                    left: parentOffset.left + x,
                    top:parentOffset.top + y
                };
            }
        };

        var sizeCalculators = {
            "CIRCLE":function(el) {
               var r = parseInt(el.attr("r"), 10);
                return [ r * 2, r * 2 ];
            },
            "ELLIPSE":function(el) {
               var rx = parseInt(el.attr("rx"), 10),
                   ry = parseInt(el.attr("ry"), 10);               
                return [ rx * 2, ry * 2 ];
            },
            "RECT":function(el) {
               var w = parseInt(el.attr("width"), 10),
                   h = parseInt(el.attr("height"), 10);
               return [ w, h ];
            }
        };

        jsPlumb.CurrentLibrary.getOffset = function(el) {
            el = $(el);
            var del = el[0], tn = del.tagName.toUpperCase();
            if (offsetCalculators[tn]) {
                var so = el.parent().offset();
                return offsetCalculators[tn](el, so);
            }
            else
                return el.offset();
        };

        jsPlumb.CurrentLibrary.getSize = function(el) {
            el = $(el);
            var del = el[0], tn = del.tagName.toUpperCase();
            if (sizeCalculators[tn]) {
                return sizeCalculators[tn](el);
            }
            else
                return [ el.outerWidth(), el.outerHeight() ];
        };




        jsPlumb.connect({source:circle1.node, target:circle2.node, anchor:"Center", connector:"Straight"});

        jsPlumb.connect({source:circle1.node, target:rect.node, anchors:["Center", "Top"], connector:"Straight"});    

        jsPlumb.connect({source:circle2.node, target:ellipse.node, anchor:"Center"});
         //raphael 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});
                        jsPlumb.repaint(this.node);
                    },
                    up = function () { };

        paper.set(circle1, circle2).drag(move, start, up);  });