如何用JointJS绘制自定义图形与圆角矩形？

一、绘制圆角矩形 #

在你现有代码的基础上，只需给rect元素添加rx（水平圆角半径）和ry（垂直圆角半径）属性即可实现圆角效果，示例代码：

joint.V(MyPaper.viewport).append(joint.V("rect", { 
  x: 145, 
  y: 70, 
  width: 260, 
  height: 70,
  rx: 10, // 水平方向圆角半径
  ry: 10  // 垂直方向圆角半径
}));

若水平和垂直圆角半径相同，可只设置其中一个属性，浏览器会自动同步两个值。

二、绘制自定义图形 #

1. 直接用SVG Path绘制临时图形 #

JointJS的V方法支持创建SVG的path元素，通过d属性传入SVG路径指令即可绘制任意形状，比如绘制三角形：

joint.V(MyPaper.viewport).append(joint.V("path", {
  d: "M 200 100 L 300 200 L 100 200 Z", // 路径指令：移动到(200,100)，连线到(300,200)，连线到(100,200)，闭合路径
  fill: "#eee",
  stroke: "#333",
  "stroke-width": 2
}));

路径指令遵循标准SVG规则，可组合M（移动）、L（直线）、C（贝塞尔曲线）、A（圆弧）等指令绘制复杂图形。

2. 自定义可复用图形类（支持交互） #

如果需要重复使用自定义图形并支持拖拽、缩放等交互，推荐继承JointJS的基础图形类创建自定义元素：

// 定义自定义图形类
joint.shapes.custom.MyShape = joint.shapes.basic.Generic.extend({
  markup: '<g class="rotatable"><g class="scalable"><path d="M 50 0 L 100 100 L 0 100 Z"/></g></g>',
  defaults: joint.util.deepSupplement({
    type: 'custom.MyShape',
    attrs: {
      path: {
        fill: '#2ECC71',
        stroke: '#27AE60',
        'stroke-width': 2
      }
    }
  }, joint.shapes.basic.Generic.prototype.defaults)
});

// 实例化并添加到画布
const myCustomShape = new joint.shapes.custom.MyShape({
  position: { x: 100, y: 100 },
  size: { width: 100, height: 100 }
});
MyPaper.addCell(myCustomShape);

内容的提问来源于stack exchange，提问作者Megestic