import { _decorator, Color, Component, Graphics, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('NewComponent')
export class NewComponent extends Component {
    
    @property
    width: number = 400;  // 初始宽度

    @property
    height: number = 500;  // 高度

    @property
    cornerRadius: number = 100;  // 圆角半径

    graphics: Graphics = null;

    
    start() {

        this.graphics = this.node.getComponent(Graphics);

        // const g = this.getComponent(Graphics);
        // g.lineWidth = 10;
        // g.fillColor.fromHEX('#ff0000');
        // g.moveTo(-40, 0);
        // g.lineTo(0, -80);
        // g.lineTo(40, 0);
        // g.lineTo(0, 80);
        // g.close();
        // g.stroke();
        // g.fill();
        this.graphics.clear();

        const h = this.height;
        const r = this.cornerRadius;

        // // 绘制渐变色
        // this.graphics.fillGradientRect(-width/2, -h/2, width, h, gradient);

        // 绘制圆角矩形
        this.graphics.fillColor.fromHEX('#ff0000');
        console.log('hhhhhhhhhhhhhhh'+h)
        this.graphics.roundRect(-this.width/2, -h/2, this.width, h, r);
        this.graphics.stroke();
        this.graphics.fill();


    }
 
   
    // drawRoundedRect() {
    //     const h = this.height;
    //     const r = this.cornerRadius;
    //     this.graphics.clear();

    //     // // 绘制渐变色
    //     // const gradient = new GraphicsGradient([Color.WHITE, Color.BLACK], [0, 1]);
    //     // this.graphics.fillGradientRect(-width/2, -h/2, width, h, gradient);

    //     // 绘制圆角矩形
    //     this.graphics.fillColor.fromHEX('#ff0000');
    //     this.graphics.roundRect(-width/2, -h/2, width, h, r);
    //     this.graphics.stroke();
    //     this.graphics.fill();
    // }

    // // 使用此函数设置矩形宽度
    // setRectWidth(value) {
    //     this.drawRoundedRect(value);
    // }
    update(deltaTime: number) {
        
    }
}