jsPlumb（3）-基本概念

tulayang 發布于2019-08-21 10:42 / 3483人閱讀

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

介紹

jsPlumb是用來連接元素的，所以核心是Connection，其中又分為以下四個概念：

Anchor 一個和某個相關元素的位置。你不能創建它們，非可視化，只有邏輯上的position。更多信息，訪問 this page

Endpoint Connection的可視的一個端點，你可以創建和連接它們，當然，首先你得使它們能拖放。或者通過程序上jsPlumb.connect(...)來創建和連接。更多信息，請訪問 the page

Connector 可視化的，連接兩個元素的線。有四種類型：貝塞爾曲線、直線、流程圖、狀態機。你不能和它們交互，你可以修改它們的定義。更多信息， this page

Overlay 一個UI控件，用來裝飾Connector，如Label、Arrow等。

一個Connection由兩個Endpoint、一個Connector，Overlay可有可無。每個Endpoint有一個關聯的Anchor。

jsPlumb的公共API只有Connection和Endpoint，創建和配置。但是你需要熟悉其內部的Anchor, Connector and Overlay的概念。

Connector, Endpoint, Anchor & Overlay的定義

當你定義一個Connector, Endpoint, Anchor 或 Overlay的時候，你就需要定義，如：

jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:"Rectangle"
});

jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:[ "Rectangle", { 
      cssClass:"myEndpoint", 
      width:30, 
      height:10 
  }]
});

var common = {
    cssClass    :   "myCssClass",
    hoverClass  :   "myHoverClass"
};
jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:[ "Rectangle", { width:30, height:10 }, common ]
});

var common = {
    cssClass:"myCssClass"
};
jsPlumb.connect({
  source:"someDiv",
  target:"someOtherDiv",
  anchor:[ "Continuous", { faces:["top","bottom"] }],
  endpoint:[ "Dot", { radius:5, hoverClass:"myEndpointHover" }, common ],
  connector:[ "Bezier", { curviness:100 }, common ],
  overlays: [
        [ "Arrow", { foldback:0.2 }, common ],
        [ "Label", { cssClass:"labelClass" } ]  
    ]
});

GPU云服務器云服務器基本概念短信產品基本概念機器學習基本概念超融合架構基本概念

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

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

jsPlumb（1） - 開始使用

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

LoftySoul 2019-08-21 10:42 評論0 收藏0
jsPlumb（2）-配置

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

tracy 2019-08-14 12:43 評論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
jsplumb+dragable+vue(一)

摘要：基于的，支持拖拽生成節點，節點雙擊展示更多信息，節點連線，刪除節點，刪除連線，重繪連接圖，當前頁面刷新連接圖，根據畫連接圖等功能本章主要講拖拽生成節點獲取鏈接圖的信息引入需要的文件因為要用所以引入了畫連接圖用因為用的所以這樣引入拖基于vue的jsplumb，支持拖拽生成節點，節點雙擊展示更多信息，節點連線，刪除節點，刪除連線，重繪連接圖，當前頁面刷新連接圖，根據json畫連接圖等功能...

Imfan 2019-08-02 16:03 評論0 收藏0