JointJS入门
1.JointJS介绍
使用JointJS可以方便在任何最新浏览器上创建图表的工具。JointJS使用Backbone的MVC库构建，如果熟悉Backbone就很容易上手。JointJS依赖
jQuery, Underscore, Backbone 和SVG
。
元素图形结构使用连线链接。在JointJS中，一个图表就是一个
joint.dia.Graph
的模型实例，这种模型包含其子元素模型（图元、连线）。
图像模型必须依赖
joint.dia.Paper
，这样才能显示对应的图像。
<%@ page language= "java" contentType ="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> ${title }</title >
<link rel="stylesheet" type="text/css" href=" ${path}/uires/jointjs/joint.all.css" />
<style>
#paper {
width: 600px ;
height: 300px ;
border: 1px solid gray ;
}
</style>
</head>
<body>
<div id= "paper"></div >
<script type="text/javascript" src="${path }/uires/jointjs/joint.js" ></script>
<script type="text/javascript" >
jQuery( function($){
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $( '#paper'),
width: 600,
height: 200,
model: graph
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: {
rect: { fill: 'blue' },
text: { text: 'my box', fill: 'white' }
}
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
});
</script>
</body>
</html>
如前所述，JointJS是依赖于Backbone MVC。在这里，我们可以试一下Backbone的主要功能，比如在图像模型中，监听画布中所有元素的所有事件（这里不会包含paper对象的）。
graph.on(
'all'
,
function
(eventName, cell) {
console.log(arguments);
});
也可以在一个特定的对象上，监听特定的事件。
rect.on(
'change:position'
,
function
(element) {
console.log(element.id,
':'
, element.get(
'position'
));
});
3.元素样式
在JointJS中，只有标准的SVG元素可以控制，为了设置元素的样式，你必须了解每个图元的SVG DOM结构。比如正方形
joint.shapes.basic.Rect
图元机构如下，
<g class="element basic Rect">
<g class="rotatable">
<g class="scalable">
<rect />
</g>
<text />
</g>
</g>
知道这些后，可以像给HTML的DOM元素设置样式一样给SVG的DOM元素设置样式，但两者还是有区别的。如果对SVG比较陌生，可以访问：
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
，如果使用引用的外部样式，所有的样式都会有相同的风格。更好的方法是用元素对象joint.dia.Element的"attr"属性给元素设置样式。
rect.attr({
rect: { fill: '#2C3E50', rx: 5, ry: 5, 'stroke-width': 2, stroke: 'black' },
text: {
text: 'my label', fill: '#3498DB',
'font-size': 18, 'font-weight': 'bold', 'font-variant': 'small-caps', 'text-transform': 'capitalize'
}
});
正如上面所见，element.attr()的方法接受一个对象类型的参数，对象的Key是和SVG-DOM元素的CSS选择器。可以根据结构使用负责的选择器，比如：
'.section2 .port1 text
。
4.连线样式
连线样式和图元的样式类似，同样需要了解连线的SVG-DOM结构。可以使用外部样式。可以使用
joint.dia.Link
的attr方法。SVG-DOM结构如下。
<path class="connection"/> <path class="marker-source"/> <path class="marker-target"/> <path class="connection-wrap"/> <g class="labels" /> <g class="marker-vertices"/> <g class="marker-arrowheads"/> <g class="link-tools" />
如下示例：
link.attr({
'.connection': { stroke: 'blue' },
'.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' },
'.marker-target': { fill: 'yellow', d: 'M 10 0 L 0 5 L 10 10 z' }
});
很简单的设置连线的点。
link.set('vertices', [{ x: 300, y: 60 }, { x: 400, y: 60 }, { x: 400, y: 20 }])
设置连线的折点是平滑类型。
link.set('smooth', true)
5.创建自定义元素
JointJS已经提供了许多常用的基础图元
joint.shapes.basic.Rect
、
joint.shapes.basic.Circle
、
joint.shapes.basic.Text
和
joint.shapes.basic.Image
。此外，JointJS的插件也提供了图元和连线。尽管如此，你也希望使用自己创建的图元。
如果你了解SVG元素方面的知识就可以很方便的创建一个图元的形状。SVG方面参见：
https://developer.mozilla.org/en-US/docs/Web/SVG/Element
。
多数情况下，自定义元素是通过多个SVG节点联合构建而成的。因此确定一个元素相对于另一个元素的位置是非常 重要的。比如很简单的一个情况，比如有一个矩形和一个文本，想让文本一直在文本的中间位置。但是SVG没有提供这样的方法去设置。JointJS引用了一种特殊的属性来帮助定位元素之间的位置（参见：
http://jointjs.com/api#SpecialAttributes
）。举例看一下
joint.shapes.basic.Rect是如何定义的。
joint.shapes.basic.Rect = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',
defaults: joint.util.deepSupplement({
type: 'basic.Rect',
attrs: {
'rect': { fill: 'white', stroke: 'black', 'follow-scale': true, width: 80, height: 40 },
'text': { 'font-size': 14, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle' }
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
如上所示，SVG的DOM元素，存储了相应的属性标识，有两个重要属性组构建了
joint.shapes.basic.Rect
元素，第一个是"
rotatable
"，在这个组里面的元素如果调用的joint.dia.Element.rotate() 方法，可以使其旋转。第二个是"
scalable
"，如果该组中元素调用了 joint.dia.Element.resize() 方法，将有“可计算”的属性。
所有的"定位"和"展现样式"的属性，都存储在了"
attrs
"属性中。注意这些特殊的属性：
ref-x、ref-y、 ref、 x-alignment、y-alignment。ref值为选择器，用来定义ref-x和ref-y位置相对的元素。