JointJs：使用 Node.Js 定义自定义形状

Question

我有点困惑，在我的应用程序中，使用 JointJs 和 NodeJs 组合来定义自定义形状似乎不起作用。我正在尝试以下代码：

const joint = require('jointjs')

const rectWidth = 130
const rectHeight = 65

joint.shapes.standard.Rectangle.define('examples.CustomRectangle', {
  attrs: {
    body: {
      refWidth: '100%',
      refHeight: '100%',
      strokeWidth: 5,
      stroke: '#000000',
      strokeDasharray: rectWidth + ',' + rectHeight,
      fill: 'white'
    },
    label: {
      textVerticalAnchor: 'middle',
      textAnchor: 'middle',
      refX: '50%',
      refY: '50%',
      fontSize: 14,
      fill: '#333333'
    }
  }
})

console.log(joint)

export class ElementFactory {
  createDatastore (x, y) {
    return new joint.shapes.examples.CustomRectangle({
      position: { x: x - rectWidth / 2, y: y - rectHeight / 2 },
      size: { width: rectWidth, height: rectHeight },
      attrs: {
        text: { textWrap: { width: rectWidth * 0.95, height: 20, ellipsis: true, text: 'Datastore' } }
      }
    })
  }
}

现在我的理解是，如果我在脚本开头需要 JointJs 模块，并在其下定义一个自定义形状，它将出现在模块中，如果以后需要（在工厂中）我仍然可以访问它在同一个变量上。但相反，我收到以下错误：

未捕获的类型错误：无法读取属性“CustomRectangle”的 未定义

我也在定义自定义形状后立即记录模块，但它仍然没有显示。

我是否遗漏了有关 NodeJ 或 JointJ 的内容？有谁知道问题是什么？任何帮助将不胜感激。

Answer 1

我认为问题在于您如何将其附加到 joint。

试试这个：

joint.shapes.examples.CustomRectangle = joint.shapes.standard.Rectangle.define('examples.CustomRectangle', {
  attrs: {
    body: {
      refWidth: '100%',
      refHeight: '100%',
      strokeWidth: 5,
      stroke: '#000000',
      strokeDasharray: rectWidth + ',' + rectHeight,
      fill: 'white'
    },
    label: {
      textVerticalAnchor: 'middle',
      textAnchor: 'middle',
      refX: '50%',
      refY: '50%',
      fontSize: 14,
      fill: '#333333'
    }
  }
});

尽管文档 (https://resources.jointjs.com/tutorial/custom-elements) 强烈暗示，define() 并未将其附加到关节。