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

JointJs: Define a custom shape with Node.Js

我有点困惑,在我的应用程序中,结合使用 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 模块,并在其下定义一个自定义形状,它会出现在模块中,如果以后需要(在工厂中)我可以仍然通过同一个变量访问它。但是我收到以下错误:

Uncaught TypeError: Cannot read property 'CustomRectangle' of undefined

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

我是否遗漏了有关 NodeJs 或 JointJs 的信息?有谁知道问题出在哪里?任何帮助将不胜感激。

我认为问题在于您如何将其附加到 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() 并未将其附加到关节。