流程图控件GoJS教程：坐标系统

GoJS是一款功能强大，快速且轻量级的流程图控件。本教程将为您介绍坐标系统。

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

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

GoJS最新试用版

坐标系统

一图使用两个主要的坐标系绘制时部分：文档和查看坐标。此外，每个小组一个内部分具有它的元素使用其自己的坐标系。

GoJS中的所有坐标系都具有Point，其中X的值向右递增，而Y的值向下递减。

文件和检视座标

零件的Part.location和GraphObject.actualBounds和GraphObject.position在文档坐标中。因此，可以保存在模型的节点数据中的Point通常位于文档坐标中：

diagram.model.nodeDataArray = [    { key: "Alpha", loc: "0 0" },    { key: "Beta", loc: "100 50" }  ];

但是，在文档坐标中Part.location为（0，0）的Part 并不总是绘制在用户在页面中看到的HTML Div元素的左上角。当用户滚动图时，将需要在画布上的其他位置绘制该零件。并且，如果用户放大以使零件看起来更大，则零件将在画布中的不同点绘制。但是，随着用户滚动或缩放图表，Part.location不会更改值。

画布中的点位于视图坐标中：距左上角的距离（与设备无关的像素）。文档坐标和视图坐标之间的差异主要由两个Diagram属性控制： Diagram.position和Diagram.scale。滚动和平移更改Diagram.position。放大或缩小将更改Diagram.scale。您还可以通过调用Diagram.transformDocToView和Diagram.transformViewToDoc在坐标系之间进行转换。但是，视图坐标中很少有属性和方法参数或返回值-几乎所有内容都在文档坐标或面板坐标中。

该视口是在画布上可见的文档的区域。该区域可作为Diagram.viewportBounds使用。请注意，视口边界在文档坐标中，而不在视图坐标中！视口的左上角在视图坐标中为（0,0），但在文档坐标中为Diagram.position。视口的右下角在视图坐标中位于画布的（宽度，高度）处。文档坐标中视口的右下角取决于Diagram.scale。

作为在整个文档的上下文中显示视口的示例，“ 概述 ”正是这样做的。看一下组织结构图样本中的概述。概述显示了主图的整个文档。洋红色框显示了整个文档中主图的视口。滚动或平移主图时，视口将移动。缩小时，视口会变大。

为了更好地理解文档坐标和视口坐标之间的区别，请查看以下图表：

标签：