html控制图的宽,用JointJS做一个简单的功能控制图

继上一篇介绍了GoJS之后，继续研究JS的绘图工具，毕竟GoJS有些小贵。这次选择了JointJS，完全开源，它还有一个商业版本叫Raddit，功能更强大。不过就我的需求场景，开源的Joint就足够了。接下来，我们看看它是怎么使用的。

JointJS是基于Backbone开发的，所以使用Joint之前，要先引入Backbone的相关依赖，所以我们的HTML文件是这样的：

JointJS Sample

这里我都用CDN，也可以将相应的库载到本地，但需要注意的是JS的加载顺序不能改。接下来，我们写一个官方的HelloWorld：

window.οnlοad=function() {

var graph = new joint.dia.Graph; // 创建画板，所有图上的元素都在画板里

var paper = new joint.dia.Paper({ // 创建画板上的画布，画布是用来渲染画板

el: document.getElementById('myGraph'), // 指向HTML里ID为"myGraph"的元素

model: graph, // 指定画板

width: 600, // 画布宽600像素

height: 100, // 画布高100像素

gridSize: 1, // 画布上元素拖动时步进的像素，默认1，设的高方便对齐

background: { // 画布背景色

color: 'rgba(0, 0, 0, 0.1)'

},

});

// 创建一个矩形

var rect = new joint.shapes.standard.Rectangle();

rect.position(100, 30); // 矩形左上角的位置，x:100,y:30，单位像素

rect.resize(100, 40); // 矩形大小，宽100，高40，单位像素

rect.attr({

body: {

fill: 'blue' // 填充色

},

label: {

text: 'Hello', // 矩形上显示的文字

fill: 'white' // 文字颜色

}

});

rect.addTo(graph); // 将上面定义的矩形加入到画板中

var rect2 = rect.clone(); // 复制一个相同的矩形

rect2.translate(300, 0); // 将矩形在水平方向上向右移动300像素

rect2.attr('label/text', 'World!'); // 设置矩形2上的文字

rect2.addTo(graph); // 将矩形2加入到画板中

// 创建一条连线

var link = new joint.shapes.standard.Link();

link.source(rect); // 连线头为矩形1

link.target(rect2); // 连线尾为矩形2

link.addTo(graph); // 将上面定义的连线加入到画板中

}

从上例里，我们可以看出，使用JointJS开发主要的步骤就是创建画板、创建画布、创建图形，然后将图形置于画板中。上面的例子执行后会得到下面的图像。

HelloWorld!

JointJS中的图形主要有两类，一是”元素”(Element)，由构造函数创建。上例中的矩形就是JointJS库提供的标准元素，其构造函数为joint.shapes.standard.Rectangle。元素创建后，可以设置各种参数，比如位置，大小，风格等。JointJS提供了丰富的内置元素如矩形，圆形，椭圆等，可以参考API文档。同时，我们可以通过扩展joint.dia.Element类来自定义元素。

另一类图形是”连接”(Link)，用来将两个”元素”连起来，一般显示为一条连线。上例中的连线是通过JointJS库提供的标准构造函数joint.shapes.standard.