表格、统计图实现思路

表格、统计图、LOGO 等绘制类实现思路相通，均采用 Konva 自定义图形 实现，底层是通过 canvas API 手动绘制想要图案，如下示例：

const logo = new Konva.Shape({
    x: 0,
    y: 0,
    fill: undefined,
    /** 自定义LOGO实现方法 */
    sceneFunc: this.getLogoOptions.bind(this),
    // 绘制事件响应区域
    hitFunc: this.hitFunc,
});


/** 辅助函数 - 绘制 logo */
private getLogoOptions(ctx: Konva.Context, shape: Konva.Shape) {
    const { width, height } = shape.size();
    // 定义圆弧大小
    const radius = 10;
    // 绘制矩形
    ctx.beginPath();
    ctx.fillStyle = this.nodeFillColor;
    ctx.moveTo(radius, 0);
    ctx.lineTo(width - radius, 0);
    // 绘制右上圆角
    ctx.arc(width - radius, radius, radius, Math.PI * 1.5, Math.PI * 2);
    ctx.lineTo(width, height - radius);
    // 绘制右下圆角
    ctx.arc(width - radius, height - radius, radius, 0, Math.PI * 0.5);
    ctx.lineTo(radius, height);
    // 绘制左下圆角
    ctx.arc(radius, height - radius, radius, Math.PI * 0.5, Math.PI);
    ctx.lineTo(0, radius);
    // 绘制左上圆角
    ctx.arc(radius, radius, radius, Math.PI, Math.PI * 1.5);
    ctx.closePath();
    ctx.fill();

    // 绘制内部文字 - P
    ctx.fillStyle = this.nodeTextColor;
    ctx.font = "bold 60px Arial";
    ctx.textBaseline = "bottom";
    ctx.fillText(
        "P",
        width * 0.5 - ctx.measureText("p").width / 2,
        height * 0.5 + ctx.measureText("p").fontBoundingBoxAscent / 2
    );

    ctx.fillStrokeShape(shape);
}