什么是JointJS库中元素Shapes的fsa.State方法

Posted 2021-05-05

我正在尝试了解Finite State Machine的Joint Js lib v-2.2演示的源代码。我被困在function下面

function state(x, y, label) {

var cell = new joint.shapes.fsa.State({
    position: { x: x, y: y },
    size: { width: 60, height: 60 },
    attrs: { text : { text: label }}
});
graph.addCell(cell);
return cell;
};

在上面我试图在官方文档中引用fsa.State的下面的构造函数，但是无法找到。

var cell = new joint.shapes.fsa.State({..});

任何提示它是如何工作的。

参考链接：

https://resources.jointjs.com/demos/fsa

https://resources.jointjs.com/demos/joint/demo/fsa/src/fsa.js

答案

如果你看一下fsa的演示示例的源代码，你可以在这里找到它--https://resources.jointjs.com/demos/joint/demo/fsa/index.html

您将看到，连同joinjs库及其依赖项，还添加了一个脚本

<script src="../../plugins/shapes/joint.shapes.fsa.js"></script>

如果你看一下它的源代码，这个插件定义了fsa.State

joint.shapes.basic.Circle.define('fsa.State', {...

fsa.State不是核心联合图书馆的一部分。要使用它，您必须包含此插件。

也许因为这个原因，它不是官方文档的一部分。但你可以在GitHub上找到源代码https://github.com/clientIO/joint/tree/master/dist有一个文件joint.shapes.fsa.js。

阅读官方文档中关于定义自己的形状https://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Cell.define的信息。