en/api/graphic.md

{{ target: echarts-graphic }}

## graphic

Util methods about graphics.


### extendShape(Function)

Create a new shape class.

```ts
(
    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.

```ts
(
    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:
```ts
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.

```ts
(
    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.

```ts
(
    // The points to be clipped, like [[23, 44], [12, 15], ...].
    points: Array.<Array.<number>>,
    // The rectangular that is used to clip points.
    rect: {
        x: number,
        y: number,
        width: number,
        height: number
    }
) => Array.<Array.<number>> // The result Points.
```

### clipRectByRect(Function)

Clip the first input rectangular by the second input rectangular.

```ts
(
    // The rectangular to be clipped.
    targetRect: {
        x: number,
        y: number,
        width: number,
        height: number
    },
    // The rectangular that is used to clip the first  rectangular.
    rect: {
        x: number,
        y: number,
        width: number,
        height: number
    }
) => { // The result rectangular.
    x: number,
    y: number,
    width: number,
    height: number
}
```

Notice: if the rect is totally clipped, returns `undefined`.