JointJSJavaScript流程图绘制框架解析_jointjs,jointjs画虚线

html代码

120 浏览量更新于2023-03-03 评论收藏 98KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

JointJS JavaScript流程图绘制框架解析流程图绘制框架解析

JointJS：：JavaScript 流程图绘制框架流程图绘制框架

最近调研了js画流程图的框架，最后选择了Joint。配合上 dagre 可以画出像模像样的流程图。

JointJS 简介简介

JointJS 是一个开源前端框架，支持绘制各种各样的流程图、工作流图等。Rappid 是 Joint 的商业版，提供了一些更强的插件。JointJS 的特点有下面几

条，摘自官网：

能够实时地渲染上百（或者上千）个元素和连接

支持多种形状（矩形、圆、文本、图像、路径等）

高度事件驱动，用户可自定义任何发生在 paper 下的事件响应

元素间连接简单

可定制的连接和关系图

连接平滑（基于贝塞尔插值 bezier interpolation）& 智能路径选择

基于 SVG 的可定制、可编程的图形渲染

NodeJS 支持

通过 JSON 进行序列化和反序列化

总之 JoingJS 是一款很强的流程图制作框架，开源版本已经足够日常使用了。

一些常用地址：

API: https://resources.jointjs.com/docs/jointjs/v1.1/joint.html

Tutorials: https://resources.jointjs.com/tutorial

JointJS Hello world

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({

el: document.getElementById('myholder'),

model: graph,

width: 600,

height: 100,

gridSize: 1

});

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

rect.position(100, 30);

rect.resize(100, 40);

rect.attr({

body: {

fill: 'blue'

label: {

text: 'Hello',

fill: 'white'

}

});

rect.addTo(graph);

var rect2 = rect.clone();

rect2.translate(300, 0);

rect2.attr('label/text', 'World!');

rect2.addTo(graph);

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

link.source(rect);

link.target(rect2);

link.addTo(graph);

</script>

</body>

</html>

hello world 代码没什么好说的。要注意这里的图形并没有自动排版，而是通过移动第二个 rect 实现的手动排版。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38750209

粉丝: 9
资源: 837

会员权益专享

JointJS JavaScript流程图绘制框架解析

评论0

会员权益专享

最新资源

JointJS JavaScript流程图绘制框架解析

评论0

5个亲测好用的基于javascript的开源网页流程图、结构图

JointJs.zip

JointJS Demo

JS绘制流程图的数据可视化工具

mxgraph html5,jointjs和mxgraph比较

使用html2canvas截取jointjs流程图时，初始化截取不全，第二次再次点击截取后生成完整是什么原因

用JavaScript语法写一份解析数值类型的流程图

vue实现绘制流程图功能

angularjs 使用jointjs

js+svg流程图主动连线

js绘制正则表达式解析图

fabric js流程图

jointjs 拓扑

echarts、JointJS和dargeD3的区别

js d3.js 流程图

vue +d3绘制流程图

若依框架的界面流程图

echarts、JointJS、dargeD3

用JointJS写一个网络拓扑图demo

工作流程图前端js插件

会员权益专享

最新资源