This is an automated email from the ASF dual-hosted git repository. sushuang pushed a commit to branch release in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
commit 1b86d1f560ec503ccfc3bacdb86d58d443790859 Author: SHUANG SU <[email protected]> AuthorDate: Fri Sep 27 23:22:03 2019 +0800 feature: add doc for echarts.graphic.registerShape and extendPath and getShapeClass. --- cn/api/graphic.md | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ en/api/graphic.md | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 177 insertions(+) diff --git a/cn/api/graphic.md b/cn/api/graphic.md index 2f4eff7..5cb3983 100644 --- a/cn/api/graphic.md +++ b/cn/api/graphic.md @@ -4,6 +4,95 @@ 图形相关帮助方法。 + + +### extendShape(Function) + +创建一个新的 shape class。 + +```js +( + opts: Object +) => zrender.graphic.Path +``` + +更多的关于参数 `opts` 的细节，请参阅 [zrender.graphic.Path](https://ecomfe.github.io/zrender-doc/public/api.html#zrenderpath)。 + + +### registerShape(Function) + +注册一个开发者定义的 shape class。 + +```js +( + name: string, + ShapeClass: zrender.graphic.Path +) +``` + +`ShapeClass` 须用 [echarts.graphic.extendShape](~echarts.graphic.extendShape) 生成。 +注册后，这个 class 可以用 [echarts.graphic.getShapeClass](~echarts.graphic.getShapeClass) 方法得到。 +`registerShape` 会覆盖已注册的 class，如果用相同的 `name` 的话。 +注册的 class，可以被用于 [自定义系列（custom series）](option.html#series-custom) 和 +[图形组件（graphic component）](option.html#graphic)，声明 `{type: name}` 即可。 + +例如： +```js +var MyShape = echarts.graphic.extendShape({ + shape: { + x: 0, + y: 0, + width: 0, + height: 0 + }, + buildPath: function (ctx, shape) { + ctx.moveTo(shape.x, shape.y); + ctx.lineTo(shape.x + shape.width, shape.y); + ctx.lineTo(shape.x, shape.y + shape.height); + ctx.lineTo(shape.x + shape.width, shape.y + shape.height); + ctx.closePath(); + } +}); +echarts.graphic.registerShape('myCustomShape', MyShape); + +var option = { + series: { + type: 'custom', + coordinateSystem: 'none', + renderItem: function (params, api) { + return { + type: 'myCustomShape', + shape: { + x: api.value(0), + y: api.value(1), + width: api.value(2), + height: api.value(3) + }, + style: { + fill: 'red' + } + }; + }, + data: [[10, 20, 30, 40]] + } +}; +``` + + +### getShapeClass(Function) + +得到一个 [注册](~echarts.graphic.registerShape) 好的 class。 + +```js +( + name: String +) => zrender.graphic.Path +``` + +这些内置 shape class 会被默认预先注册进去: +`'circle'`, `'sector'`, `'ring'`, `'polygon'`, `'polyline'`, `'rect'`, `'line'`, `'bezierCurve'`, `'arc'`. + + ### clipPointsByRect(Function) 输入一组点，和一个矩形，返回被矩形截取过的点。 diff --git a/en/api/graphic.md b/en/api/graphic.md index d444e0d..4d1215e 100644 --- a/en/api/graphic.md +++ b/en/api/graphic.md @@ -4,6 +4,94 @@ Util methods about graphics. + +### extendShape(Function) + +Create a new shape class. + +```js +( + opts: Object +) => zrender.graphic.Path +``` + +The details of the parameter `opts` can be checked in [zrender.graphic.Path](https://ecomfe.github.io/zrender-doc/public/api.html#zrenderpath) + + +### registerShape(Function) + +Register a user defined shape. + +```js +( + name: string, + ShapeClass: zrender.graphic.Path +) +``` + +The `ShapeClass` should be generated by [echarts.graphic.extendShape](~echarts.graphic.extendShape). +Then the shape class can be fetched by [echarts.graphic.getShapeClass](~echarts.graphic.getShapeClass) +`registerShape` will overwrite the registered shapes, including the registered built-in shapes, if using the same `name`. +The registered shapes can be used in [custom series](option.html#series-custom) and +[graphic component](option.html#graphic) by declaring `{type: name}`. + +For example: +```js +var MyShape = echarts.graphic.extendShape({ + shape: { + x: 0, + y: 0, + width: 0, + height: 0 + }, + buildPath: function (ctx, shape) { + ctx.moveTo(shape.x, shape.y); + ctx.lineTo(shape.x + shape.width, shape.y); + ctx.lineTo(shape.x, shape.y + shape.height); + ctx.lineTo(shape.x + shape.width, shape.y + shape.height); + ctx.closePath(); + } +}); +echarts.graphic.registerShape('myCustomShape', MyShape); + +var option = { + series: { + type: 'custom', + coordinateSystem: 'none', + renderItem: function (params, api) { + return { + type: 'myCustomShape', + shape: { + x: api.value(0), + y: api.value(1), + width: api.value(2), + height: api.value(3) + }, + style: { + fill: 'red' + } + }; + }, + data: [[10, 20, 30, 40]] + } +}; +``` + + +### getShapeClass(Function) + +Get the [registered](~echarts.graphic.registerShape) shape class. + +```js +( + name: String +) => zrender.graphic.Path +``` + +Some built-in shapes are registered by default: +`'circle'`, `'sector'`, `'ring'`, `'polygon'`, `'polyline'`, `'rect'`, `'line'`, `'bezierCurve'`, `'arc'`. + + ### clipPointsByRect(Function) Clip the given points by the given rectangular. --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
