jsPlumb（2）-配置

tracy 發布于2019-08-14 12:43 / 3639人閱讀

摘要：感受最容易最直觀是重寫的默認配置。有效健，初始值如下注意的是。每條默認設置的解釋對于那些沒有聲明的，對的和也適用。所有的和的給默認使用是否可通過鼠標分離當被請求卻不存在時是否報錯默認的遮罩可通過配置配置是否可以連接的定義的和默認所有的通過

感受jsPlumb最容易最直觀是重寫jsPlumb的默認配置。如果你沒這么做，你不得不每次調用都得重寫這些值。connect和addEndpoint的每個參數都和jsPlumb的默認值有關。

默認設置存儲在jsPlumb.Defaults，是個javascript對象。有效健，初始值如下：

Anchor : "BottomCenter",
Anchors : [ null, null ],
ConnectionsDetachable   : true,
ConnectionOverlays  : [],
Connector : "Bezier",
Container : null,
DoNotThrowErrors  : false,
DragOptions : { },
DropOptions : { },
Endpoint : "Dot",
Endpoints : [ null, null ],
EndpointOverlays : [ ],
EndpointStyle : { fillStyle : "#456" },
EndpointStyles : [ null, null ],
EndpointHoverStyle : null,
EndpointHoverStyles : [ null, null ],
HoverPaintStyle : null,
LabelStyle : { color : "black" },
LogEnabled : false,
Overlays : [ ],
MaxConnections : 1,
PaintStyle : { lineWidth : 8, strokeStyle : "#456" },
ReattachConnections : false,
RenderMode : "svg",
Scope : "jsPlumb_DefaultScope"

注意：EndpointHoverStyle 的fillStyle是null
。也就是說jsPlumb使用來自Connector的hover style的strokeStyle來填充Endpoint。

EndpointStyle和EndpointStyles你都可以定制，你可以讓每個連接的Endpoint都不一樣。Endpoint和Endpoints也一樣。jsPlumb會先檢查用戶的Endpoint和EndpointStyle數組，然后再檢查默認的。

你可以通過importDefaults方法覆蓋默認值：

jsPlumb.importDefaults({
  PaintStyle : {
    lineWidth:13,
    strokeStyle: "rgba(200,0,0,0.5)"
  },
  DragOptions : { cursor: "crosshair" },
  Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
  EndpointStyles : [{ fillStyle:"#225588" }, { fillStyle:"#558822" }]
});

加載并執行這段代碼后，就會得到效果。

每條默認設置的解釋

Anchor 對于那些沒有聲明Anchor的Endpoint，對Connection的source和target也適用。

Anchors 所有Connection的source和target的Anchors

Connector 給默認Connector使用

ConnectionsDetachable Connections是否可通過鼠標分離

Container

DoNotThrowErrors 當Anchor, Endpoint or Connector被請求卻不存在時是否報錯

ConnectionOverlays 默認Connection的遮罩

DragOptions 可通過jsPlumb.draggable配置

DropOptions 配置Endpoint是否可以drop連接

Endpoint Endpoint的定義

Endpoints jsPlumb.connect的source 和 target

EndpointOverlays 默認所有的Overlays

EndpointStyle

EndpointStyles

EndpointHoverStyle

EndpointHoverStyles

HoverPaintStyle

LabelStyle

LogEnabled

Overlays

MaxConnections

PaintStyle

ReattachConnections

RenderMode

Scope

jsPlumb.getInstance

通過 jsPlumb.getInstance

jsPlumb.getInstance({
  PaintStyle : {
    lineWidth:13,
    strokeStyle: "rgba(200,0,0,100)"
  },
  DragOptions : { cursor: "crosshair" },
  Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
  EndpointStyles : [
    { fillStyle:"#225588" }, 
    { fillStyle:"#558822" }
  ]
});

GPU云服務器云服務器 jsplumb jsplumb庫使用服務器配置2個ip 200萬左右機房hp服務器配置清單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/64665.html

jsPlumb（1） - 開始使用

摘要：社區版本為開發者在他們的網頁上提供可視化的元素連接。在現代的瀏覽器使用，在和以下版本使用。建議用戶自己設置。到目前為止，一個在每個終點都有，在中間有一個標簽，添加四個元素，實際添加的元素取決于渲染器使用的是還是。 jsPlumb jsPlumb社區版本為開發者在他們的網頁上提供可視化的元素連接。在現代的瀏覽器使用SVG，在IE8和以下版本使用VML。 jsPlumb沒有額外的依賴。 ...

LoftySoul 2019-08-21 10:42 評論0 收藏0
jsPlumb（3）-基本概念

摘要：介紹是用來連接元素的，所以核心是，其中又分為以下四個概念一個和某個相關元素的位置。有四種類型貝塞爾曲線直線流程圖狀態機。一個由兩個一個，可有可無。每個有一個關聯的。的公共只有和，創建和配置。但是你需要熟悉其內部的的概念。介紹 jsPlumb是用來連接元素的，所以核心是Connection，其中又分為以下四個概念： Anchor 一個和某個相關元素的位置。你不能創建它們，非可視化，只...

tulayang 2019-08-21 10:42 評論0 收藏0
在vue項目中jsPlumb制作流程圖，拖拽復制使用 jquery 和 jquery UI

摘要：用做流程圖的項目，有一項功能是要從左側的菜單欄拖動項目到右側的面板上。參考了一些博客和，決定使用中的和功能。這是早期用jsPlumb做流程圖走的一個坑，使用jquery來制作流程圖，最近換成了用go.js來制作流程圖后，可以使用go.js中自帶的方法來制作拖拽效果，就不再使用jquery了。用jsPlumb做流程圖的項目，有一項功能是要從左側的菜單欄拖動項目到右側的面板上。參考了一...

marser 2019-08-23 13:53 評論0 收藏0
記一次繪圖框架技術選型: jsPlumb VS mxGraph

摘要：公司項目需要用到繪圖框架，繪圖部分以前是另一位同事負責，用的是框架。基于以上提及到的種種原因，上年年末我做起了技術調研，希望能找到一個合適我們項目的繪圖框架。兼容性問題項目對瀏覽器兼容性比較寬松，瀏覽器兼容性問題不在考慮范圍之內。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

longmon 2019-08-23 15:36 評論0 收藏0
記一次繪圖框架技術選型: jsPlumb VS mxGraph

摘要：公司項目需要用到繪圖框架，繪圖部分以前是另一位同事負責，用的是框架。基于以上提及到的種種原因，上年年末我做起了技術調研，希望能找到一個合適我們項目的繪圖框架。兼容性問題項目對瀏覽器兼容性比較寬松，瀏覽器兼容性問題不在考慮范圍之內。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

channg 2019-08-02 14:23 評論0 收藏0