JointJs：使用 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 模块，并在其下定义一个自定义形状，它会出现在模块中，如果以后需要（在工厂中）我仍然可以访问它在同一个变量上。但相反，我收到以下错误：

未捕获的类型错误：无法读取属性 'Customrectangle' 未定义

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

我是否遗漏了有关 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() 并未将其附加到关节。