GoJs图形绘图模板Shape怎么使用

GoJs是一款功能强大的JavaScript库，用于创建交互式的图形和图表。在GoJs中，Shape是一个非常重要的概念，它用于定义图形的基本形状和样式。本文将详细介绍如何使用GoJs中的Shape模板来创建和自定义图形。

1. Shape的基本概念

在GoJs中，Shape是一个用于定义图形外观的对象。它可以是一个简单的几何形状（如矩形、圆形、椭圆等），也可以是一个复杂的自定义形状。Shape通常与Node或Link一起使用，以定义图形的外观。

2. 创建Shape

要创建一个Shape，首先需要定义一个Shape对象，并将其添加到Node或Link的template中。以下是一个简单的示例，展示如何创建一个矩形Shape：

const $ = go.GraphObject.make;

const myDiagram = $(go.Diagram, "myDiagramDiv");

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { figure: "Rectangle", fill: "lightblue", stroke: "darkblue", strokeWidth: 2 }
    ),
    $(go.TextBlock,
      { margin: 10, text: "Hello, World!" }
    )
  );

在这个示例中，我们创建了一个Node模板，并在其中定义了一个Shape。Shape的figure属性设置为"Rectangle"，表示这是一个矩形。fill属性定义了矩形的填充颜色，stroke属性定义了边框颜色，strokeWidth属性定义了边框宽度。

3. 自定义Shape

除了使用预定义的几何形状外，GoJs还允许你通过path属性来自定义Shape。path属性接受一个SVG路径字符串，用于定义复杂的形状。以下是一个自定义Shape的示例：

const $ = go.GraphObject.make;

const myDiagram = $(go.Diagram, "myDiagramDiv");

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { path: "M 0 0 L 100 0 L 50 100 Z", fill: "lightgreen", stroke: "darkgreen", strokeWidth: 2 }
    ),
    $(go.TextBlock,
      { margin: 10, text: "Custom Shape" }
    )
  );

在这个示例中，我们使用path属性定义了一个三角形。path字符串"M 0 0 L 100 0 L 50 100 Z"表示从点(0, 0)开始，画一条线到点(100, 0)，再画一条线到点(50, 100)，最后闭合路径。

4. Shape的样式

Shape的样式可以通过多种属性进行自定义，包括fill、stroke、strokeWidth、strokeDashArray等。以下是一些常用的样式属性：

• fill: 定义形状的填充颜色。
• stroke: 定义形状的边框颜色。
• strokeWidth: 定义边框的宽度。
• strokeDashArray: 定义边框的虚线样式。

以下是一个使用这些属性的示例：

const $ = go.GraphObject.make;

const myDiagram = $(go.Diagram, "myDiagramDiv");

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { figure: "Ellipse", fill: "lightcoral", stroke: "darkred", strokeWidth: 3, strokeDashArray: [5, 5] }
    ),
    $(go.TextBlock,
      { margin: 10, text: "Styled Shape" }
    )
  );

在这个示例中，我们创建了一个椭圆形的Shape，并设置了填充颜色、边框颜色、边框宽度以及虚线样式。

5. Shape的交互

Shape不仅可以用于定义图形的外观，还可以与用户进行交互。例如，你可以为Shape添加点击事件、鼠标悬停事件等。以下是一个添加点击事件的示例：

const $ = go.GraphObject.make;

const myDiagram = $(go.Diagram, "myDiagramDiv");

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { figure: "Diamond", fill: "lightyellow", stroke: "darkgoldenrod", strokeWidth: 2 },
      new go.Binding("fill", "isSelected", function(sel) { return sel ? "lightpink" : "lightyellow"; }).ofObject()
    ),
    $(go.TextBlock,
      { margin: 10, text: "Click Me!" }
    ),
    {
      click: function(e, obj) {
        alert("Shape clicked!");
      }
    }
  );

在这个示例中，我们为Shape添加了一个点击事件，当用户点击Shape时，会弹出一个提示框。

6. 总结

Shape是GoJs中用于定义图形外观的核心对象。通过使用Shape，你可以创建各种几何形状和自定义形状，并通过样式和交互来增强图形的表现力。本文介绍了如何创建和自定义Shape，以及如何为Shape添加交互事件。希望这些内容能帮助你更好地理解和使用GoJs中的Shape模板。