jointJS(一）--关于jointJS的初认识

最近由于项目需要，开始接触jointJS，妥妥不停刷文档模式，先写一下对于jointjs的粗浅认识吧。

我们可以使用JointJS已提供的图元素绘图，也可根据需求自定义一些图元素。除此之外，JointJS创建的图表就是SVG图形，想改变图形样式，就去GoogleSVG相关语法就好啦。另外，它极易上手且操作简单，并且支持所有的现代浏览器。

下面先通过一个小的demo来展示jointjs的使用~

首先先去官网下载一下这些文件，详见HTML代码块head里的内容：
一切准备好就绪，我们就开始了。

先看HTML代码，body就一个div#myholder用来盛放我的画板graph，这里肯定有人会问什么是graph，憋急，请往下看。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/joint.css" /><script src="js/lib/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/lib/lodash.min.js"></script><script src="js/lib/backbone-min.js"></script><script src="js/lib/joint.js"></script></head><body><div id="myholder"></div></body><script src="js/createjoint.js" type="text/javascript" charset="utf-8"></script>
</html>

JS代码如下：
首先是定义画板和画布

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({el: $('#myholder'),//此处是你要放graph的容器width: 1300,height: 800,model: graph,gridSize: 1
});

接下来，就先画个简单的矩形，想要改变一些默认样式的话需要了解元素的SVG DOM结构：

var rect = new joint.shapes.basic.Rect({position: {x: 100,y: 30},size: {width: 200,height: 30},attrs: {//attr SVG attr      prop- custom datarect: {fill: 'rgb(238,244,247)','stroke': 'rgb(47,152,223)','stroke-width': '1px'//svg上色 fill stroke},text: {text: 'my box',fill: 'black'}}
});

跟矩形相似，我们也可以画个椭圆，代码如下：

var ellipse = new joint.shapes.basic.Rect({position: {x: 100,y: 30},size: {width: 200,height: 30},attrs: {//attr SVG attr      prop- custom datarect: {fill: 'rgb(238,244,247)','stroke': 'rgb(47,152,223)','stroke-width': '1px','rx': '10px','ry': '30px'//svg上色 fill stroke},text: {text: 'ellipse',fill: 'pink'}}
});

要让他们有一定的距离

ellipse.translate(300); //两块的距离

接下来，再来画个连线：

var link = new joint.dia.Link({source: {id: rect.id},target: {id: ellipse.id}
});

最后，把前面造的对象都放到画板中：

graph.addCells([rect, rect2, link]);

那么，一个小小的demo就实现了，是不是挺简单的，接下来我还会陆续分享使用jointjs中的问题以及我找到的最好的方法，jointjs的初认识就先到这里啦，加油！

jointJS(一）--关于jointJS的初认识相关推荐

vue使用jointJs,vue流程图、旅程图
vue使用jointJs,vue流程图.旅程图效果图安装使用组件中加入 script 创建画版实例化画布,把画布挂载到dom 添加元素自定义元素事件交互效果图安装 npm insta ...
在JointJS元素中使用html
问题背景在工作中有个需求需要画一幅"树图",本想使用echarts进行绘制的.奈何echarts的label中不支持formatter html,即html文本的渲染.故为了使图 ...
Angular+jointjs
Angular+jointjs 之前搞angular和jointjs搞得很绝望,后来发现哦原来是这个样子啊. 一.进入项目目录,运行以下命令安装jointjs和相关的依赖 1.jquery npm i ...
结合给定数据使用JointJS自动绘制元素
我们给定一串数据,然后结合数据用 JointJS 在画布中绘制出元素 data.js export default [{id: 1,type: 'start',name: '事件',prev: [], ...
JointJS：JavaScript 流程图绘制框架
目录 JointJS:JavaScript 流程图绘制框架 JointJS 简介 JointJS Hello world 前后端分离架构其他自动布局 Automatic layout 使用 HTM ...
Jointjs初认识
最近在研究Jointjs,这个做流程图.工作表.图标真的是很强大: 1.新建画板.画布 joint.setTheme('modern'); //设置主题样式 var graph = new joint ...
JointJS与vue集成初体验
将 JointJS 添加到 Vue 项目中安装需要的包 npm 方式 npm install jointjs yarn 方式 yarn add jointjs 在 vue 中使用 jointjs & ...
draw.io编辑工具
介绍 Draw.io是一款在线图表编辑工具, 可以用来编辑工作流.BPM.org charts.UML.ER图.网络拓朴图等.draw.io支持IE 11,Chrome 32 +,Firefox 38 ...
8.custom-links
JointJS comes with several built-in link shapes; we have already encountered joint.shapes.standard.L ...

jointJS(一）--关于jointJS的初认识

jointJS(一）--关于jointJS的初认识相关推荐

最新文章

热门文章