3.1.3.2 Geometry 几何

[翻译]
在 helloworld 示例中，我们看到顶点的位置和大小传递到 insertVertex 函数中。JavaScript 中的坐标系是 x 向右为正，y 向下为正，就图而言，定位是相对于放置 mxGraph 的容器的绝对定位。

[原文]
In the helloworld example we saw the position and size of the vertices passed into the insertVertex function. The coordinate system in JavaScript is x is positive to the right and y is positive downwards, and in terms of the graph, the positioning is absolute to the container within which the mxGraph is placed.

• coordinate /ko'rdnt/ 坐标
• positive /'pztv/ 正的
• downwards /'danwrdz/ 向下的
• absolute /'aebslut/ 绝对的
• container /kn'tenr/ 容器

[翻译]
之所以有单独的 mxGeometry 类，而不是简单地让 mxRectangle 类存储这些信息，是因为边也有几何信息。

[原文]
The reason for a separate mxGeometry class, as opposed to simply having the mxRectangle class store this information, is that the edges also have geometry information.

• separate /'sepret/ 单独的
• opposed /'pozd/ 相反
• rectangle /'rektaeɡl/ 矩形
• geometry /di'mtri/ 几何
• edges /'edz/ 边

[翻译]
对于边，宽度和高度值被忽略，x 和 y 值与边标签的定位相关。此外，边有控制点的概念。这些是边沿途的中间点，边被绘制为通过这些点。有时将使用控制点称为边路由。

[原文]
The width and height values are ignored for edges and the x and y values relate to the positioning of the edge label. In addition, edges have the concept of control points. These are intermediate points along the edge that the edge is drawn as passing through. The use of control points is sometimes referred to as edge routing.

• ignored /ɡ'nrd/ 忽略
• relate /r'let/ 相关
• control /kn'trol/ 控制
• intermediate /ntr'midit/ 中间的
• routing /'rut/ 路由

通过 2 个控制点路由的边/An edge routed by 2 control points

• routed /'rutd/ 路由
• control /kn'trol/ 控制
• points /pnts/ 点

[翻译]
几何中有两个更重要的附加概念，相对定位和偏移

[原文]
There are two more important additional concepts in geometry, relative positioning and offsets

• additional /'dnl/ 附加的
• relative /'reltv/ 相对的
• positioning /p'zn/ 定位
• offsets /'fsets/ 偏移

相对定位 /Relative Positioning

[翻译]
默认情况下，顶点的 x 和 y 位置是父单元边界矩形左上角到单元自身边界矩形左上角的偏移。父单元和群组的概念将在本章稍后讨论，但现在，如果一个单元没有父单元，图容器是其定位的父单元。

[原文]
By default, the x and y position of a vertex is the offset of the top left point of the bounding rectangle of the parent to the top left point of the bounding rectangle of the cell itself. The concept of parents and groups is discussed later in this chapter, but without going into too much detail, if a cell does not have cell parent, the graph container is its parent for positioning purposes.

• default /d'flt/ 默认
• offset /'fset/ 偏移
• bounding /'band/ 边界
• rectangle /'rektaeɡl/ 矩形
• container /kn'tenr/ 容器

非相对顶点定位/Non-relative vertex positioning

• non-relative /nn 'reltv/ 非相对的
• vertex /'vrtks/ 顶点
• positioning /p'zn/ 定位

[翻译]
对于边，在非相对模式下（默认模式），边标签位置是相对于图原点的绝对偏移。

[原文]
For an edge, in non-relative mode, which is the default mode, the edge label position is the absolute offset from the graph origin.

• edge /ed/ 边
• non-relative /nn 'reltv/ 非相对的
• default /d'flt/ 默认
• absolute /'aebslut/ 绝对的
• offset /'fset/ 偏移

非相对边标签定位/Non-relative edge label positioning

• edge /ed/ 边
• label /'lebl/ 标签
• positioning /p'zn/ 定位

[翻译]
对于相对模式的顶点，(x,y) 是沿父单元 (width, height) 的比例，单元的原点位于此比例处。(0,0) 与父单元的原点相同，(1,1) 将原点置于父单元的右下角。相同的相对定位在两个维度上扩展到 0 以下和 1 以上。这种定位对于保持子单元相对于整体父单元大小的固定位置很有用。

[原文]
For vertices in relative mode, (x,y) is the proportion along the parent cell's (width, height) where the cell's origin lies. (0,0) is the same origin as the parent, (1,1) places the origin at the bottom right corner of the parent. The same relative positioning extends below 0 and above 1 for both dimensions. This positioning is useful for keeping child cells fixed relative to the overall parent cell size.

• relative /'reltv/ 相对的
• proportion /pr'prn/ 比例
• origin /'rdn/ 原点
• dimensions /d'mennz/ 维度
• fixed /fkst/ 固定的

相对顶点定位/Relative vertex positions

• relative /'reltv/ 相对的
• vertex /'vrtks/ 顶点
• positions /p'znz/ 位置

[翻译]
最后，在相对模式下的边标签基于边中心的定位。x 坐标是从边源端（-1）到目标端（1）的相对距离。y 坐标是从边正交的像素偏移。下图显示了相对模式下各种边标签的 x,y 值。请注意，对于直边，计算很简单。对于具有多个控制点的边，必须沿其段（段是端点和/或控制点之间的线）跟踪边以找到沿边的正确距离。y 值是从该段的正交偏移。

[原文]
Lastly, edge labels in relative mode are palced based on the positioning from the center of the edge. The x-coordinate is the relative distance from the source end of the edge, at -1, to the target end of the edge, at 1. The y co-ordinate is the pixel offset orthogonal from the edge. The diagram below shows the values of x,y for various edge labels in relative mode. Note that for a straight edge, the calculations are simple. For edges with multiple control points, the edge has to be traced along its segments (a segment being the line between end points and/or control points) to find the correct distance along the edge. The y value is the orthogonal offset from that segment.

• placed /plest/ 放置
• relative /'reltv/ 相对的
• orthogonal /r'θɡnl/ 正交的
• segments /'seɡmnts/ 段
• traced /trest/ 跟踪

[翻译]
为边标签启用相对定位是应用程序的常见偏好。导航到 mxGraph.insertEdge() 函数，您会看到它调用 createEdge()。在 createEdge() 中，每个使用此原型创建的边的几何都被设置为相对的。这是 mxGraph 中大量辅助函数的部分原因，它们使默认行为的更改变得简单。您应尽量使用 mxGraph 类 API 以在应用程序中提供这种优势。

[原文]
Switching relative positioning on for edge labels is a common preference for applications. Navigate to the mxGraph.insertEdge() function in mxGraph, you will see this calls createEdge(). In createEdge() the geometry is set relative for every edge created using this prototype. This is partly the reason for the amount of helper functions in mxGraph, they enable easy changing of the default behaviour. You should try to use the mxGraph class API as much as possible to provide this benefit in your applications.

• switching /'swt/ 切换
• relative /'reltv/ 相对的
• preference /'prefrns/ 偏好
• prototype /'prottap/ 原型
• behaviour /b'hevjr/ 行为

偏移 /Offsets

[翻译] mxGeometry 中的偏移字段是应用于单元标签的绝对 x,y 偏移。对于边标签，偏移始终在根据上述部分的相对标志计算边标签后应用。

[原文] The offset field in mxGeometry is an absolute x,y offset applied to the cell label. In the case of edge labels, the offset is always applied after the edge label has been calculated according to the relative flag in the above section.

• offset /'fset/ 偏移
• absolute /'aebslut/ 绝对的
• applied /'plad/ 应用
• calculated /'kaelkjuletd/ 计算
• flag /flaeɡ/ 标志

[翻译]
核心 API 函数：

• mxGraph.resizeCell(cell, bounds) – 在 begin/end 更新调用内将指定单元调整到指定边界。
• mxGraph.resizeCells(cells, bounds) – 在 begin/end 更新调用内将单元数组中的每个单元调整到边界数组中的相应条目。

[原文]
Core API functions:

• mxGraph.resizeCell(cell, bounds) – Resizes the specified cell to the specified bounds, within a begin/end update call.
• mxGraph.resizeCells(cells, bounds) – Resizes each of the cells in the cells array to the corresponding entry in the bounds array, within a begin/end update call.

• resize /ri'saz/ 调整大小
• bounds /bandz/ 边界
• array /'re/ 数组
• entry /'entri/ 条目
• update /p'det/ 更新