1.JointJs Paper

shleyZ 發布于2019-08-01 15:06 / 2772人閱讀

摘要：在該模式下，所有的和會多一個屬性，就行中的陰影有一個屬性表示層級。為了控制哪些元素可以，需要配置。如果允許被潛入到，返回默認所有元素都可以到其他元素中當設置為的時候，用戶將不能將移動到邊界之外。

關于JointJs的介紹，有一篇比較好JointJS介紹

第一個類Paperjoint.dia.Paper

屬性

el css選擇器，Paper將在該Css選擇的Container下畫SVG圖.例如:el="#paper",則在

下面添加SVG DOM節點

width paper的寬度

height paper的高度

origin paper原點的坐標，默認{x:0,y:0}

gridSzie 默認為1

model joint.dia.Graph object，根據MVC，該屬性對應model,paper對應view

perpendicularLinks 連接線是否正交，默認為false

elementView 負責渲染graph ,默認joint.dia.ElementView

linkView 負責渲染links,默認joint.dia.LinkView

defaultLink 用戶動態創建的link（比如：從一個port drag 一條線）,默認為joint.dia.Link，也可以是一個返回值類型為 joint.dia.Link函數function(cellView, magnet) {}

interactive 如果設置為false,則graph中的element和link將禁止操作

validateMagnet(cellView, magnet) magnet翻譯成中文就是磁石，在JointJs中它代表的是一個DOM元素，當用戶點擊magnet時，這個函數判斷是否創建Link

validateConnection(cellViewS, magnetS, cellViewT, magnetT, end, linkView)在source view/magnet (cellViewS/magnetS) and target view/magnet (cellViewT/magnetT)之間是否允許鏈接。

linkConnectionPoint(linkView, view, magnet, reference)

這個函數允許用戶指定link在渲染時stick到元素的某個坐標。這個函數返回一個點{x,y}。當然jointJS也給我們提供了一個強大的函數shapePerimeterConnectionPoint 
shapePerimeterConnectionPoint joint.util.shapePerimeterConnectionPoint(linkView, view, magnet, ref)
使用方式如下：
var paper = new joint.dia.Paper({
   ...
   linkConnectionPoint: joint.util.shapePerimeterConnectionPoint
   ...
})   

效果如下：

snapLinks 當為true時，Link會尋找離它最近的元素進行閉合

linkPinning 當為true時，link可以終止于paper，也就是說link可以連接于一個點，而不是element

markAvailable 當用戶點擊magnet時，界面上顯示可以連接的magnet。為了突出可以連接的magnet，添加必要的css

/* port styling */
.available-magnet {
    fill: yellow;
}

/* element styling */
.available-cell rect {
    stroke-dasharray: 5, 2;
}

async

embeddingMode 當為true時，paper改變為embed模式，具體說：用戶可以將一個元素拖拽到另一個元素里面。在該模式下，所有的link和element會多一個z屬性，就行css中的陰影有一個z屬性表示層級。為了控制哪些元素可以embed，需要配置 validateEmbedding()。總之這個屬性對于層級圖是必須的。

validateEmbedding(childView, parentView) 如果childView允許被潛入到parentView，返回true.默認所有元素都可以embed到其他元素中

restrictTranslate/function(elementView) 當設置為true的時候，用戶將不能將elemnt移動到paper邊界之外。默認為false。當然它最大的好處不是這個，當給該屬性配置一個函數時，你可以限制子元素不可以拖拽出父元素，比如：

restrictTranslate: function(elementView) {
    var parentId = elementView.model.get("parent");
    return parentId && this.model.getCell(parentId).getBBox();
}

云服務器 GPU云服務器 Paper

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

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

jointJS系列之一：jointJS的的初步使用

摘要：由于是基于的，因此對有一定的了解會對的理解和使用有較大幫助。由于是基于的，因此有視圖和模型的概念。掛載的元素關聯聲明的元素的概念，就是圖形顯示的主體，可以有各種不同的形狀，預設有常用的矩形橢圓平行四邊形等。一、jointJS簡介 jointJS是一個基于svg的圖形化工具庫，在畫布上畫出支持拖動的svg圖形，而且可以導出JSON，也能通過JSON配置導入直接生成圖形。可以基于joi...

amuqiao 2019-08-23 10:56 評論0 收藏0
1.JointJs Paper

摘要：在該模式下，所有的和會多一個屬性，就行中的陰影有一個屬性表示層級。為了控制哪些元素可以，需要配置。如果允許被潛入到，返回默認所有元素都可以到其他元素中當設置為的時候，用戶將不能將移動到邊界之外。關于JointJs的介紹，有一篇比較好JointJS介紹第一個類Paperjoint.dia.Paper 屬性 el css選擇器，Paper將在該Css選擇的Container下畫SV...

rose 2019-08-19 17:48 評論0 收藏0
層疊上下文與z-index

摘要：但是呢，是在的環境上下文中，因為的層級要比要高，所以的哪怕再大，實際上也依然會被給擋住的。無論其值有多小。 z-index是咱們之前相對比較常用的一個語法了，看起來比較簡單的樣子，實際上還真不難，因為這東西跟之前講的vertical-align不一樣，這個比較符合咱們的認知。好了，不廢話，開始咱們的正式話題。首先呢？咱們先要了解一下層疊上下文（stack context）是什么呢，...

suxier 2019-08-30 15:43 評論0 收藏0
JointJS中文文檔

摘要：中文文檔是一款功能強大的圖形可視化交互工具，可用來開發流程圖，思維導圖等復雜圖形交互應用核心概念和即畫布，圖形將在上繪制即圖形數據，可與進行綁定，對的修改會即時反映到上一個可與多個綁定和視圖元素，是的基本元素，用來處理交互圖形元素，是的基本 JointJS中文文檔 JointJS是一款功能強大的圖形可視化交互工具，可用來開發流程圖，思維導圖等復雜圖形交互應用核心概念 paper...

sihai 2019-08-23 15:05 評論0 收藏0
使用 React Native 構建 Facebook Paper 類似的 UI

摘要：我模仿的應用構建了一個開閉卡片的輪播效果作為技術演示它使用了及其動畫庫當人們聽到后第一反應會覺得它運行緩慢這是因為一般人會去這樣解釋它允許你通過構建你的應用程序而人們會認為瀏覽器中運行的性能并不夠好但事實是它采用的全部都是原生界面元素但你通我模仿 Facebook 的 Paper 應用構建了一個開閉卡片的輪播效果作為技術演示.它使用了 React Native 及其動畫庫. 當人們聽...

justjavac 2019-08-20 10:26 評論0 收藏0