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

資訊專欄INFORMATION COLUMN

1.JointJs Paper

rose / 3299人閱讀

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

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

第一個類Paperjoint.dia.Paper 
屬性

el css選擇器，Paper將在該Css選擇的Container下畫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，該屬性對應(yīng)model,paper對應(yīng)view

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

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

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

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

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

validateMagnet(cellView, magnet) magnet翻譯成中文就是磁石，在JointJs中它代表的是一個DOM元素，當(dāng)用戶點(diǎn)擊magnet時(shí)，這個函數(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)

這個函數(shù)允許用戶指定link在渲染時(shí)stick到元素的某個坐標(biāo)。這個函數(shù)返回一個點(diǎn){x,y}。當(dāng)然jointJS也給我們提供了一個強(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會尋找離它最近的元素進(jìn)行閉合

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

markAvailable 當(dāng)用戶點(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模式，具體說：用戶可以將一個元素拖拽到另一個元素里面。在該模式下，所有的link和element會多一個z屬性，就行css中的陰影有一個z屬性表示層級。為了控制哪些元素可以embed，需要配置 validateEmbedding()?？傊@個屬性對于層級圖是必須的。

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

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

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

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

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

相關(guān)文章

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

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

    amuqiao 評論0 收藏0

  • 1.JointJs Paper

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

    shleyZ 評論0 收藏0

  • 層疊上下文與z-index

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

    suxier 評論0 收藏0

  • JointJS中文文檔

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

    sihai 評論0 收藏0

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

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

    justjavac 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<