流程图控件GoJS教程：初始视图

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS现已更新至最新版本2.0.17发布，修复了一些bug，增强用户体验，赶快下载试试吧~

点击下载GoJS最新试用版

初始，自动和程序化视图管理

创建并分配模型以使某些零件出现在图表中后，您可以控制零件最初在视口中出现的位置，还可以控制在修改图表后它们在何处显示。

初始视图

您甚至可以在分配模型之前随时轻松地设置Diagram.initialPosition和/或Diagram.initialScale属性。 一旦创建了所有零件并执行了任何初始布局，这将导致Diagram.position和/或Diagram.scale属性被设置为指定的初始值。

但是，如果您不知道图表文档有多大怎么办？如果要显示文档的特定区域，您将不知道要设置的位置。如果要以最大的比例显示一个大型文档，以显示所有文档，则将不知道要设置的比例。

解决此问题的一种方法是将Diagram.initialDocumentSpot和Diagram.initialViewportSpot属性设置为特定的Spot值。例如，如果您正在显示树状图，并且希望树水平居中，但垂直放置在顶部，则在创建图时可以执行以下操作：

 $（go.Diagram，“ myDiagramDiv”，
    {
      initialDocumentSpot：go.Spot.TopCenter，
      initialViewportSpot：go.Spot.TopCenter
    }）

这样可以确保在图的初始布局之后，图内容的中间最高点位于视口的中间最高点。

解决此问题的另一种方法是设置Diagram.initialContentAlignment或Diagram.initialAutoScale属性。例如，它是相当普遍希望确保小文件出现顶部为中心的图表窗口内-刚刚成立Diagram.initialContentAlignment到现货，TopCenter。或者，如果您要“缩放以适合”图表，只需将Diagram.initialAutoScale设置为Diagram，Uniform即可。

 $（go.Diagram，“ myDiagramDiv”，
    {
      initialAutoScale：go.Diagram.Uniform
    }）

一般而言，您可能想尝试将特定Node居中。这是您可以执行的操作：

 diagram.nodeTemplate =
    $(go.Node, "Auto",
      new go.Binding("location", "loc"),
      $(go.Shape, { fill: "lightyellow" }),
      $(go.TextBlock, { margin: 5 },
        // show the location as text in the node
        new go.Binding("text", "loc",
                       function (p) { return p.x.toFixed() + ", " + p.y.toFixed(); }))
    );
 
  // initialize the model with random nodes:
  var nodeDataArray = [];
  for (var i = 0; i < 20; i++ ) {
    nodeDataArray.push({ loc: new go.Point(Math.random() * 600, Math.random() * 300) });
  }
  diagram.model.nodeDataArray = nodeDataArray;
 
  // this event handler is called when the diagram is first ready
  diagram.addDiagramListener("InitialLayoutCompleted", function(e) {
    // pick a random node data
    var data = nodeDataArray[Math.floor(Math.random()*nodeDataArray.length)];
    // find the corresponding Node
    var node = diagram.findNodeForData(data);
    // and center it and select it
    diagram.centerRect(node.actualBounds);
    diagram.select(node);
  });

注意：由于默认情况下无法滚动到文档的任何边缘，因此如果所选节点恰好位于边缘或边缘附近，则该节点实际上无法在视口中居中。

自动视图管理

有时，每次更改图表后，您都希望控制视口（即Diagram.position和Diagram.scale）。例如，如果你总是希望保持文档为中心的用户已经移动或删除或插入节点，集之后Diagram.contentAlignment（而不是Diagram.initialContentAlignment）到Spot.Center。

或者，如果您始终希望文档保持“缩放到适合状态”，请将Diagram.autoScale （而不是Diagram.initialAutoScale）设置为Diagram.Uniform。例如，概述图可以做到这一点。

程序化视图管理

如果您不想连续更改图的位置或缩放比例，但是有时确实想要更改Diagram.position和/或Diagram.scale，则可以将这些属性设置为所需的任何值。但是，请注意，Diagram.position的最终值通常受Diagram.documentBounds 以及视口的大小和图的比例的限制。该Diagram.scale被限制Diagram.minScale和Diagram.maxScale。

但是，更常见的是在Diagram上调用方法来获得所需的结果。例如，要得到的效果Diagram.initialDocumentSpot和Diagram.initialViewportSpot当“InitialLayoutCompleted” DiagramEvent发生时，调用使用性能 Diagram.alignDocument与你想有重合的两个期望的斑点。

正如上面已经证明，如果你想尝试在视口中居中特定节点，你可以调用Diagram.centerRect与节点的GraphObject.actualBounds。

如果要确保特定节点在视口内，但不一定居中，请调用Diagram.scrollToRect。

如果只想以与用户通过滚动条或鼠标滚轮相同的方式滚动图，请调用带有指定滚动量和方向的参数的Diagram.scroll。

刚刚提到的Diagram方法不会更改Diagram.scale。如果要重新缩放图以显示整个文档范围，请调用Diagram.zoomToFit。更一般而言，如果希望以适合其视口的任意比例显示图的特定区域，请调用Diagram.zoomToRect。

=====================================================

想要购买GoJS正版授权的朋友可以。

更多精彩内容，欢迎关注下方的微信公众号，及时获取产品最新资讯▼▼▼