GoJs图片绘图模板Picture怎么使用

GoJs 是一个功能强大的 JavaScript 库，用于创建交互式的图表和图形。在 GoJs 中，Picture 是一个常用的模板，用于在图表中显示图片。本文将详细介绍如何使用 Picture 模板在 GoJs 中绘制图片。

1. 引入 GoJs 库

首先，你需要在 HTML 文件中引入 GoJs 库。你可以通过 CDN 或者下载本地文件的方式引入。

<script src="https://unpkg.com/gojs/release/go.js"></script>

2. 创建画布

在 HTML 文件中创建一个 div 元素，用于放置 GoJs 画布。

<div id="myDiagramDiv" style="width: 100%; height: 500px; background-color: #f0f0f0;"></div>

3. 初始化 GoJs 画布

在 JavaScript 中初始化 GoJs 画布，并设置 Picture 模板。

const $ = go.GraphObject.make;

const myDiagram = $(go.Diagram, "myDiagramDiv", {
  initialContentAlignment: go.Spot.Center,
  "undoManager.isEnabled": true
});

4. 使用 Picture 模板

在 GoJs 中，Picture 模板用于显示图片。你可以通过 go.Picture 创建一个图片节点，并设置其 source 属性来指定图片的 URL。

const nodeTemplate = $(
  go.Node,
  "Auto",
  $(
    go.Shape,
    "RoundedRectangle",
    { fill: "lightblue", stroke: "blue", strokeWidth: 2 }
  ),
  $(
    go.Picture,
    { margin: 10, width: 50, height: 50 },
    new go.Binding("source", "image")
  ),
  $(
    go.TextBlock,
    { margin: 10, font: "12px sans-serif", stroke: "black" },
    new go.Binding("text", "name")
  )
);

myDiagram.nodeTemplate = nodeTemplate;

5. 添加节点数据

在初始化画布和模板之后，你可以通过添加节点数据来显示图片。

const nodeDataArray = [
  { key: 1, name: "Node 1", image: "https://example.com/image1.png" },
  { key: 2, name: "Node 2", image: "https://example.com/image2.png" }
];

myDiagram.model = new go.GraphLinksModel(nodeDataArray);

6. 运行效果

完成上述步骤后，打开浏览器，你将看到两个节点，每个节点都显示了一张图片，并且图片下方有对应的文字描述。

7. 自定义 Picture 模板

你可以根据需要自定义 Picture 模板的样式和行为。例如，你可以设置图片的大小、边框、透明度等属性。

$(
  go.Picture,
  {
    margin: 10,
    width: 100,
    height: 100,
    opacity: 0.8,
    border: "2px solid black"
  },
  new go.Binding("source", "image")
)

8. 总结

通过以上步骤，你可以在 GoJs 中使用 Picture 模板来显示图片。GoJs 提供了丰富的 API 和灵活的配置选项，使得你可以轻松地创建复杂的图表和图形。希望本文能帮助你更好地理解和使用 GoJs 中的 Picture 模板。