带有 jsPlumb 的流程图答案

【问题标题】：Flowchart with jsPlumb带有 jsPlumb 的流程图
【发布时间】：2013-02-06 09:41:45
【问题描述】：

我正在尝试使用 jsPlumb 创建流程图。我有两个元素，我想用一条线连接它们。我想要一条线，但不是我现在拥有的一个大点。我已经尝试在任何地方设置点的半径，但它似乎不受影响并且保持在默认的 20 像素。我做错了什么？

<div id="start">Start</div>
<div id="msgtype">Lorem ipsum dolor sit amet</div>

jsPlumb.importDefaults({
    Endpoints : [ [ 'Dot', {radius:1} ], [ 'Dot', { radius:1 } ]]
});
var connectorPaintStyle = {
    lineWidth:4,
    fillStyle:'#333333',
    joinstyle:'round',
    outlineWidth:0,
    radius: 1,
}
var eleStart = jsPlumb.addEndpoint('start', {
    isSource:true,
    isTarget:false
});

var eleMsgtypeTop = jsPlumb.addEndpoint('msgtype', {
    isTarget:true,
    parameters:{
        endpoint:'dot',
        radius: 1
    },
    anchor: 'TopCenter',
    radius: 1,
    connectorStyle:connectorPaintStyle
});
jsPlumb.connect({ source:eleStart, 
        target:eleMsgtypeTop,
        connectorStyle:connectorPaintStyle,
        endpoint:[ 'Dot', { radius:1, hoverClass:'myEndpointHover' }],
        connectorStyle:connectorPaintStyle
});

制作这个：

JSFiddle Demo

【问题讨论】：

标签： javascript jquery flowchart jsplumb

【解决方案1】：

试试这个：http://jsfiddle.net/GT884/1/

 ;(function () {

window.jsPlumbDemo = {

    init: function () {

        jsPlumb.importDefaults({
            DragOptions: {
                cursor: "pointer",
                zIndex: 2000
            },
            HoverClass: "connector-hover"
        });

        var connectorStrokeColor = "rgba(50, 50, 200, 1)",
            connectorHighlightStrokeColor = "rgba(180, 180, 200, 1)",
            hoverPaintStyle = {
                strokeStyle: "#7ec3d9"
            };
        var connection1 = jsPlumb.connect({
            source: "start",
            target: "msgtype",
            connector: "Bezier",
            cssClass: "c1",
            endpoint: "Blank",
            endpointClass: "c1Endpoint",
            anchors: ["BottomCenter", [0.75, 0, 0, -1]],
            paintStyle: {
                lineWidth: 6,
                strokeStyle: "#a7b04b",
                outlineWidth: 1,
                outlineColor: "#666"
            },
            endpointStyle: {
                fillStyle: "#a7b04b"
            },
            hoverPaintStyle: hoverPaintStyle
        });

        // make all .window divs draggable
        jsPlumb.draggable(jsPlumb.getSelector(".window"));

    }
};
})();

jsPlumb.bind("ready", function () {

jsPlumb.init();

// chrome fix.
document.onselectstart = function () {
    return false;
};

// render mode
var resetRenderMode = function (desiredMode) {
    var newMode = jsPlumb.setRenderMode(desiredMode);
    $(".rmode").removeClass("selected");
    $(".rmode[mode='" + newMode + "']").addClass("selected");

    $(".rmode[mode='canvas']").attr("disabled", !jsPlumb.isCanvasAvailable());
    $(".rmode[mode='svg']").attr("disabled", !jsPlumb.isSVGAvailable());
    $(".rmode[mode='vml']").attr("disabled", !jsPlumb.isVMLAvailable());

    //var disableList = (newMode === jsPlumb.VML) ? ",.rmode[mode='svg']" : ".rmode[mode='vml']"; 
    //  $(disableList).attr("disabled", true);              
    jsPlumbDemo.init();
};

$(".rmode").bind("click", function () {
    var desiredMode = $(this).attr("mode");
    if (jsPlumbDemo.reset) jsPlumbDemo.reset();
    jsPlumb.reset();
    resetRenderMode(desiredMode);
});

// explanation div is draggable
$("#explanation,.renderMode").draggable();

resetRenderMode(jsPlumb.SVG);

});

【讨论】：

谢谢，但没有任何效果，而且线路似乎仍在自行循环，而不是直接到达目标端点。
如果您可以为它制作一个小提琴，这将对此有很大帮助：jsfiddle.net

【解决方案2】：

完整的最终解决方案是：

;(function () {
window.plumbify = {
    init: function () {
        jsPlumb.importDefaults({
            DragOptions: {
                cursor: 'pointer',
                zIndex: 2000
            },
            HoverClass: 'connector-hover'
        });

        var connectorStrokeColor = 'rgba(50, 50, 200, 1)',
            connectorHighlightStrokeColor = 'rgba(180, 180, 200, 1)',
            paintStyle = {
                lineWidth: 3,
                strokeStyle: '#a7b04b',
                outlineWidth: 1,
                outlineColor: '#666'
            },
            hoverPaintStyle = {
                strokeStyle: '#7ec3d9'
            };
        var connection1 = jsPlumb.connect({
            source: 'start',
            target: 'msgtype',
            connector: 'Bezier',
            cssClass: 'c1',
            endpoint: 'Blank',
            anchors: [[0.25, 1, 0, 0.5], [0.75, 0, 0, -0.5]],
            paintStyle: paintStyle,
            endpointStyle: {
                fillStyle: '#a7b04b'
            },
            overlays:[ 
                [ 'Arrow', { width:20, length:30, location:0.5, paintStyle: paintStyle } ], 
            ],
            hoverPaintStyle: hoverPaintStyle
        });

        // make all .window divs draggable
        jsPlumb.draggable(jsPlumb.getSelector('.window'));

    }
};
})();

jsPlumb.bind('ready', function () {
    jsPlumb.init();
    // chrome fix.
    document.onselectstart = function () {
        return false;
    };
    // render mode
    var resetRenderMode = function (desiredMode) {
        var newMode = jsPlumb.setRenderMode(desiredMode);
       plumbify.init();
    };
    resetRenderMode(jsPlumb.SVG);
});

导致：

【讨论】：

【解决方案3】：

    jsPlumb.addEndpoint(element.id,{
        ...
        paintStyle:{radius:1};
    });

【讨论】：