JointJS
JointJs - Link 的路由模式和连线类型
路由模式 title:(Link - routers) link:(https://resources.jointjs.com/docs/jointjs/v3.7/joint.html#routers) cover:(https://uploads-ssl.webflow.com/63061d4ee ......
【JointJS】通过 Port 与图形进行连接
# Ports 端口 一个元素的一端和另一个元素的一端相连可以在 Graph（逻辑层）中通过 Link 的 `target` 和 `source` 两个函数实现相连。 从用户的角度出发，在 Paper（视图层）中，用户通过鼠标移动从一个元素的一端拉一条线和另一个元素的一端相连，而这就需要借助端口（P ......
【JointJS】Paper 事件和 Graph 事件
# 复习 Paper & Graph Paper 是渲染我们提供的数据的，表示的是视图层（View）。数据和逻辑在 Graph 中操作，表示的是数据层和控制层（Model & Controller）。  中提到了 `calc` 相对计算函数，默认情况下，不指定 ref 属性，`calc` 以这个 g 标签作为基点计算值。 而一个图形下面（也就是一个 g ......
【JointJS】define 自定义元素时注意：calc 相对计算和 resize 设置元素大小
# 可能遇到的问题 由于官方文档全是英文，阅读起来比较困难，通过我的阅读，在 [Custom Elements](https://resources.jointjs.com/tutorial/custom-elements) 这一章节中主要的问题就是以下几点： 1. 什么是 define 函数，自定 ......
初入图形绘制框架 JointJS
# Graph & Paper Paper 是渲染我们提供的数据的，表示一个视图层。图形的逻辑在 Graph 中操作。 ![Graph & Paper 示意图](https://img2023.cnblogs.com/blog/2271881/202307/2271881-2023072600341 ......
vue3+jointjs 使用模板添加元素
关于如何在 Vue3 和 JointJS 中使用拖拽模板来创建节点元素，可以按照以下步骤进行： 1. 安装 JointJS 使用 npm 进行安装： ``` npm install jointjs ``` 2. 在 Vue3 中创建 JointJS 容器 在 Vue3 中创建一个组件，用于创建 Jo ......
vue3+jointjs demo
下面是使用Vue3和JointJS添加元素的示例代码： 1. 安装JointJS ```terminal npm install jointjs --save ``` 2. 创建JointJS图形 ```javascript import { ref, onMounted } from 'vue'; ......