V5 如何根据坐标自行绘图

[davy3179]

问题描述

V4版本根据A,B,C,D坐标自行绘图，V5 如何实现

V4实现代码如下

PieChart.prototype.drawLinkArea = function () {
    const canvas = this.chart.getCanvas();
    const container = this.chart.backgroundGroup;
    const view1_coord = this.view1.getCoordinate();
    const center = view1_coord.getCenter();
    const radius = view1_coord.getRadius();
    const interval_geom = this.view2.geometries[0];
    const interval_container = interval_geom.container;
    const interval_bbox = interval_container.getBBox();
    const view2_coord = this.view2.getCoordinate();
    // area points
    const pie_start1 = {
        x: center.x + Math.cos(Math.PI * 2 - this.otherOffsetAngle) * radius,
        y: center.y + Math.sin(Math.PI * 2 - this.otherOffsetAngle) * radius,
    };
    const pie_start2 = {
        x: center.x + Math.cos(this.otherOffsetAngle) * radius,
        y: center.y + Math.sin(this.otherOffsetAngle) * radius,
    };
    const interval_end1 = {
        x: interval_bbox.minX,
        y: view2_coord.end.y,
    };
    const interval_end2 = {
        x: interval_bbox.minX,
        y: view2_coord.start.y,
    };
    const path = [
        ['M', pie_start1.x, pie_start1.y],
        ['L', pie_start2.x, pie_start2.y],
        ['L', interval_end2.x, interval_end2.y],
        ['L', interval_end1.x, interval_end1.y],
        ['Z'],
    ];
    container.clear();
    if (this.otherOffsetAngle > 0) {
        container.addShape('path', {
            attrs: {
                path,
                fill: '#e9f4fe',
            },
        });

    }
    canvas.draw();
};

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

补充说明（可选）

No response

[hustcc]

其实和这个 demo 的能力有点像，但是现在官网确实没有做这个案例了。

https://g2.antv.antgroup.com/examples/annotation/connector#revenue-flow-waterfall

有兴趣可以尝试一下，来一个 PR。