game008_findfail/assets/hall/script/page/BackgroundControl.ts

import { _decorator, Component, EventTouch, log, math, Node, Touch, UITransform, Vec2, Vec3, Widget } from 'cc';
import EventMgr from 'db://assets/script/Manager/EventMgr';
import { GDM } from '../dtta/JsonMgr';
import { GameCfg } from 'db://assets/script/Config/GameCfg';
const { ccclass, property } = _decorator;

@ccclass('BgControl')
export class BgControl extends Component {
    node_bg: Node = null;

    private bgTransform!: UITransform;
    private maskTransform!: UITransform;


    //单指相关
    startBgPos: Vec3 = null
    startMovePos: Vec2 = null
    endMovePos: Vec2 = null

    //双指相关
    startDistance: number = null
    startScale: number = null
    maxScale: number = 3;
    minScale: number = 0.5;
    start() {

        this.node_bg = this.node.getChildByName("bg");
        this.bgTransform = this.node_bg.getComponent(UITransform)!;
        this.maskTransform = this.node.getComponent(UITransform)!;

        console.log(this.maskTransform.height)
        // this.scheduleOnce(() => {
        //     if (this.maskTransform.height > 960) {
        //         this.node.getComponent(Widget).enabled = false
        //         this.maskTransform.height = 960
        //     }
        // }, 0.1)

        let data = GDM.gamecfgMgr.paixuLevelinfo.length > 0 ? GDM.gamecfgMgr.paixuLevelinfo : GDM.gamecfgMgr.data
        this.maxScale = data[GameCfg.CurUnit].maxScale
        this.minScale = data[GameCfg.CurUnit].minScale
        this.node_bg.setScale(this.minScale, this.minScale, 1)

        this.scheduleOnce(() => {
            if (this.maskTransform.height >= this.node_bg.getComponent(UITransform).height * this.minScale - 20) {
                this.maskTransform.height = this.node_bg.getComponent(UITransform).height * this.minScale - 20
            }
        }, 0.1)

        log(GameCfg.CurUnit)
        log("max", this.maxScale)
        log("min", this.minScale)

        this.node_bg.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node_bg.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node_bg.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node_bg.on(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
    }


    onTouchStart(event: EventTouch) {
        const touches = event.getTouches();
        this.startMovePos = event.getLocation();
        if (touches.length == 1) {
            this.startBgPos = this.node_bg.getPosition()
        } else if (touches.length == 2) {
            this.startDistance = touches[0].getLocation().subtract(touches[1].getLocation()).length()
            this.startScale = this.node_bg.scale.x
        }
    }

    onTouchMove(event: EventTouch) {
        const touches = event.getAllTouches();
        if (touches.length == 1) {
            this.singleFingerMove(event)
        } else if (touches.length == 2) {
            this.doubleFingerMove(touches)
        }
    }

    singleFingerMove(event: EventTouch) {
        // const position = event.getLocation();
        // let x = this.startMovePos.x - position.x
        // let y = this.startMovePos.y - position.y
        // this.node_bg.setPosition(this.startBgPos.x - x, this.startBgPos.y - y)
        const change = event.getDelta();
        this.node_bg.setPosition(this.node_bg.position.x + change.x, this.node_bg.position.y + change.y)
        this.clampPosition()
        if (this.startMovePos.subtract(event.getLocation()).length() > 10) {
            this.bool_needfire = true
        }
    }
    bool_needfire = false

    doubleFingerMove(etouches: Touch[]) {
        let dis = etouches[0].getLocation().subtract(etouches[1].getLocation()).length()
        if (0 == this.startDistance) {
            this.startDistance = dis
            return
        }
        let scale = this.startScale + ((dis - this.startDistance) / 1000)
        if (scale > this.maxScale) {
            scale = this.maxScale
        } else if (scale < this.minScale) {
            scale = this.minScale
        }
        this.node_bg.setScale(new Vec3(scale, scale, 1))
        this.clampPosition()
    }

    onTouchEnd(event: EventTouch) {
        const touches = event.getAllTouches();


        this.startDistance = 0
        this.startScale = this.node_bg.scale.x
        this.startScale = this.node_bg.scale.x
        this.clampPosition()

        if (this.bool_needfire) {
            EventMgr.ins.dispatchEvent("dontshow_x")
            this.bool_needfire = false
            return
        }
        if (touches.length == 1) {
            const change = event.getDelta();

        } else if (touches.length == 2) {
            EventMgr.ins.dispatchEvent("dontshow_x")
        } else {
            log("三指  无效")
        }
    }

    //#region 边界限制
    private clampPosition() {

        const bgPos = this.node_bg.position;
        const bgScale = this.node_bg.scale.x;
        // 获取实际尺寸
        const bgWidth = this.bgTransform.width * bgScale;
        const bgHeight = this.bgTransform.height * bgScale;
        const maskWidth = this.maskTransform.width;
        const maskHeight = this.maskTransform.height;

        // console.log("实际尺寸", bgWidth, bgHeight)
        // console.log("遮罩尺寸", maskWidth, maskHeight)
        // 计算边界限制
        // 计算边界限制
        const minX = (maskWidth / 2) - bgWidth / 2;
        const maxX = (-maskWidth / 2) + bgWidth / 2;
        const minY = (maskHeight / 2) - bgHeight / 2;
        const maxY = (-maskHeight / 2) + bgHeight / 2;
        // console.log("minX", minX, "maxX", maxX, "minY", minY, "maxY", maxY)

        // // 限制位置
        let x = bgPos.x;
        let y = bgPos.y;
        if (bgPos.x > maxX) {
            x = maxX
        } else if (bgPos.x < minX) {
            x = minX
        }
        if (bgPos.y > maxY) {
            y = maxY
        } else if (bgPos.y < minY) {
            y = minY
        }
        this.node_bg.setPosition(x, y, 0);
    }

}