Joint JS自定义绘图工具：圆形元素特殊边框实现求助

嘿，我之前在JointJS开发绘图工具时也碰到过类似的自定义形状需求，给你几个实用的思路，应该能帮你搞定这个带自定义边框的Circle元素：

1. 扩展基础Circle元素，添加多层SVG元素 #

JointJS的基础形状本质是SVG组合，我们可以直接扩展joint.shapes.basic.Circle，在它的markup里添加额外的边框元素（比如外层环形、特殊路径），然后通过attrs控制样式。

举个双层边框的例子：

// 定义带双层边框的自定义圆形
const CustomBorderCircle = joint.shapes.basic.Circle.extend({
  defaults: joint.util.deepSupplement({
    type: 'custom.CustomBorderCircle',
    attrs: {
      // 外层粗边框
      outerCircle: {
        cx: '50%',
        cy: '50%',
        r: '45%',
        stroke: '#2c3e50',
        strokeWidth: 4,
        fill: 'none'
      },
      // 内层填充圆形
      circle: {
        cx: '50%',
        cy: '50%',
        r: '40%',
        fill: '#ecf0f1',
        stroke: '#3498db',
        strokeWidth: 2
      }
    },
    // 自定义markup，包含外层边框和内层圆形
    markup: [
      '<g class="rotatable">',
        '<g class="scalable">',
          '<circle selector="outerCircle"/>',
          '<circle selector="circle"/>',
        '</g>',
        '<text class="label"/>',
      '</g>'
    ].join('')
  }, joint.shapes.basic.Circle.prototype.defaults)
});

// 在画布中使用这个元素
const customCircle = new CustomBorderCircle({
  position: { x: 150, y: 150 },
  size: { width: 120, height: 120 },
  attrs: {
    label: { text: '带双层边框的圆', fill: '#2c3e50' }
  }
});

customCircle.addTo(yourGraphInstance);

2. 用自定义SVG路径实现特殊边框 #

如果你的目标边框不是简单的环形（比如带缺口、箭头或者不规则分段），可以把边框换成<path>元素，手动编写SVG路径来实现想要的形状。

比如一个带缺口的边框：

const NotchedBorderCircle = joint.shapes.basic.Circle.extend({
  defaults: joint.util.deepSupplement({
    type: 'custom.NotchedBorderCircle',
    attrs: {
      // 带缺口的环形路径
      borderPath: {
        d: 'M 60 10 A 50 50 0 0 1 100 60 A 50 50 0 0 1 60 110 A 50 50 0 0 1 20 60 L 30 60', // 最后一段L命令形成缺口
        stroke: '#e74c3c',
        strokeWidth: 3,
        fill: 'none',
        strokeLinecap: 'round'
      },
      circle: {
        cx: '50%',
        cy: '50%',
        r: '42%',
        fill: '#fff',
        stroke: '#bdc3c7'
      }
    },
    markup: [
      '<g class="rotatable">',
        '<g class="scalable">',
          '<path selector="borderPath"/>',
          '<circle selector="circle"/>',
        '</g>',
        '<text class="label"/>',
      '</g>'
    ].join('')
  }, joint.shapes.basic.Circle.prototype.defaults)
});

3. 动态调整边框样式 #

如果需要根据元素状态（选中、 hover等）修改边框，可以通过JointJS的事件监听来动态更新attrs：

customCircle.on('element:pointerclick', () => {
  customCircle.attr('outerCircle/stroke', '#e74c3c');
  customCircle.attr('outerCircle/strokeWidth', 6);
});

这些方法的核心都是利用JointJS的自定义形状机制，通过组合SVG元素或者自定义路径来实现你想要的边框效果。你可以根据目标元素的具体样式，调整markup和attrs里的参数就行~

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