rappid学习笔记一

最新推荐文章于 2022-10-29 08:50:58 发布

weixin_30681121

最新推荐文章于 2022-10-29 08:50:58 发布

阅读量551

点赞数

文章标签： javascript json 数据结构与算法 ViewUI

原文链接：http://www.cnblogs.com/yuyuanhang/p/7086131.html

版权

这里面使用的学习资料是英文文档http://resources.jointjs.com/docs/jointjs/v1.1/joint.html

图形diagram

dia.attributes

属性定义了图形元素如何被渲染，所有的标准SVG样式都是可用的，另外jointjs定义了"special"属性，允许自己定义

fill：颜色填充，应该是默认使用渐变

filter：定义元素的可视效果，例如模糊与饱和度

magnet：没有弄清楚文档的意思

port：与magnet相关，也不是很懂，似乎magnet是与一个link相关，port就是将其关联起来的属性

ref：用作元素间的相对定位

refCx,refCy,refDx,refDy,refHeight,refRx,refRy,refWidth,refX,refX2,refY,refY2：都是用于相对定位的属性，但是还没有搞懂具体区别

sourceMarker：适用于path子元素，在路径开始处绘制一个SVG元素，元素根据路径方向自动旋转

stroke：与fill属性相同

style：对元素设置CSS格式

targetMarket：与sourceMarker相同，但是是在路径末端绘制SVG元素，绘图坐标系旋转180度(不是很能理解这个)

text：适用于text子元素，能够根据不同方法设置多行文本

textPath：适用于text子元素，似乎是文本按照该路径进行移动

textWrap：适用于text子元素，似乎比text更复杂一些，可以自动包装适应边框，相对定位等

vertextMarket：同sourceMarket相同，区别在于在每个顶点绘制SVG元素

xAlignment：在x维度的居中(alignment 校对)

yAlignment：同上

dia.Cell

图标单元格的基础模型(并不清楚单元格到底是什么...)

define：定义一个新的单元格类

dia.CellView

用来渲染单元格

prototype.highlight：突出显示单元格视图

prototype.unhighlight：移除突出显示设定

dia.Element

图元素模型，继承自joint.dia.cell类，拥有额外的属性和函数，这些属性可以分为三类

geometry：包括元素的坐标，旋转角度和长度等信息

presetation：元素的SVG属性

nesting：与其他元素之间的关系

events

change - generic event triggered for any change on the element
change:position - triggered when the element changes its position
change:angle - triggered when the element gets rotated
change:size - triggered when the element gets resized
change:attrs - triggered when the element changes its attributes
change:embeds - triggered when other cells were embedded into the element
change:parent - triggered when the element got embedded into another element
change:z - triggered when the element is moved in the z-level (toFront and toBack)
transition:start - triggered when a transition starts.
transition:end - triggered when a transiton ends.

ports

不是很懂这个端口到底是什么，不过这部分很重要，留待用到的时候再弄清楚

dia.Graph

类似backbone中模型与集合的关系，图是用于保存所有单元格的模型，单元格集合被保存在cells属性中

event

change - generic event triggered for any change in the graph
add - triggered when a new cell is added to the graph
remove - triggered when a cell is removed from the graph

JSON：不懂是做什么的

prototype.addCell，prototype.addCells：添加单元格

prototype.bfs：使用广度优先算法遍历整个图

prototype.clear：将图中的单元格全部清除

prototype.cloneCells：复制所有的单元格，但是似乎返回的对象比较奇怪

prototype.cloneSubgraph：复制整张图

prototype.dfs：使用深度优先算法遍历整张图

prototype.disconnectLinks：解除图中元素之间的关系

prototype.findModelsFromPoint：在图中的某一个点查找元素(这里面的点不清楚是什么意思，单元格？)

prototype.findModels.Area：在图中的某个区域查找元素

prototype.findModelsUnderElement：元素之间拥有从属关系，似乎这个函数是发现某个元素下的元素

prototype.fromJSON：从一个JSON对象加载图

prototype.getBBox：返回围绕给定单元格的边界框

prototype.getCell：从图得到一个单元格

prototype.getCells：得到图中所有的单元格

prototype.getCommonAncestor：返回所用单元格的共同的祖先(?这里不知道怎么解释)

prototype.getConnectedLinks：获取元素的所有相关连接，可以根据连接的出入关系返回想要的部分

prototype.getElements：得到图中的所有元素

prototype.getFirstCell：获得图中第一个单元格，这里的第一个单元格的意思是最底层的

prototype.getLastCell：同上面类似，这里是最上层的

prototype.getLinks：获得图中的所有连接

prototype.getNeighbors：获得图中所有与该元素连接的元素

prototype.getPredecessors：返回元素的所有前辈的数组(?同样这个前辈也不知道是个什么鬼)

prototype.getSinks：返回图中的叶子节点

prototype.getSources：返回图中的所有根节点

prototype.getSubgraph：返回一个单元格数组，所有和传进去的单元格有关系的单元格都会被加进该数组

prototype.getSuccessors：返回元素的所有后续元素的数组

用于判断的函数：isNeighbor，isPredecessor，isSink，isSource，isSuccessor

用于删除的函数：removeLinks，removeCells

prototype.resetCells：重置图中的单元格，一次性批量更新(但是不知道怎么个更新法)

prototype.search：同样是遍历整张图，似乎是将dfs和bfs包装一下

prototype.toJSON：将图转变成JSON对象？

prototype.translate：似乎是翻转图中所有的单元格

dia.Link

表示图中连接的基本模型，同样是从dia.Cell继承，拥有额外的属性和函数(这里似乎感觉Cell是所有图形的基类，是一个抽象类。不知道对不对)。对于连接有两个重要的属性，就是连接的两端。

events

change - generic event triggered for any change on the link
change:source - triggered when the link changes its source
change:target - triggered when the link changes its target
change:attrs - triggered when the link changes its attributes
change:smooth - triggered when the link toggled interpolation
change:manhattan - triggered when the link toggled orthogonal routing
change:vertices - triggered when the link changes its vertices array
change:z - triggered when the link is moved in the z-level (toFront and toBack)
transition:start - triggered when a transition starts.
transition:end - triggered when a transiton ends.

addTo：将连接加到图中

attr：类似于element中的attr方法，是用来设置css样式的

clone：新实例

disconnct：删除两点间的连接

findView：查找连接的视图

getAncestor：返回连接的祖先，同样不清楚这个祖先是什么

getSourceElement：找到连接的开始元素

getTargetElement：找到连接的结束元素

getTransitions：并不知道这个transition是什么

hasLoop：查看一个连接是否是一个循环连接，这是什么？一个闭环？

用于判断的函数：isElement，isEmbeddedIn，isLink

label：添加属性来进行索引？连接可以有多个标签

presentation：连接的形状由顶点，连接器和路由器决定

prop：设置自定义属性

用于删除的函数：remove，removeAttr

reparent：自动查找、设置连接的最佳父元素。当父元素移动时，连接和定点也跟着移动

scale：进行缩放

stopTransitions：停止运行的变换

toBack：应该是移动连接到最底层

toFront：移动到最上层

toJSON：返回一个JSON格式

transtition：在一段时间内改变连接的属性

translate：对线段进行转换

dia.LinkView

对线段进行渲染，这部分用到再进行学习

dia.Paper

是dia.graph类的视图，继承自backbone视图，保证关联的graph在有单元格加入时会自动渲染

events

cell:pointerdown - triggered when a pointer is pressed on a cell. Takes cellView, evt, x and y as arguments.
cell:pointermove - triggered when a pointer is moved on a paper and cell:pointerdown was previously handled. Takes cellView, evt, x and y as arguments.
cell:pointerup - triggered when a pointer is released on a paper and cell:pointerdown was previously handled. Takes cellView and, evt as arguments.
cell:pointerdblclick - triggered when the user double-clicks a cell. Takes cellView, evt, x and y as arguments.
cell:pointerclick - triggered when the user clicks a cell. Takes cellView, evt, x and y as arguments.
cell:mouseover - triggered when the user enters the cellView or its child element. Takes cellView and evt as arguments.
cell:mouseout - triggered when the user leaves the cellView or its child element. Takes cellView and evt as arguments.
cell:mouseenter - triggered when the user enters the cell view area. Takes cellView and evt as arguments.
cell:mouseleave - triggered when the user leaves the cell view area. Takes cellView and evt as arguments.
link:mouseenter - triggered when the user enters the link view area. Takes cellView and evt as arguments.
link:mouseleave - triggered when the user leaves the link view area. Takes cellView and evt as arguments.
element:mouseenter - triggered when the user enters the element view area. Takes cellView and evt as arguments.
element:mouseleave - triggered when the user leaves the element view area. Takes cellView and evt as arguments.
blank:pointerdown - triggered when a pointer is pressed on a blank area on the paper. Takes evt, x and y as arguments.
blank:pointerdblclick - triggered when the user double-clicks a blank area on the paper. Takes evt, x and y as arguments.
blank:pointerclick - triggered when the user clicks a blank area on the paper. Takes evt, x and y as arguments.
cell:mousewheel - triggered when the user turns their mousewheel while the cursor is over a cell in the paper. Takes cellView, evt, x, y, delta as arguments.
blank:mousewheel - triggered when the user turns their mousewheel while the cursor is over the blank area of the paper. Takes evt, x, y, delta as arguments.
cell:contextmenu - triggered when the user right-clicks a cell in the paper. Takes cellView, evt, x and y as arguments.
blank:contextmenu - triggered when the user right-clicks a blank area in the paper. Takes evt, x and y as arguments.
render:done - triggered when the paper has finished rendering all the cell views in case async rendering is enabled.
cell:highlight - triggered when highlight() method is called on either an element or a link. Note that this method is also called automatically when the user is reconnecting a link and the connection is valid (validateConnection() returns true) or if embeddingMode is enabled on the paper and the dragging element is above another element it could be dropped into (validateEmbedding() returns true). The handler for this event has the following signature: function(cellView, el). The handler defaults to function(cellView, el) { V(el).addClass('highlighted')}. In other words, the 'higlighted' CSS class is added and so you can style the highlighted element in CSS. If you want to use a different method for highlighting cells, call paper.off('cell:highlight') first to unregister the default handler and then paper.on('cell:highlight', myHandler)to register your own.
cell:unhighlight - triggered when unhighlight() method is called on either an element or a link. See above the comments for cell:highlightevent for further details.
link:connect - triggered when a link is connected to a cell. Takes evt, cellView, magnet, arrowhead as arguments.
link:disconnect - triggered when a link is disconnected from a cell. Takes evt, cellView, magnet, arrowhead as arguments.