You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2020/12/02 13:34:12 UTC
[incubator-echarts-doc] 04/06: doc: position -> x, y;
scale -> scaleX, scaleY; origin -> originX, originY.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
commit a8c16a276c085d41e1563a7feebb6d12da11e99c
Author: 100pah <su...@gmail.com>
AuthorDate: Wed Dec 2 20:53:17 2020 +0800
doc: position -> x, y; scale -> scaleX, scaleY; origin -> originX, originY.
---
en/option/partial/zr-graphic.md | 68 +++++++++++++++++++++++++++++++++--------
zh/option/partial/zr-graphic.md | 68 +++++++++++++++++++++++++++++++++--------
2 files changed, 110 insertions(+), 26 deletions(-)
diff --git a/en/option/partial/zr-graphic.md b/en/option/partial/zr-graphic.md
index 7921988..6b87722 100644
--- a/en/option/partial/zr-graphic.md
+++ b/en/option/partial/zr-graphic.md
@@ -941,6 +941,7 @@ Optional values:
{{ use: partial-graphic-transform(
prefix = ${prefix},
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -954,6 +955,7 @@ Optional values:
{{ use: partial-graphic-cpt-location-prop-desc-common(
hv = 'h',
prefix = ${prefix},
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -966,6 +968,7 @@ Optional values:
{{ use: partial-graphic-cpt-location-prop-desc-common(
hv = 'h',
prefix = ${prefix},
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -978,6 +981,7 @@ Optional values:
{{ use: partial-graphic-cpt-location-prop-desc-common(
hv = 'v',
prefix = ${prefix},
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -990,6 +994,7 @@ Optional values:
{{ use: partial-graphic-cpt-location-prop-desc-common(
hv = 'v',
prefix = ${prefix},
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -1030,7 +1035,7 @@ Define the overlap relationship between graphic elements.
##${prefix} name(string) = undefined
-See [diffChildrenByName](~${optionPath}.${hostName}${symbolVisit}polygon.diffChildrenByName).
+See [diffChildrenByName](~${optionPath}.${hostName}${symbolVisit}${type}.diffChildrenByName).
{{ /if }}
##${prefix} info(*)
@@ -1148,13 +1153,13 @@ Optional values:
+ {{ if: ${hv} === 'h' }}`'center'`{{ else }}`'middle'`{{ /if }}: means position the element in the middle of according to its parent.
{{ if: ${hv} === 'h' }}
-Only one between [left](~${optionPath}.${hostName}${symbolVisit}polygon.left) and [right](~${optionPath}.${hostName}${symbolVisit}polygon.right) can work.
+Only one between [left](~${optionPath}.${hostName}${symbolVisit}${type}.left) and [right](~${optionPath}.${hostName}${symbolVisit}${type}.right) can work.
-If [left](~${optionPath}.${hostName}${symbolVisit}polygon.left) or [right](~${optionPath}.${hostName}${symbolVisit}polygon.right) is specified, positioning attributes in [shape](~${optionPath}.${hostName}${symbolVisit}polygon.shape) (like `x`, `cx`) will not work.
+If [left](~${optionPath}.${hostName}${symbolVisit}${type}.left) or [right](~${optionPath}.${hostName}${symbolVisit}${type}.right) is specified, positioning attributes in [shape](~${optionPath}.${hostName}${symbolVisit}${type}.shape) (like `x`, `cx`) will not work.
{{ else }}
-Only one between [top](~${optionPath}.${hostName}${symbolVisit}polygon.top) and [bottom](~${optionPath}.${hostName}${symbolVisit}polygon.bottom) can work.
+Only one between [top](~${optionPath}.${hostName}${symbolVisit}${type}.top) and [bottom](~${optionPath}.${hostName}${symbolVisit}${type}.bottom) can work.
-If [top](~${optionPath}.${hostName}${symbolVisit}polygon.top) or [bottom](~${optionPath}.${hostName}${symbolVisit}polygon.bottom) is specified, positioning attributes in [shape](~${optionPath}.${hostName}${symbolVisit}polygon.shape) (like `y`, `cy`) will not work.
+If [top](~${optionPath}.${hostName}${symbolVisit}${type}.top) or [bottom](~${optionPath}.${hostName}${symbolVisit}${type}.bottom) is specified, positioning attributes in [shape](~${optionPath}.${hostName}${symbolVisit}${type}.shape) (like `y`, `cy`) will not work.
{{ /if }}
@@ -1292,9 +1297,21 @@ Whether draw clockwise.
{{ target: partial-graphic-transform }}
-##${prefix} position(Array) = [0, 0]
+##${prefix} x(number) = 0
{{ use: partial-graphic-transform-common-desc(
+ type = ${type},
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+##${prefix} y(number) = 0
+
+{{ use: partial-graphic-transform-common-desc(
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -1305,6 +1322,29 @@ Whether draw clockwise.
##${prefix} rotation(number) = 0
{{ use: partial-graphic-transform-common-desc(
+ type = ${type},
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+##${prefix} scaleX(number) = 1
+
+{{ use: partial-graphic-transform-common-desc(
+ type = ${type},
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+##${prefix} scaleY(number) = 1
+
+{{ use: partial-graphic-transform-common-desc(
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -1312,9 +1352,10 @@ Whether draw clockwise.
symbolDeclare = ${symbolDeclare}
) }}
-##${prefix} scale(Array) = [1, 1]
+##${prefix} originX(number) = 0
{{ use: partial-graphic-transform-common-desc(
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -1322,9 +1363,10 @@ Whether draw clockwise.
symbolDeclare = ${symbolDeclare}
) }}
-##${prefix} origin(number) = [0, 0]
+##${prefix} originY(number) = 0
{{ use: partial-graphic-transform-common-desc(
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -1337,15 +1379,15 @@ Whether draw clockwise.
{{ target: partial-graphic-transform-common-desc }}
`2D transform` can be applied to graphic elements, including:
-+ [position](~${optionPath}.${hostName}${symbolVisit}polygon.position): `[horizontal translate offset, vertical translate offset]`, `[0, 0]` by default. Positive value means translate towards right or bottom.
-+ [rotation](~${optionPath}.${hostName}${symbolVisit}polygon.rotation): Rotation in radian, `0` by default. Positive when anticlockwise.
-+ [scale](~${optionPath}.${hostName}${symbolVisit}polygon.scale): `[horizontal scale factor, vertical scale factor]`, `[1, 1]` by default.
++ Translate by [x](~${optionPath}.${hostName}${symbolVisit}${type}.x) and [y](~${optionPath}.${hostName}${symbolVisit}${type}.y): `0` by default. Positive value means translate towards right or bottom.
++ Rotate by [rotation](~${optionPath}.${hostName}${symbolVisit}${type}.rotation): in radian, `0` by default. Positive when anticlockwise.
++ Scale by [scaleX](~${optionPath}.${hostName}${symbolVisit}${type}.scaleX) and [scaleY](~${optionPath}.${hostName}${symbolVisit}${type}.scaleY): `1` by default. The value means the ratio of scale.
-[origin](~${optionPath}.${hostName}${symbolVisit}polygon.origin) specifies the origin point of rotation and scaling, `[0, 0]` by default.
+[originX](~${optionPath}.${hostName}${symbolVisit}${type}.originX) and [originY](~${optionPath}.${hostName}${symbolVisit}${type}.originY) specifies the origin point of rotation and scaling, `0`, `0` by default.
Notice:
+ The coordinates specified in the transform attribute above are relative to the `[0, 0]` of the parent element (that is, [group](~${optionPath}.${hostName}${symbolVisit}group) or the root canvas). Thus we are able to [group](~${optionPath}.${hostName}${symbolVisit}group) multiple elements, and [groups](~${optionPath}.${hostName}${symbolVisit}group) can be nested.
-+ The order that the transform attributes are applied to a single graphic element is: Firstly, `rotation`, then, `scale`, finally, `position`.
++ The order that the transform attributes are applied to a single graphic element is: firstly, rotate (by `rotation`); then, scale (by `scaleX`, `scaleY`); finally, translate (by `x`, `y`).
diff --git a/zh/option/partial/zr-graphic.md b/zh/option/partial/zr-graphic.md
index 29b3b74..185ab0e 100644
--- a/zh/option/partial/zr-graphic.md
+++ b/zh/option/partial/zr-graphic.md
@@ -930,6 +930,7 @@ setOption 时指定本次对该图形元素的操作行为。
{{ use: partial-graphic-transform(
prefix = ${prefix},
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -943,6 +944,7 @@ setOption 时指定本次对该图形元素的操作行为。
{{ use: partial-graphic-cpt-location-prop-desc-common(
hv = 'h',
prefix = ${prefix},
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -955,6 +957,7 @@ setOption 时指定本次对该图形元素的操作行为。
{{ use: partial-graphic-cpt-location-prop-desc-common(
hv = 'h',
prefix = ${prefix},
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -967,6 +970,7 @@ setOption 时指定本次对该图形元素的操作行为。
{{ use: partial-graphic-cpt-location-prop-desc-common(
hv = 'v',
prefix = ${prefix},
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -979,6 +983,7 @@ setOption 时指定本次对该图形元素的操作行为。
{{ use: partial-graphic-cpt-location-prop-desc-common(
hv = 'v',
prefix = ${prefix},
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -1019,7 +1024,7 @@ z 方向的高度，决定层叠关系。
##${prefix} name(string) = undefined
-参见 [diffChildrenByName](~${optionPath}.${hostName}${symbolVisit}polygon.diffChildrenByName)。
+参见 [diffChildrenByName](~${optionPath}.${hostName}${symbolVisit}${type}.diffChildrenByName)。
{{ /if }}
##${prefix} info(*)
@@ -1134,13 +1139,13 @@ chart.on('click', function (params) {
+ {{ if: ${hv} === 'h' }}`'center'`{{ else }}`'middle'`{{ /if }}：表示自动居中。
{{ if: ${hv} === 'h' }}
-[left](~${optionPath}.${hostName}${symbolVisit}polygon.left) 和 [right](~${optionPath}.${hostName}${symbolVisit}polygon.right) 只有一个可以生效。
+[left](~${optionPath}.${hostName}${symbolVisit}${type}.left) 和 [right](~${optionPath}.${hostName}${symbolVisit}${type}.right) 只有一个可以生效。
-如果指定 [left](~${optionPath}.${hostName}${symbolVisit}polygon.left) 或 [right](~${optionPath}.${hostName}${symbolVisit}polygon.right)，则 [shape](~${optionPath}.${hostName}${symbolVisit}polygon.shape) 里的 `x`、`cx` 等定位属性不再生效。
+如果指定 [left](~${optionPath}.${hostName}${symbolVisit}${type}.left) 或 [right](~${optionPath}.${hostName}${symbolVisit}${type}.right)，则 [shape](~${optionPath}.${hostName}${symbolVisit}${type}.shape) 里的 `x`、`cx` 等定位属性不再生效。
{{ else }}
-[top](~${optionPath}.${hostName}${symbolVisit}polygon.top) 和 [bottom](~${optionPath}.${hostName}${symbolVisit}polygon.bottom) 只有一个可以生效。
+[top](~${optionPath}.${hostName}${symbolVisit}${type}.top) 和 [bottom](~${optionPath}.${hostName}${symbolVisit}${type}.bottom) 只有一个可以生效。
-如果指定 [top](~${optionPath}.${hostName}${symbolVisit}polygon.top) 或 [bottom](~${optionPath}.${hostName}${symbolVisit}polygon.bottom)，则 [shape](~${optionPath}.${hostName}${symbolVisit}polygon.shape) 里的 `y`、`cy` 等定位属性不再生效。
+如果指定 [top](~${optionPath}.${hostName}${symbolVisit}${type}.top) 或 [bottom](~${optionPath}.${hostName}${symbolVisit}${type}.bottom)，则 [shape](~${optionPath}.${hostName}${symbolVisit}${type}.shape) 里的 `y`、`cy` 等定位属性不再生效。
{{ /if }}
@@ -1278,9 +1283,21 @@ chart.on('click', function (params) {
{{ target: partial-graphic-transform }}
-##${prefix} position(Array) = [0, 0]
+##${prefix} x(number) = 0
{{ use: partial-graphic-transform-common-desc(
+ type = ${type},
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+##${prefix} y(number) = 0
+
+{{ use: partial-graphic-transform-common-desc(
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -1291,6 +1308,29 @@ chart.on('click', function (params) {
##${prefix} rotation(number) = 0
{{ use: partial-graphic-transform-common-desc(
+ type = ${type},
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+##${prefix} scaleX(number) = 1
+
+{{ use: partial-graphic-transform-common-desc(
+ type = ${type},
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+##${prefix} scaleY(number) = 1
+
+{{ use: partial-graphic-transform-common-desc(
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -1298,9 +1338,10 @@ chart.on('click', function (params) {
symbolDeclare = ${symbolDeclare}
) }}
-##${prefix} scale(Array) = [1, 1]
+##${prefix} originX(number) = 0
{{ use: partial-graphic-transform-common-desc(
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -1308,9 +1349,10 @@ chart.on('click', function (params) {
symbolDeclare = ${symbolDeclare}
) }}
-##${prefix} origin(number) = [0, 0]
+##${prefix} originY(number) = 0
{{ use: partial-graphic-transform-common-desc(
+ type = ${type},
optionPath = ${optionPath},
usageType = ${usageType},
hostName = ${hostName},
@@ -1323,15 +1365,15 @@ chart.on('click', function (params) {
{{ target: partial-graphic-transform-common-desc }}
图形元素可以进行标准的 `2D transform`，其中包含：
-+ [平移（position）](~${optionPath}.${hostName}${symbolVisit}polygon.position)：默认值是 `[0, 0]`。表示 `[横向平移的距离, 纵向平移的距离]`。右和下为正值。
-+ [旋转（rotation）](~${optionPath}.${hostName}${symbolVisit}polygon.rotation)：默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。
-+ [缩放（scale）](~${optionPath}.${hostName}${symbolVisit}polygon.scale)：默认值是 `[1, 1]`。表示 `[横向缩放的倍数, 纵向缩放的倍数]`。
++ 平移（依照 [x](~${optionPath}.${hostName}${symbolVisit}${type}.x) 和 [y](~${optionPath}.${hostName}${symbolVisit}${type}.y)）：默认值都是 `0`。右和下为正值。
++ 旋转（依照 [rotation](~${optionPath}.${hostName}${symbolVisit}${type}.rotation)）：默认值是 `0`。表示旋转的弧度值。正值表示逆时针旋转。
++ 缩放（依照 [scaleX](~${optionPath}.${hostName}${symbolVisit}${type}.scaleX) 和 [scaleY](~${optionPath}.${hostName}${symbolVisit}${type}.scaleY)）：默认值都是 `1`。这个值表示缩放的倍数。
-其中，[origin](~${optionPath}.${hostName}${symbolVisit}polygon.origin) 指定了旋转和缩放的中心点，默认值是 `[0, 0]`。
+另外，[originX](~${optionPath}.${hostName}${symbolVisit}${type}.originX) 和 [originY](~${optionPath}.${hostName}${symbolVisit}${type}.originY) 指定了旋转和缩放的中心点，默认值都是 `0`。
注意：
+ transform 中设定的坐标，都是相对于图形元素的父元素的（即 [group](~${optionPath}.${hostName}${symbolVisit}group) 元素或者顶层画布）的 `[0, 0]` 点。也就是说，我们可以使用 [group](~${optionPath}.${hostName}${symbolVisit}group) 来组织多个图形元素，并且 [group](~${optionPath}.${hostName}${symbolVisit}group) 可以嵌套。
-+ 对于一个图形元素，`transform` 执行的顺序是：先缩放（scale），再旋转（rotation），再平移（position）。
++ 对于一个图形元素，`transform` 执行的顺序是：先缩放（依照 `scaleX`，`scaleY`），再旋转（依照 `rotation`），再平移（依照 `x`，`y`）。
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org