Question

我正在尝试使用jsPlumb实现流程图编辑器，这是我第一次使用它。我有一个方形元素（也是可拖动的），当我尝试重新调整大小时，端点不会移动（参见1）。我在这里使用jsPlumb-2.0.7.js。

当我使用jquery.jsPlumb-1.4.1-all-min.js时，端点会随着元素的重新调整大小而移动。但是，编辑器中钻石形状元素的端点存在一些问题（参见2）。我通过将方形元素旋转45度来实现这种菱形元素。

以下是我如何使元素重新调整大小：

function makeResizable(classname){
    $(classname).resizable({
        resize : function(event, ui) {
            jsPlumb.repaint(ui.helper);
        }
    });
}

这是我的源端点：

var connectorPaintStyle = {
    lineWidth: 4,
    strokeStyle: "#61B7CF",
    joinstyle: "round",
    outlineColor: "white",
    outlineWidth: 2
},
connectorHoverStyle = {
    lineWidth: 4,
    strokeStyle: "#216477",
    outlineWidth: 2,
    outlineColor: "white"
},
endpointHoverStyle = {
    fillStyle: "#216477",
    strokeStyle: "#216477"
},
sourceEndpoint = {
        endpoint: "Dot",
        paintStyle: {
            strokeStyle: "#7AB02C",
            fillStyle: "transparent",
            radius: 7,
            lineWidth: 3
        },
        isSource: true,
        connector: [ "Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true } ],
        connectorStyle: connectorPaintStyle,
        hoverPaintStyle: endpointHoverStyle,
        connectorHoverStyle: connectorHoverStyle,
        maxConnections: -1,
        dragOptions: {},
        overlays: [
            [ "Label", {
                location: [0.5, 1.5],
                label: "Drag",
                cssClass: "endpointSourceLabel",
                visible:false
            } ]
        ]
    };

这是我的目标终点：

targetEndpoint = {
        endpoint: "Dot",
        paintStyle: { fillStyle: "#7AB02C", radius: 11 },
        hoverPaintStyle: endpointHoverStyle,
        maxConnections: -1,
        dropOptions: { hoverClass: "hover", activeClass: "active" },
        isTarget: true,
        overlays: [
            [ "Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible:false } ]
        ]
    }

我使用jsPlumb.addEndpoint（）方法添加端点。我寻找帮助但找不到合适的答案。谁能为这个问题提供解决方案？

Answer 1

我发布这个作为答案，因为它解决了我的问题！我使用了最新版本的jsPlumb-2.0.7.js并创建了一个jsPlumb实例。

var instance = jsPlumb.getInstance({/*Drag options and connection overlays*/});

然后我使用这个instance来使元素可拖动并可调整大小。

而且，我在可调整大小的函数中使用instance.repaint(ui.helper)而不是instance.revalidate(ui.helper)。然后它完美地运作了！

端点位置未在jsPlumb中更新调整大小

1 个答案: