@cataract6545/tmui/components/tm-render/tmCv/shape/roundRect.ts

tm-vuetify是一个新势力由主题驱动的UI组件库,相比其它优势大,组件全,设计趋势紧跟未来。具有主题生成，主题实时切换，暗黑实时切换,lottie动画,图表等新颖功能,tmui TMUI

import { tmCv } from "..";
import { shapeStyle } from "../interface";
import { Shape } from "../shape";
interface roundRect extends shapeStyle {
    radius: [number, number, number, number]
}
export class tmRoundRect extends Shape {
    radius: [number, number, number, number] = [0, 0, 0, 0]
    constructor(tmcv: tmCv, arg: Partial<roundRect>) {
        super(tmcv, arg)
        this.radius = arg?.radius ?? this.radius;
    }
    draw(): this {
        if (!this.canvas.ctx) return this;
        let ctx = this.canvas.ctx;
        const x = this.x;
        const y = this.y;
        const width = this.width;
        const height = this.height;
        const fillStyle = this.fillStyle;
        const strokeStyle = this.strokeStyle;
        const lineWidth = this.lineWidth
        const radius: [number, number, number, number] = this.radius
        const topLeftRadius = radius[0];
        const topRightRadius = radius[1];
        const bottomLeftRadius = radius[3];
        const bottomRightRadius = radius[2];
        ctx.beginPath();
        ctx.moveTo(x + topLeftRadius, y);
        ctx.lineTo(x + width - topRightRadius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + topRightRadius);
        ctx.lineTo(x + width, y + height - bottomRightRadius);
        ctx.quadraticCurveTo(x + width, y + height, x + width - bottomRightRadius, y + height);
        ctx.lineTo(x + bottomLeftRadius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - bottomLeftRadius);
        ctx.lineTo(x, y + topLeftRadius);
        ctx.quadraticCurveTo(x, y, x + topLeftRadius, y);
        ctx.closePath();

        if (ctx.setFillStyle) {
            ctx.setFillStyle(fillStyle)
            ctx.setLineWidth(lineWidth)
            ctx.setStrokeStyle(strokeStyle)
        } else {
            ctx.fillStyle = fillStyle;
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = strokeStyle;
        }

        ctx.fill()
        ctx.stroke()
        return this;
    }
}