jointjs节点框内增加分割线
时间: 2023-12-14 14:51:26 浏览: 36
要在JointJS节点框内添加分割线,可以使用SVG路径元素来创建分割线。以下是一个简单的示例:
```javascript
const rect = new joint.shapes.standard.Rectangle();
rect.position(100, 100);
rect.resize(200, 100);
rect.attr({
body: {
rx: 10,
ry: 10,
strokeWidth: 2,
stroke: '#000',
fill: '#fff'
}
});
// 添加分割线
const line = new joint.shapes.basic.Path({
attrs: {
path: {
d: 'M150 125H250',
stroke: '#000',
strokeWidth: 2
}
}
});
const paper = new joint.dia.Paper({
el: document.getElementById('mycanvas'),
model: new joint.dia.Graph(),
width: 400,
height: 300
});
paper.model.addCells([rect, line]);
```
在上面的代码中,我们使用`joint.shapes.standard.Rectangle`创建一个矩形节点,并设置节点属性。然后,我们使用`joint.shapes.basic.Path`创建一个SVG路径元素,用于绘制分割线。最后,我们将矩形和路径添加到画布上。
在这个例子中,我们使用了`M150 125H250`路径命令来创建一条水平线,从(150, 125)到(250, 125)。
你可以根据自己的需要自定义线条的位置、颜色和宽度。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)