yinmi_h5_edit/assets/test.ts

import { _decorator, Color, Component, EventTouch, Graphics, Label, Mask, Node, size, Size, Sprite, UITransform, Vec2, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('test')
export class test extends Component {
    @property(Node) draw_bg:Node = null;
    @property(Node) btn_type:Node = null;
    @property(Node) btn_clear:Node = null;
    @property(Node) bottom:Node = null;
    @property(Mask) top_mask:Mask = null;
    @property(Node) top:Node = null;
    private is_circle:boolean = true;
    private bottom_size:Size = new Size(0,0);
    private top_mask_graphics: Graphics = null;
    private smear_rect_size:Size = new Size(40, 50);
    private smear_circle_size:number = 45;
    private hide_points = []
    private hide_points_total_num:number = 0
    start() {
        this.bottom_size = this.bottom.getComponent(UITransform).contentSize
        this.top_mask_graphics = this.top_mask.getComponent(Graphics)
        this.top.getComponent(UITransform).contentSize = this.bottom_size

        this.btn_type.on(Node.EventType.TOUCH_END, ()=>{
            this.is_circle = !this.is_circle
            this.updateBtnTypeStatus()
            this.clearMaskGraphics()
        },this)
        this.updateBtnTypeStatus()

        this.btn_clear.on(Node.EventType.TOUCH_END, ()=>{
            this.clearMaskGraphics()
        },this)

        this.bottom.on(Node.EventType.TOUCH_START, this.onTouchBegin, this);
        this.bottom.on(Node.EventType.TOUCH_MOVE, this.onTouchMoved, this);
        this.bottom.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);

        this.clearMaskGraphics()
    }

    updateBtnTypeStatus() {
        if(this.is_circle) {
            this.btn_type.getChildByName("Label").getComponent(Label).string = '更改为方形'
        } else {
            this.btn_type.getChildByName("Label").getComponent(Label).string = '更改为圆形'
        }
    }

    clearMaskGraphics() {
        this.top_mask_graphics.clear()
        this.initMaskPoints()
    }

    initMaskPoints() {
        var rows = 0
        var cols = 0
        if(this.is_circle) {
            rows = Math.floor(this.bottom_size.height/(this.smear_circle_size*1.5));
            cols = Math.floor(this.bottom_size.width/(this.smear_circle_size*1.5));
        } else {
            rows = Math.floor(this.bottom_size.height/(this.smear_rect_size.height*1.5));
            cols = Math.floor(this.bottom_size.width/(this.smear_rect_size.width*1.5));
        }
        if(rows>0) {
            rows = Math.ceil(rows/2);
        }
        if(cols>0) {
            cols = Math.ceil(cols/2);
        }
        this.hide_points = []
        for (let i =-rows; i<=rows; i++) {
            for(let j=-cols; j<=cols; j++) {
                this.hide_points.push({'x':j, "y":i})
            }
        }
        this.hide_points_total_num = this.hide_points.length
        console.log('hidePoints',this.hide_points, '数量:',this.hide_points_total_num)
    }

    onTouchBegin(event:EventTouch) {
        this.scratch(event)
    }
 
    onTouchMoved(event:EventTouch) {
        this.scratch(event)
    }
 
    onTouchEnd(event:EventTouch) {
        this.scratch(event)
    }

    scratch(event:EventTouch) {
        let event_point = event.touch.getUILocation();
        let v3 = new Vec3(event_point.x, event_point.y,1)
        let point = this.bottom.getComponent(UITransform).convertToNodeSpaceAR(v3);
        this.addCircle(point)
    }

    addCircle(point:Vec3) {
        // if(point.x < -(this.bottom_size.width / 2) || point.x > this.bottom_size.width / 2) {
        //     return console.log('超出 X 界限')
        // }
        // if(point.y < -(this.bottom_size.height / 2) || point.y > this.bottom_size.height / 2) {
        //     return console.log('超出 Y 界限')
        // }
        // console.log('point=',point)
        this.top_mask_graphics = this.top_mask.getComponent(Graphics)
        if(this.is_circle) {
            this.top_mask_graphics.circle(point.x, point.y, this.smear_circle_size)
        } else {
            this.top_mask_graphics.rect(point.x, point.y, this.smear_rect_size.width, this.smear_rect_size.height)
        }
        this.top_mask_graphics.fill()

        this.calculateScratchArea(point)
    }

    calculateScratchArea(point:Vec3) {
        var x = 0
        var y = 0
        if(this.is_circle) {
            x = Math.floor(point.x/this.smear_circle_size)
            y = Math.floor(point.y/this.smear_circle_size)
        } else {
            x = Math.floor(point.x/this.smear_rect_size.width)
            y = Math.floor(point.y/this.smear_rect_size.height)
        }
        for (let i = 0; i < this.hide_points.length; i++) {
            const element = this.hide_points[i];
            if(x==this.hide_points[i].x && y==this.hide_points[i].y) {
                this.hide_points.splice(i,1)
                break
            }   
        }
        let ratio = Math.floor((1 - (this.hide_points.length/this.hide_points_total_num)) * 100)
        console.log('计算=',this.hide_points.length,'   百分比= ',ratio, '%')
    }

}


// import { _decorator, Component, EventTouch, Label, Node, UITransform, Vec2, Vec3 } from 'cc';
// const { ccclass, property } = _decorator;

// @ccclass('test')
// export class test extends Component {
//     @property(Node) bg:Node = null;
//     @property(Node) img:Node = null;
//     @property(Node) img_point:Node = null;
//     @property(Node) btn_rotate:Node = null;
//     protected is_rotate:boolean = false;
//     protected anchor_point:Vec2 = new Vec2(0.5,0.5)
//     start() {
//         this.img.on(Node.EventType.TOUCH_END, (et:EventTouch)=> {
//             let p = new Vec3(et.getUILocation().x,et.getUILocation().y)
//             let n_p = this.img.getComponent(UITransform).convertToNodeSpaceAR(p)
//             // console.log('n_p',n_p)
//             let img_position_x = n_p.x 
//             let img_position_y = n_p.y
//             this.img_point.position = new Vec3(img_position_x, img_position_y, 1)

//             this.anchor_point = new Vec2(0.5,0.5)
//             this.img.getComponent(UITransform).setAnchorPoint(this.anchor_point)

//             let img_contentSize = this.img.getComponent(UITransform).contentSize
//             let anchor_point_x = (img_contentSize.width / 2 + n_p.x) / img_contentSize.width
//             let anchor_point_y = (img_contentSize.height / 2 + n_p.y) / img_contentSize.height
//             this.anchor_point = new Vec2(anchor_point_x, anchor_point_y)
//             console.log('当前锚点=',this.anchor_point)
//         },this)

//         this.btn_rotate.on(Node.EventType.TOUCH_END, ()=> {
//             if(this.is_rotate) {
//                 // 归位
//                 this.btn_rotate.children[0].getComponent(Label).string = '旋转'
//                 this.img.angle = 0
//                 this.anchor_point = new Vec2(0.5,0.5)
//                 this.img_point.position = new Vec3(0, 0, 1)
//             } else {
//                 // 旋转
//                 this.btn_rotate.children[0].getComponent(Label).string = '归位'
//                 this.img.angle = 10
//             }
//             this.img.getComponent(UITransform).setAnchorPoint(this.anchor_point)
//             this.is_rotate = !this.is_rotate
//         },this)
        
//     }

// }