11.mxGraph的mxCell和Styles样式
3.1.3 mxCell
[翻译]
mxCell 是顶点和边的单元对象。mxCell 复制了模型中可用的许多功能。使用上的关键区别是，使用模型方法会创建适当的事件通知和撤销，而使用单元进行更改时没有更改记录。这对于临时视觉效果（如动画或鼠标悬停时的更改）可能有用。但作为一般规则，除非遇到此机制的特定问题，否则使用模型编辑 API。
[原文]
mxCell is the cell object for both vertices and edges. mxCell duplicates many of the functions available in the model. The key difference in usage is that using the model methods creates the appropriate event notifications and undo, using the cell makes the change but there is no record of the change. This can be useful for temporary visual effects such as animations or changes on a mouse over, for example. As a general rule though, use the model editing API unless you encounter a specific problem with this mechanism.
- duplicates /'djuplkets/ 复制
- notifications /notf'kenz/ 通知
- undo /n'du/ 撤销
- temporary /'tempreri/ 临时的
- animations /aen'menz/ 动画
[翻译]
在创建新单元时，构造函数中需要三件事：值（用户对象）、几何和样式。我们现在将探讨这三个概念，然后返回到单元。
[原文]
When creating a new cell, three things are required in the constructor, a value (user object), a geometry and a style. We will now explore these 3 concepts before returning to the cell.
- constructor /kn'strktr/ 构造函数
- value /'vaelju/ 值
- geometry /di'mtri/ 几何
- style /stal/ 样式
- explore /k'splr/ 探讨
3.1.3.1 Styles 样式
[翻译]
样式和样式表的概念在概念上类似于 CSS 样式表，但请注意，mxGraph 中实际使用 CSS，但仅用于影响 HTML 页面 DOM 中的全局样式。打开 util.mxConstants.js 文件，在编辑器中搜索“STYLE_”的第一次匹配。如果您向下滚动，将看到大量以该前缀定义的字符串，用于所有可用样式。一些样式适用于顶点，一些适用于边，一些两者都适用。如您所见，这些定义了作用于元素的视觉属性。
[原文]
The concept of styles and stylesheets in conceptually similar to CSS stylesheets, though note that CSS are actually used in mxGraph, but only to affect global styles in the DOM of the HTML page. Open up the util.mxConstants.js file in your editor and search for the first match on “STYLE_”. If you scroll down you will see a large number of strings defined for all the various styles available with this prefix. Some of styles apply to vertices, some to edges and some to both. As you can see, these define visual attributes on the element they act upon.
- stylesheets /'stalits/ 样式表
- CSS /si es 'es/ 层叠样式表
- DOM /di o 'em/ 文档对象模型
- prefix /'prifks/ 前缀
- attributes /'aetrbjuts/ 属性
[翻译]
mxStylesheet 持有一个对象 styles，这是一个将样式名称映射到样式数组的哈希表：
[原文]
The mxStylesheet holds one object, styles, which is a hashtable mapping style names to an array of styles:
- holds /holdz/ 持有
- hashtable /'haetebl/ 哈希表
- mapping /'maep/ 映射
- array /'re/ 数组
- styles /stalz/ 样式
样式集合中的样式数组 /Style arrays within the styles collection
- collection /k'lekn/ 集合
[翻译]
在上图中，蓝色框表示 mxStyleSheet 中的样式哈希表。字符串 'defaultVertex' 是键，对应一个字符串/值对的数组，这些是实际的样式。请注意，mxGraph 创建了两个默认样式，一个用于顶点，一个用于边。如果您回顾 helloworld 示例，没有样式传递到 insertVertex 或 insertEdge 的可选样式参数。在这种情况下，将使用这些单元的默认样式。
[原文]
In the above image the blue box represents the styles hashtable in mxStyleSheet. The string 'defaultVertex' is the key to an array of string/value pairs, which are the actual styles. Note that mxGraph creates two default styles, one for vertices and one for edges. If you look back to the helloworld example, no style was passed into the optional style parameter of insertVertex or insertEdge. In this case the default style would be used for those cells.
- represents /repr'zents/ 表示
- hashtable /'haetebl/ 哈希表
- default /d'flt/ 默认
- optional /'ɑpnl/ 可选的
- parameter /p'raemtr/ 参数
设置单元的样式/Setting the Style of a Cell
[翻译] 如果您想为单元指定除默认样式外的其他样式，您必须在创建单元时（mxGraph 的 insertVertex 和 insertEdge 都有一个可选参数）或使用 model.setStyle() 将该样式传递给单元。
[原文] If you wanted to specify a style other than the default for a cell, you must pass that new style either to the cell when it is created (mxGraph's insertVertex and insertEdge both have an optional parameter for this) or pass that style to the cell using model.setStyle().
- specify /'spesfa/ 指定
- style /stal/ 样式
- created /kri'etd/ 创建
- optional /'ɑpnl/ 可选的
- pass /paes/ 传递
[翻译]
您传递的样式格式为 stylename。注意，样式名称和键/值对可以以任何顺序出现。以下是展示此概念的示例，改编自我们在 helloworld 中看到的 insertVertex 调用：
[原文]
The style that you pass has the form stylename. ,note that the stylenames and key/value pairs may be in any order. Below are examples to demonstrate this concept, adapting the insertVertex call we saw in helloworld:
- format /'frmaet/ 格式
- stylename /'stalnem/ 样式名称
- key/value /ki 'vaelju/ 键/值
- adapting /'daept/ 改编
- demonstrate /'demnstret/ 展示
[翻译]
1.已创建了一个名为 'ROUNDED' 的新样式，要将其应用于顶点：
[原文]
1.A new style called 'ROUNDED' has been created, to apply this to a vertex:
var v1 = graph.insertVertex(parent, null, 'Hello', 20, 20, 80, 30, 'ROUNDED');
- created /kri'etd/ 创建
- apply /'pla/ 应用
- vertex /'vrtks/ 顶点
[翻译]
2.要创建具有 ROUNDED 样式的新顶点，覆盖描边和填充颜色：
[原文]
2.To create a new vertex with the ROUNDED style, overriding the stroke and fill colors:
var v1 = graph.insertVertex(parent, null, 'Hello', 20, 20, 80, 30, 'ROUNDED;strokeColor=red;fillColor=green');
- overriding /ovr'rad/ 覆盖
- stroke /strok/ 描边
- fill /fl/ 填充
[翻译]
3.要创建没有全局样式但具有本地描边和填充颜色的新顶点：
[原文]
3.To create a new vertex with no global style, but with local stroke and fill colors:
var v1 = graph.insertVertex(parent, null, 'Hello', 20, 20, 80, 30, ';strokeColor=red;fillColor=green');
- global /'ɡlobl/ 全局的
- local /'lokl/ 本地的
- stroke /strok/ 描边
[翻译]
4.要创建使用 defaultVertex 样式但具有本地填充颜色的顶点：
[原文]
4.To create a vertex that uses the defaultVertex style, but a local value of the fill color:
var v1 = graph.insertVertex(parent, null, 'Hello', 20, 20, 80, 30, 'defaultVertex;fillColor=blue');
- default /d'flt/ 默认
- local /'lokl/ 本地的
- fill /fl/ 填充
[翻译]
请注意，在这种情况下必须明确命名默认样式，省略样式会在字符串以分号开始时为单元设置无全局样式。如果字符串开头没有分号，则使用默认样式。
[原文]
Note that default style must be explicitly named in this case, missing the style out sets no global style on the cell when the semi-colon starts the string. If the string starts with no semi-colon, the default style is used.
- explicitly /k'splstli/ 明确地
- semi-colon /'sem koln/ 分号
- default /d'flt/ 默认
- global /'ɡlobl/ 全局的
- style /stal/ 样式
[翻译]
同样，mxGraph 类提供了实用函数，形成访问和更改单元样式的核心 API：
核心 API 函数：
- mxGraph.setCellStyle(style, cells) – 在 begin/end 更新调用内为单元数组设置样式。
- mxGraph.getCellStyle(cell) – 返回指定单元的样式，合并任何本地样式和该单元类型的默认样式。
[原文]
Again, the mxGraph class provides utility functions that form the core API for accessing and changing the styles of cells:
Core API functions:
- mxGraph.setCellStyle(style, cells) – Sets the style for the array of cells, encapsulated in a begin/end update.
- mxGraph.getCellStyle(cell) – Returns the style for the specified cell, merging the styles from any local style and the default style for that cell type.
- utility /ju'tlti/ 实用
- accessing /'aekses/ 访问
- encapsulated /n'kaepsjletd/ 封装
- merging /'mrd/ 合并
- default /d'flt/ 默认
创建新的全局样式/Creating a New Global Style
[翻译]
要创建上述描述的 ROUNDED 全局样式，您可以遵循以下模板创建样式并将其注册到 mxStyleSheet：
[原文] To create the ROUNDED global style described above, you can follow this template to create a style and register it with mxStyleSheet:
var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_OPACITY] = 50;
style[mxConstants.STYLE_FONTCOLOR]= '#774400';
graph.getStylesheet().putCellStyle('ROUNDED',style);
- global /'ɡlobl/ 全局的
- template /'templt/ 模板
- register /'redstr/ 注册
- opacity /o'paesti/ 不透明度
- font /fnt/ 字体
