xsdmx-CocosCreator/assets/Script/game/fight/map/FLiteMap.ts

import FF from "../FF";

const { ccclass, property } = cc._decorator;
const CALC_RECT_WIDTH = 20;
const CLEAR_LINE_WIDTH = 20;
/**
 * 小地图
 */
@ccclass
export default class FLiteMap extends cc.Component {

    @property(cc.Node)
    maskNode: cc.Node = null;

    @property(cc.Node)
    mIcon: cc.Node = null;

    @property(cc.Sprite)
    mMapSprite: cc.Sprite = null;
    //网格记录
    private grid: Array<Array<number>> = new Array<Array<number>>();
    private stencil:cc.Graphics;
    private ff: FF;
    /**
     * 绘制的点
     */
    public tempDrawPoint: cc.Vec2 = null;
    onLoad() {
        let mask: any = this.maskNode.getComponent(cc.Mask);
        this.stencil = mask._graphics;
        this.stencil.lineWidth = CLEAR_LINE_WIDTH;
        this.stencil.lineCap = cc.Graphics.LineCap.ROUND;
        this.stencil.lineJoin = cc.Graphics.LineJoin.ROUND;
        this.stencil.strokeColor = cc.color(255, 255, 255, 255);

        for (let i = 0; i < this.node.height; i++) {
            this.grid.push([]);
            for (let j = 0; j < this.node.width; j++) {
                this.grid[i].push(0)                
            }
        }

        // this.grid[0][0] = 1;

        // cc.log('xxx 1= ',this.grid[0][0]);
        // cc.log('xxx 2= ',this.grid[0][1]);
        // cc.log('xxx 3= ',this.grid[1][0]);
    }
    public loadMap(icon:string){
        cc.resources.load('icon/map/'+icon, cc.SpriteFrame, (err, spriteFrame:cc.SpriteFrame) =>{
            if(err){
                cc.error(err);
            }else{
               this.mMapSprite.spriteFrame = spriteFrame;
            }
        } );
    }
    public initMap(ff:FF){
        this.ff = ff;
        let widget = this.node.getComponent(cc.Widget);
        widget.target = this.ff.main.node;


    }
    public transform(pos:cc.Vec2){
        let x = Math.floor(pos.x*this.node.width/this.ff.mMap.node.width);
        let y = Math.floor(pos.y*this.node.height/this.ff.mMap.node.height);
        return cc.v2(x,y);
    }
    clearMask(pos:cc.Vec2) {
        // 地图坐标转化为小地图坐标
        let tpos = this.transform(pos);
        if(this.grid[tpos.y][tpos.x] == 1){
            return
        }
        if (this.tempDrawPoint == null) {
            // 只有一个点，用圆来清除涂层
            this.stencil.circle(tpos.x, tpos.y, 5);
            this.stencil.fill();
            this.tempDrawPoint = tpos;
            this.mIcon.setPosition(tpos);
            this.grid[tpos.y][tpos.x] = 1;
        } else if (this.tempDrawPoint.x == tpos.x && this.tempDrawPoint.y == tpos.y) {
        } else {
            // 存在多个点，用线段来清除涂层
            let prevPos = this.tempDrawPoint;
            let curPos = tpos;

            this.stencil.moveTo(prevPos.x, prevPos.y);
            this.stencil.lineTo(curPos.x, curPos.y);
            this.stencil.stroke();
            this.tempDrawPoint = tpos;
            this.mIcon.setPosition(tpos);
            this.grid[tpos.y][tpos.x] = 1;
        }
       
    }

    reset() {
        let mask: any = this.maskNode.getComponent(cc.Mask);
        mask._graphics.clear();
    }
}