成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

1.JointJs Paper

shleyZ / 2784人閱讀

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

關(guān)于JointJs的介紹，有一篇比較好JointJS介紹

第一個(gè)類(lèi)Paperjoint.dia.Paper 
屬性

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

下面添加SVG DOM節(jié)點(diǎn)

width paper的寬度

height paper的高度

origin paper原點(diǎn)的坐標(biāo)，默認(rèn){x:0,y:0}

gridSzie 默認(rèn)為1

model joint.dia.Graph object，根據(jù)MVC，該屬性對(duì)應(yīng)model,paper對(duì)應(yīng)view

perpendicularLinks 連接線(xiàn)是否正交，默認(rèn)為false

elementView 負(fù)責(zé)渲染graph ,默認(rèn)joint.dia.ElementView

linkView 負(fù)責(zé)渲染links,默認(rèn)joint.dia.LinkView

defaultLink 用戶(hù)動(dòng)態(tài)創(chuàng)建的link（比如：從一個(gè)port drag 一條線(xiàn)）,默認(rèn)為joint.dia.Link，也可以是一個(gè)返回值類(lèi)型為 joint.dia.Link函數(shù)function(cellView, magnet) {}

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

validateMagnet(cellView, magnet) magnet翻譯成中文就是磁石，在JointJs中它代表的是一個(gè)DOM元素，當(dāng)用戶(hù)點(diǎn)擊magnet時(shí)，這個(gè)函數(shù)判斷是否創(chuàng)建Link

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

linkConnectionPoint(linkView, view, magnet, reference)

這個(gè)函數(shù)允許用戶(hù)指定link在渲染時(shí)stick到元素的某個(gè)坐標(biāo)。這個(gè)函數(shù)返回一個(gè)點(diǎn){x,y}。當(dāng)然jointJS也給我們提供了一個(gè)強(qiáng)大的函數(shù)shapePerimeterConnectionPoint 
shapePerimeterConnectionPoint joint.util.shapePerimeterConnectionPoint(linkView, view, magnet, ref)
使用方式如下：


var paper = new joint.dia.Paper({
   ...
   linkConnectionPoint: joint.util.shapePerimeterConnectionPoint
   ...
})   



效果如下：

snapLinks 當(dāng)為true時(shí)，Link會(huì)尋找離它最近的元素進(jìn)行閉合

linkPinning 當(dāng)為true時(shí)，link可以終止于paper，也就是說(shuō)link可以連接于一個(gè)點(diǎn)，而不是element

markAvailable 當(dāng)用戶(hù)點(diǎn)擊magnet時(shí)，界面上顯示可以連接的magnet。為了突出可以連接的magnet，添加必要的css

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

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

async

embeddingMode 當(dāng)為true時(shí)，paper改變?yōu)閑mbed模式，具體說(shuō)：用戶(hù)可以將一個(gè)元素拖拽到另一個(gè)元素里面。在該模式下，所有的link和element會(huì)多一個(gè)z屬性，就行css中的陰影有一個(gè)z屬性表示層級(jí)。為了控制哪些元素可以embed，需要配置 validateEmbedding()?？傊@個(gè)屬性對(duì)于層級(jí)圖是必須的。

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49770.html

相關(guān)文章

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

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

    amuqiao 評(píng)論0 收藏0

  • 1.JointJs Paper

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

    rose 評(píng)論0 收藏0

  • 層疊上下文與z-index

    摘要：但是呢，是在的環(huán)境上下文中，因?yàn)榈膶蛹?jí)要比要高，所以的哪怕再大，實(shí)際上也依然會(huì)被給擋住的。無(wú)論其值有多小。 z-index是咱們之前相對(duì)比較常用的一個(gè)語(yǔ)法了，看起來(lái)比較簡(jiǎn)單的樣子，實(shí)際上還真不難，因?yàn)檫@東西跟之前講的vertical-align不一樣，這個(gè)比較符合咱們的認(rèn)知。 好了，不廢話(huà)，開(kāi)始咱們的正式話(huà)題。 首先呢？咱們先要了解一下層疊上下文（stack context）是什么呢，...

    suxier 評(píng)論0 收藏0

  • JointJS中文文檔

    摘要：中文文檔是一款功能強(qiáng)大的圖形可視化交互工具，可用來(lái)開(kāi)發(fā)流程圖，思維導(dǎo)圖等復(fù)雜圖形交互應(yīng)用核心概念和即畫(huà)布，圖形將在上繪制即圖形數(shù)據(jù)，可與進(jìn)行綁定，對(duì)的修改會(huì)即時(shí)反映到上一個(gè)可與多個(gè)綁定和視圖元素，是的基本元素，用來(lái)處理交互圖形元素，是的基本 JointJS中文文檔 JointJS是一款功能強(qiáng)大的圖形可視化交互工具，可用來(lái)開(kāi)發(fā)流程圖，思維導(dǎo)圖等復(fù)雜圖形交互應(yīng)用 核心概念 paper...

    sihai 評(píng)論0 收藏0

  • 使用 React Native 構(gòu)建 Facebook Paper 類(lèi)似的 UI

    摘要：我模仿的應(yīng)用構(gòu)建了一個(gè)開(kāi)閉卡片的輪播效果作為技術(shù)演示它使用了及其動(dòng)畫(huà)庫(kù)當(dāng)人們聽(tīng)到后第一反應(yīng)會(huì)覺(jué)得它運(yùn)行緩慢這是因?yàn)橐话闳藭?huì)去這樣解釋它允許你通過(guò)構(gòu)建你的應(yīng)用程序而人們會(huì)認(rèn)為瀏覽器中運(yùn)行的性能并不夠好但事實(shí)是它采用的全部都是原生界面元素但你通 我模仿 Facebook 的 Paper 應(yīng)用構(gòu)建了一個(gè)開(kāi)閉卡片的輪播效果作為技術(shù)演示.它使用了 React Native 及其動(dòng)畫(huà)庫(kù). 當(dāng)人們聽(tīng)...

    justjavac 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<