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

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);  });

标签：

来源：慧都