端点位置调整

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

当我使用jquery.jsPlumb-1.4.1-全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（）方法添加端点。我搜索了帮助，但找不到合适的答案。任何人都可以提供这个问题的解决方案？

来源

2016-02-26 dilu_92

我继续我的工作中使用jquery.jsPlumb-1.4.1-ALL-min.js当决定因素是画面内拖解决了端点问题。 –

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

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

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

而且也，而是采用instance.repaint(ui.helper)我可调整大小的函数内使用instance.revalidate(ui.helper)。然后它完美的工作！

来源

2016-04-08 06:18:21

端点位置调整

回答

相关问题