tower_client/assets/script/game/common/MapMove.ts

import { _decorator, Component, Node, Size, Vec3, UITransform, EventTouch, view, Vec2, Enum, Camera, Widget, v2, v3 } from 'cc';
import { UIHelper } from '../../framework/common/UIHelper';
import { Framework } from '../../framework/Framework';
const { ccclass, property } = _decorator;

class MapRange {
    up: number = 0;
    down: number = 0;
    left: number = 0;
    right: number = 0;
}

class MapData {
    size: Size = null;
    design: Size = null;
    pos: Vec3 = null;
    range = new MapRange;
}

enum DragDir {
    none = 0,
    up_and_down,
    left_and_right,
    all,
}

@ccclass('MapMove')
export class MapMove extends Component {
    @property({ type: Enum(DragDir), displayName: "拖动方向" })
    private drag_dir = DragDir.none;
    @property({ type: Camera, displayName: "摄像机" })
    private cur_camera: Camera = null;
    private _map_data = new MapData;
    private _ui_transform: UITransform = null;

    onLoad() {
        Framework.event.addEvent("GAME_RESIZE", () => {
            if (this.node.active) {
                ((this.cur_camera) ? this.cur_camera.node : this.node).setPosition(0, 0);
                this._updateMap();
            }
        }, this);
        this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
        this._ui_transform = this.getComponent(UITransform);
        this._updateMap();
    }

    onDestroy() {
        Framework.event.removeEvent(this);
    }

    private onTouchStart(event: EventTouch) {

    }

    private onTouchMove(event: EventTouch) {
        let events = event.getTouches();

        //拖动地图
        let oldPos = this._ui_transform.convertToNodeSpaceAR(this._convertToVec3(events[0].getStartLocation()));
        let newPos = this._ui_transform.convertToNodeSpaceAR(this._convertToVec3(events[0].getLocation()));
        let subPos = oldPos.subtract(newPos);
        let curPos = new Vec3(this._map_data.pos.x + subPos.x * (this.cur_camera ? 1 : -1), this._map_data.pos.y + subPos.y * (this.cur_camera ? 1 : -1), 0);

        if (curPos.x < this._map_data.range.left) {
            curPos.x = this._map_data.range.left;
        } else if (curPos.x > this._map_data.range.right) {
            curPos.x = this._map_data.range.right;
        }
        if (curPos.y > this._map_data.range.up) {
            curPos.y = this._map_data.range.up;
        } else if (curPos.y < this._map_data.range.down) {
            curPos.y = this._map_data.range.down;
        }

        let temp = ((this.cur_camera) ? this.cur_camera.node : this.node).getPosition();
        if (this.drag_dir == DragDir.left_and_right) {
            ((this.cur_camera) ? this.cur_camera.node : this.node).setPosition(curPos.x, temp.y);
        } else if (this.drag_dir == DragDir.up_and_down) {
            ((this.cur_camera) ? this.cur_camera.node : this.node).setPosition(temp.x, curPos.y);
        }
    }

    private onTouchEnd(event: EventTouch) {
        (this.drag_dir !== DragDir.none) && (this._map_data.pos = ((this.cur_camera) ? this.cur_camera.node : this.node).getPosition());
        //console.log(this._map_data.pos);
    }

    private _updateMap() {
        this._map_data.design = view.getDesignResolutionSize();
        this._map_data.size = this._ui_transform.contentSize;
        this._map_data.range.left = -(this._map_data.size.width - this._map_data.design.width) / 2;
        this._map_data.range.right = (this._map_data.size.width - this._map_data.design.width) / 2;
        this._map_data.range.up = (this._map_data.size.height - this._map_data.design.height) / 2;
        this._map_data.range.down = -(this._map_data.size.height - this._map_data.design.height) / 2;

        let pos = this.node.getPosition();
        this._map_data.range.up += pos.y;
        this._map_data.range.down += pos.y;
        this._map_data.range.right += pos.x;
        this._map_data.range.left += pos.x;

        this._map_data.pos = ((this.cur_camera) ? this.cur_camera.node : this.node).getPosition();
    }

    private _convertToVec3(pos: Vec2) {
        return new Vec3(pos.x, pos.y);
    }

    setCameraPostion(pos: Vec2) {
        if (this.cur_camera) {
            let temp = this.cur_camera.node.getPosition();
            this.cur_camera.node.setPosition(pos.x, temp.y);
            this._map_data.pos = this.cur_camera.node.getPosition().clone();
        } else {
            let temp = this.node.getPosition();
            this.node.setPosition(pos.x, temp.y);
            this._map_data.pos = this.node.getPosition().clone();
        }
    }

    // update() {
    //     this.cur_camera && console.error(this.cur_camera.node.getPosition());
    // }
}