jointjs使用总结

由于项目需要接触了jointjs，不得不说这玩意儿很强大，但是全英文的文档也让人很头疼，下面就阐述一下我对于jointjs的粗浅认识吧。

1、首先演示一下如何创建一个基础图形。
要使用jointjs首先要引入相应的js和css文件，还有一些依赖。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" /><title>Title</title><link rel="stylesheet" type="text/css" href="css/joint.css"><script src="js/lib/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script><script src="js/lib/lodash.js"></script><script src="js/lib/backbone-min.js"></script><script src="js/lib/joint.min.js"></script><style>#wrapper {margin:10px auto;background:#fafafa;}</style>
</head><body><!--准备一个容器存放画板--><div id="wrapper"></div>
</body>
</html>

定义画板和画布

var graph = new joint.dia.Graph;        //生成画板
var paper = new joint.dia.Paper({       //生成画布el: $('#wrapper'),width: 800,height: 500,model: graph,gridSize: 1
});

接下来画一个简单的矩形

var cell = new joint.shapes.basic.Rect({position: {x: 100,y: 100},size: {width: 100,height: 100},attrs: {//边框，填充，边框宽度，样式rect: {fill: 'pink','stroke': 'black','stroke-width': 2,'stroke-dasharray': 0},text: {//字体内容，颜色，粗细，大小text: '矩形',fill: 'black','font-weight': 'normal','font-size': 20}}
});
//把矩形放到画板中
graph.addCells([cell]);

2、改变这个矩形的一些属性。
改变位置

cell.position(20, 20);
console.log(cell.get('position')); //{x: 20, y: 20}

改变大小

cell.size(50, 50);
console.log(cell.get('size')); //{width: 50, height: 50}

改变文本

cell.attr('text/text', '啦啦啦');
cell.attr('text/fill', 'white');
cell.attr('text/font-weight', 'bold');
cell.attr('text/font-size', 14);

改变图形

cell.attr('rect/fill', '#234');
cell.attr('rect/stroke', 'white');
cell.attr('rect/stroke-width', 3);
cell.attr('rect/stroke-dasharray', '2,5');

3、其他操作
偏移

cell.translate(10, 10)

拉伸

cell.resize(120, 120)

旋转

cell.rotate(45)

改变z-index

cell.toFront()
cell.toBack()

组合图形

cell.embed(cell1) //当移动cell时，cell1也会跟着移动
cell.unembed(cell1)

复制图形

cell.clone()

删除图形

cell.remove()

改变画布背景

paper.drawBackground({color:color});

改变画布大小

paper.setDimensions(width, height);

jointjs使用总结相关推荐

html控制图的宽,用JointJS做一个简单的功能控制图
继上一篇介绍了GoJS之后,继续研究JS的绘图工具,毕竟GoJS有些小贵.这次选择了JointJS,完全开源,它还有一个商业版本叫Raddit,功能更强大.不过就我的需求场景,开源的Joint就足够了 ...
JointJS绘制流程图
摘要: JointJS是一个javascript图表库.你可以使用它制作静态或者动态的图表.关系表.流程图. 效果图:
javascript绘制静态或者动态的图表、关系表、流程图-JointJS
JointJS现代HTML 5是一个JavaScript库与图表和图形可视化和交互. 它可以被用来创建静态图,或者更重要的是,完全交互式绘图工具和应用程序构建器. JointJS可用来方便地创建各种可 ...
jointJS系列之一：jointJS的的初步使用
一.jointJS简介 jointJS是一个基于svg的图形化工具库,在画布上画出支持拖动的svg图形,而且可以导出JSON,也能通过JSON配置导入直接生成图形. 可以基于jointJS开发出流程图 ...
jointjs与rapheal简单说明
Rapheal相对比较底层,如果自己开发,工作量大,好多东西要自己写,成本要高. jointjs已经把基础东西都做好,例如拖动,单击等事件已经非常好,而且元素是以组件形式自定义,非常方便.易上手,开发 ...
JointJS：可与Visio相媲美的开源在线制图工具
http://www.iteye.com/news/28111 JointJS是一个开源的.基于JavaScript的图表库,可以用来创建静态图表.完全可交互的图表以及应用程序.采用Mozilla P ...
JointJS+新的MindMap应用程序
JointJS+新的MindMap应用程序添加了一个新的应用程序:MindMap-MindMap应用程序可以帮助您的团队或最终客户直观地组织信息,提出新想法并进行协作.所有必要的工具(例如命令管理器 ...
JointJS几个实用功能的简单实现
JointJS是以SVG为基础,依赖Backbone.jQuery和Lodash开发的一款实现流程图绘制的开源前端框架,属于比较冷门的技术,网上文档甚少,基本上只能靠英文官网学习,以下是某大神汇总的部 ...
流程图+BPMN+脑图 JointJS++ 3.6.3 Crack
一个库,‍ 无限的UI选择,直接在您的应用程序中享受交互式流程图.BPMN 和其他图表工作室.利用我们的模板化应用程序,将开发时间缩短至几天. 经过十多年和数百万行代码的编写,我们推出了一组随时可用的 ...
JointJS中文文档
JointJS中文文档 JointJS是一款功能强大的图形可视化交互工具,可用来开发流程图,思维导图等复杂图形交互应用核心概念 paper和graph paper即画布,图形将在paper上绘制 g ...

jointjs使用总结

jointjs使用总结

jointjs使用总结相关推荐

最新文章

热门文章