1.JointJs Paper

倖福魔咒の 提交于 2020-04-07 10:16:38

关于JointJs的介绍,有一篇比较好JointJS介绍

第一个类Paperjoint.dia.Paper

属性

  • el css选择器,Paper将在该Css选择的Container下画SVG图.例如:el='#paper',则在
    <div id='paper'></div>下面添加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();
}

本文转载于:1.JointJs Paper

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!