1.JointJs Paper

shleyZ 发布于2019-08-01 15:06 / 2687人阅读

摘要：在该模式下，所有的和会多一个属性，就行中的阴影有一个属性表示层级。为了控制哪些元素可以，需要配置。如果允许被潜入到，返回默认所有元素都可以到其他元素中当设置为的时候，用户将不能将移动到边界之外。

关于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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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