jointjs Element

标准形状库中有很多现成的已经定义的元素直接可以用.可以一自己去创建一些自定义类joint.dia.Element.
关于新建的元素的一些属性可以在定义元素之后再次进行覆盖修改.
关于标准库创建图形元素的使用方法:

var rectangle = new joint.shapes.standard.Rectangle();
rectangle.resize(100, 100);
//关于resize的一些用法
//element.resize(width, height [, opt])
//opt是一个参数用来定义大小改变的方向
//resize来调节大小，可以选择性的调节大小。举个例子，如果在一个长方形rect上添加了一个新的元素文本框
//并且期望当调整元素大小时，矩形rect被调整，而文本大小保持不变，保持在矩形正中心。
//通过把<g class"scalable"/>添加到rect的makeup中
//并且将文本的元素设置<text ref-x=".5" ref-y=".5" ref="rect" />
rectangle.position(50, 10);
rectangle.attr('root/title', 'joint.shapes.standard.Rectangle');
rectangle.attr('label/text', 'Rectangle');
rect2.attr({label: {text: 'World!'}
});
rect2.attr('label', {text: 'World!'
});//也可以用这种形式写
rectangle.attr('body/fill', 'lightblue');
//官网给出
//root：SVGGElement,结点容器？？？？
//body：SVGRectElement,rect图形 的外形属性
//lable：SVGTextElement，body中的文本
//通过.attr来修改
rectangle.addTo(graph);

dia.element
一个图的元素模型
SVG的一些属性设置在arrt上,可以找到SVG属性的列表以及它们的描述.
每个dia.Element都定义了SVG标记，然后由dia.ElementView使用SVG的markup将元素呈现给paper

the joint.shapes.basic.Rect element (继承自joint.dia.Element)定义他的markup:
<g class="rotatable"><g class="scalable"><rect/></g><text/></g>
rotatable:可旋转     scalable:可拉伸change - generic event triggered for any change on the element - fn(element, opt)change:position - triggered when the element changes its position - fn(element, newPosition, opt)change:angle - triggered when the element gets rotated - fn(element, newAngle, opt)//旋转触发change:size - triggered when the element gets resized - fn(element, newSize, opt)//大小改变触发change:attrs - triggered when the element changes its attributes - fn(element, newAttrs, opt)//属性触发// Listening for changes of the position to a single element
element1.on('change:position', function(element1, position) {alert('element1 moved to ' + position.x + ',' + position.y);
});//在哪里在那个cell上（element1），发生什么（change:position），发生后做什么（function），可以得到什么参数（position）
// All elements events are also propagated to the graph.
graph.on('change:position', function(element, position) {console.log('Element ' + element.id + 'moved to ' + position.x + ',' + position.y);
});
// Using the option parameter and a custom attribute
graph.on('change:custom', function(element, custom, opt) {if (opt.consoleOutput) {console.log('Custom attribute value changed to "' + custom + '"');}
});//？？？？
element2.prop('custom', 'myValue', { consoleOutput: true });

jointjs Element相关推荐

JointJS入门实例01-在JOINTJS元素中使用HTML
1.1 简介很多时候,您可能希望在JointJS图表中使用HTML输入或其他HTML元素.本实例中使用的技术是创建一个自定义视图,用于呈现HTML并处理与HTML的交互.一种不同的方法可能是使用 ...
在JointJS元素中使用html
问题背景在工作中有个需求需要画一幅"树图",本想使用echarts进行绘制的.奈何echarts的label中不支持formatter html,即html文本的渲染.故为了使图 ...
JointJS入门实例01-补充第一篇在JOINTJS元素中使用HTML
1.1 简介很多时候,您可能希望在JointJS图表中使用HTML输入或其他HTML元素.本实例中使用的技术是创建一个自定义视图,用于呈现HTML并处理与HTML的交互.一种不同的方法可能是使用 f ...
JointJS：JavaScript 流程图绘制框架
目录 JointJS:JavaScript 流程图绘制框架 JointJS 简介 JointJS Hello world 前后端分离架构其他自动布局 Automatic layout 使用 HTM ...
解析HTML流程图,JointJS JavaScript流程图绘制框架解析
JointJS:JavaScript 流程图绘制框架最近调研了js画流程图的框架,最后选择了Joint.配合上 dagre 可以画出像模像样的流程图. JointJS 简介 JointJS 是一个开 ...
html控制图的宽,用JointJS做一个简单的功能控制图
继上一篇介绍了GoJS之后,继续研究JS的绘图工具,毕竟GoJS有些小贵.这次选择了JointJS,完全开源,它还有一个商业版本叫Raddit,功能更强大.不过就我的需求场景,开源的Joint就足够了 ...
jointJS系列之一：jointJS的的初步使用
一.jointJS简介 jointJS是一个基于svg的图形化工具库,在画布上画出支持拖动的svg图形,而且可以导出JSON,也能通过JSON配置导入直接生成图形. 可以基于jointJS开发出流程图 ...
JointJS中文文档
JointJS中文文档 JointJS是一款功能强大的图形可视化交互工具,可用来开发流程图,思维导图等复杂图形交互应用核心概念 paper和graph paper即画布,图形将在paper上绘制 g ...
vue使用jointJs,vue流程图、旅程图
vue使用jointJs,vue流程图.旅程图效果图安装使用组件中加入 script 创建画版实例化画布,把画布挂载到dom 添加元素自定义元素事件交互效果图安装 npm insta ...

jointjs Element

jointjs Element

jointjs Element相关推荐

最新文章

热门文章