端點位置調整

我試圖實現使用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

端點位置調整

回答

相關問題