[echarts-doc] 01/02: feat(border): add new border options brought by v5.(zh)

[wa...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

wangzx pushed a commit to branch feat/new-border-options
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git

commit 9c1736b674aa05f9d3817c49ee26b43b85b428f7
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Mon Mar 8 16:43:26 2021 +0800

    feat(border): add new border options brought by v5.(zh)
---
 zh/option/partial/item-style.md        |  11 +--
 zh/option/partial/line-border-style.md | 150 +++++++++++++++++++++++++++++++++
 zh/option/partial/line-style.md        |  15 ++--
 zh/option/partial/text-style.md        |  17 ++++
 4 files changed, 178 insertions(+), 15 deletions(-)

diff --git a/zh/option/partial/item-style.md b/zh/option/partial/item-style.md
index c009c10..ca08858 100644
--- a/zh/option/partial/item-style.md
+++ b/zh/option/partial/item-style.md
@@ -35,11 +35,12 @@ ${name}图形的描边颜色。支持的颜色格式同 `color`，不支持回
 
 ${name}描边线宽。为 0 时无描边。
 
-#${prefix} borderType(string) = 'solid'
-
-<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
-
-柱条的描边类型，默认为实线，支持 `'solid'`, `'dashed'`, `'dotted'`。
+{{ use: partial-line-border-style(
+    prefix = ${prefix},
+    name = ${name},
+    type = 'border',
+    defaultType = ${defaultType}
+) }}
 
 {{ use: partial-style-shadow-opacity(
     prefix = ${prefix},
diff --git a/zh/option/partial/line-border-style.md b/zh/option/partial/line-border-style.md
new file mode 100644
index 0000000..3dbc80e
--- /dev/null
+++ b/zh/option/partial/line-border-style.md
@@ -0,0 +1,150 @@
+{{ target: partial-line-border-style }}
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderType(string|number|Array) = ${defaultType|default("'solid'")}
+{{ elif: ${type} === 'text'  }}
+#${prefix} textBorderType(string|number|Array) = ${defaultType|default("'solid'")}
+{{ else }}
+#${prefix} type(string|number|Array) = ${defaultType|default("'solid'")}
+{{ /if }}
+
+<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
+
+{{ if: ${type} === 'border' }}
+${name}描边类型。
+{{ elif: ${type} === 'text'  }}
+文字本身的描边类型。
+{{ else }}
+线的类型。
+{{ /if }}
+
+可选：
++ `'solid'`
++ `'dashed'`
++ `'dotted'`
+
+自 `v5.0.0` 开始，也可以是 `number` 或者 `number` 数组，用以指定线条的 [dash array](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray)，配合 {{ if: ${type} === 'border' }}
+`borderDashOffset`
+{{ elif: ${type} === 'text'  }}
+`textBorderDashOffset`
+{{ else }}
+`dashOffset`
+{{ /if }} 可实现更灵活的虚线效果。
+
+例如：
+```js
+{
+	{{ if: ${type} === 'border' }}borderType{{ elif: ${type} === 'text'  }}textBorderType{{ else }}type{{ /if }}: [5, 10],
+	{{ if: ${type} === 'border' }}borderDashOffset{{ elif: ${type} === 'text'  }}textBorderDashOffset{{ else }}dashOffset{{ /if }}: 5
+}
+```
+
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderDashOffset(number) = 0
+{{ elif: ${type} === 'text'  }}
+#${prefix} textBorderDashOffset(number) = 0
+{{ else }}
+#${prefix} dashOffset(number) = 0
+{{ /if }}
+
+{{ use: partial-version(
+    version = "5.0.0"
+) }}
+
+<ExampleUIControlNumber min="0" step="1" default="0" />
+
+用于设置虚线的偏移量，可搭配 {{ if: ${type} === 'border' }}
+`borderType`
+{{ elif: ${type} === 'text'  }}
+`textBorderType`
+{{ else }}
+`type`
+{{ /if }} 指定 dash array 实现灵活的虚线效果。
+
+更多详情可以参考 MDN [lineDashOffset](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)。
+
+
+{{ if: !${noCap} }}
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderCap(string) = 'butt'
+{{ else }}
+#${prefix} cap(string) = 'butt'
+{{ /if }}
+
+{{ use: partial-version(
+    version = "5.0.0"
+) }}
+
+<ExampleUIControlEnum default="butt" options="butt,round,square" />
+
+用于指定线段末端的绘制方式，可以是：
++ `'butt'`: 线段末端以方形结束。
++ `'round'`: 线段末端以圆形结束。
++ `'square'`: 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
+
+默认值为 `'butt'`。 更多详情可以参考 MDN [lineCap](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineCap)。
+
+{{ /if }}
+
+
+{{ if: !${noJoin} }}
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderJoin(string) = 'bevel'
+{{ else }}
+#${prefix} join(string) = 'bevel'
+{{ /if }}
+
+{{ use: partial-version(
+    version = "5.0.0"
+) }}
+
+<ExampleUIControlEnum default="bevel" options="bevel,round,miter" />
+
+用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。
+
+可以是：
++ `'bevel'`: 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
++ `'round'`: 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
++ `'miter'`: 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 {{ if: ${type} === 'border' }}
+`borderMiterLimit`
+{{ else }}
+`miterLimit`
+{{ /if }} 属性看到效果。
+
+默认值为 `'bevel'`。 更多详情可以参考 MDN [lineJoin](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineJoin)。
+
+{{ /if }}
+
+
+{{ if: !${noMiterLimit} }}
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderMiterLimit(number) = 10
+{{ else }}
+#${prefix} miterLimit(number) = 10
+{{ /if }}
+
+{{ use: partial-version(
+    version = "5.0.0"
+) }}
+
+<ExampleUIControlNumber min="0" step="1" default="10" />
+
+用于设置斜接面限制比例。只有当 {{ if: ${type} === 'border' }}
+`borderJoin`
+{{ else }}
+`join`
+{{ /if }} 为 `miter` 时，{{ if: ${type} === 'border' }}
+`borderMiterLimit`
+{{ else }}
+`miterLimit`
+{{ /if }} 才有效。
+
+默认值为 `10`。负数、`0`、`Infinity` 和 `NaN` 均会被忽略。
+
+更多详情可以参考 MDN [miterLimit](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/miterLimit)。
+
+{{ /if }}
\ No newline at end of file
diff --git a/zh/option/partial/line-style.md b/zh/option/partial/line-style.md
index 340b26d..3e5e2a5 100644
--- a/zh/option/partial/line-style.md
+++ b/zh/option/partial/line-style.md
@@ -23,16 +23,11 @@ ${name}线的颜色。{{ if: ${useColorPalatte} }} 默认从[option.color 调色
 
 ${name}线宽。
 
-#${prefix} type(string) = ${defaultType|default('solid')}
-
-<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
-
-${name}线的类型。
-
-可选：
-+ `'solid'`
-+ `'dashed'`
-+ `'dotted'`
+{{ use: partial-line-border-style(
+    prefix = ${prefix},
+    name = ${name},
+    defaultType = ${defaultType}
+) }}
 
 {{ use: partial-style-shadow-opacity(
     prefix = ${prefix},
diff --git a/zh/option/partial/text-style.md b/zh/option/partial/text-style.md
index 98dff0a..5624c79 100644
--- a/zh/option/partial/text-style.md
+++ b/zh/option/partial/text-style.md
@@ -258,6 +258,13 @@ backgroundColor: {
 
 文字块边框宽度。
 
+{{ use: partial-line-border-style(
+    prefix = ${prefix},
+    type = 'border',
+    name = '文字块边框',
+    defaultType = ${defaultType}
+) }}
+
 #${prefix} borderRadius(number|Array) = 0
 
 <ExampleUIControlVector min="0" dims="LT,RT, RB, LB"  />
@@ -335,6 +342,16 @@ backgroundColor: {
 
 文字本身的描边宽度。
 
+{{ use: partial-line-border-style(
+    prefix = ${prefix},
+    name = ${name},
+    type = 'text',
+    defaultType = ${defaultType},
+    noCap = true,
+    noJoin = true,
+    noMiterLimit = true
+) }}
+
 #${prefix} textShadowColor(Color) = 'transparent'
 
 <ExampleUIControlColor default="#000" />


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org