persagy-web-doc/docs/.vuepress/components/engine/gradient/GradRect.ts

import { SGraphItem } from "@persagy-web/graph/lib";
import { SColor, SLinearGradient, SPainter, SRadialGradient, SRect } from "@persagy-web/draw/lib";

/**
 * 渐变
 *
 * @author 郝洁 <haojie@persagy.com>
 */
export class GradRect extends SGraphItem {
    minX = 0;
    minY = 0;
    maxY = 1000;
    maxX = 1000;
    gradient: SRadialGradient | SLinearGradient | null = null;

    constructor(parent: SGraphItem | null, grad: SRadialGradient | SLinearGradient) {
        super(parent);
        this.gradient = grad;
        this.gradient.addColorStop(0, new SColor('#ff483b'));
        this.gradient.addColorStop(0.5, new SColor('#04ff00'));
        this.gradient.addColorStop(1, new SColor('#3d4eff'));
    }

    /**
     * 矩形数据类型绘制
     */
    boundingRect() {
        return new SRect(
            this.minX,
            this.minY,
            this.maxX - this.minX,
            this.maxY - this.minY
        );
    }

    onDraw(painter: SPainter) {
        painter.pen.color = SColor.Black;
        painter.brush.gradient = this.gradient;
        painter.drawRect(0, 0, 1000, 1000);
        if (this.gradient instanceof SRadialGradient) {
            painter.brush.color = SColor.Transparent;
            painter.drawCircle(this.gradient.x1, this.gradient.y1, this.gradient.r1);
            painter.drawCircle(this.gradient.x2, this.gradient.y2, this.gradient.r2);
        }
    }
}