logo GoJS教程 2019 我也要发布文档

初始视图


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

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

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

自动视图管理

有时,每次更改图表后,您都希望控制视口(即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正版授权的朋友可以咨询慧都官方客服

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

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