![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JointJS
前端开心果
哈喽,我是一个前端程序媛,专注于前端技术的学习、分享与交流,包括web前端基础知识、进阶技术、学习资料、工具技巧、视频教程、面试题等信息。让我们在前端的学习道路上一起进步吧!
展开
-
JointJS点击选中元素高亮显示
使用 JointJs 时,当我们点击了选中的元素时,如果我们需要对点击元素高亮显示,点击空白处取消高亮显示的话,可以继续往下看代码实现。官方文档相关部分:highlightersevents主要实现:// 点击空白区域取消高亮this.paper.on('blank:pointerclick', () => { this.graph.getCells().forEach(cell => { highlighters.mask.remove(cell.findView(th原创 2021-07-25 15:38:09 · 3074 阅读 · 0 评论 -
结合给定数据使用JointJS自动绘制元素
我们给定一串数据,然后结合数据用 JointJS 在画布中绘制出元素data.jsexport default [{ id: 1, type: 'start', name: '事件', prev: [], next: [2, 5, 6]}, { id: 2, type: 'field', name: '字段1', prev: [1], next: [4]}, { id: 4, type: 'field', name: '字段2', prev:原创 2021-07-05 14:16:55 · 446 阅读 · 0 评论 -
JointJS实现节点自动布局
官方文档节点布局使用场景:当我们有一组数据,我们想把这组数据通过 JointJS 的节点和连线等元素给绘制出来的话,如果我们手动设置 绘制元素的位置的话,就很麻烦,JointJS 为我们提供了这样的 API在Vue 中使用:安装 dagre 和 graphlib 依赖npm install jointjsnpm install dagrenpm install @dagrejs/graphlib引入依赖// import * as joint from 'jointjs' 或者只引入需要的原创 2021-07-05 14:04:05 · 867 阅读 · 0 评论 -
JointJS设置画布自适应大小响应式
问题场景1:当我们将画布大小设置为浏览器窗口大小的时候,如果我们画布中的元素过多,而浏览器高度不够的话,超出部分则不会在画布中被显示出来问题场景2:当我们需要往画布中添加元素时,如果画布高度不够,添加的元素不能被显示出来解决:如果我们想让画布自适应响应式的话,可以使用 paper.fitToContent使用:在每次渲染节点,链接等元素后,设置 下面的属性,以达到画布大小自适应内容// 渲染画布的 div 元素const canvasRect = this.$refs.canvas.getCl原创 2021-07-05 13:53:46 · 600 阅读 · 0 评论 -
JointJS与vue集成初体验
将 JointJS 添加到 Vue 项目中安装需要的包npm 方式npm install jointjsyarn 方式yarn add jointjs在 vue 中使用 jointjsnpm install dagrenpm install @dagrejs/graphlib原创 2021-07-05 12:42:28 · 891 阅读 · 0 评论