縮放方法用的是鼠標(biāo)移動(dòng)時(shí)不斷設(shè)置元素中心anchor,并對(duì)元素進(jìn)行平移, 這種方式會(huì)影響子元素排列

(理想的方法: 獲取鼠標(biāo)與元素中心anchor的距離, 根據(jù)縮放比例計(jì)算放大后與放大之前的距離, 進(jìn)行平移(上下左右平移的比例應(yīng)該還不一樣) ,感覺(jué)比較復(fù)雜)

<template>
    <canvas ref="cvs"></canvas>
</template>

<script>
import * as PIXI from "pixi.js";

//設(shè)置別名
let Application = PIXI.Application;

let Sprite = PIXI.Sprite;
let TextureCache = PIXI.utils.TextureCache;
let Rectangle = PIXI.Rectangle;
var selectSprite = null;

//綁定滾動(dòng)事件
function addMousewheelEvent(el, func) {
    // function func(delta) {
    //  console.log(delta);
    //  if (delta ==true) {//向上滾動(dòng)

    //  } else {// 向下滾動(dòng)

    //  }
    // }

    //統(tǒng)一處理滾輪滾動(dòng)事件
    function wheel(event) {
        var ev = ev || event;
        ev.preventDefault();

        var delta = true;
        if (ev.wheelDelta) {
            delta = ev.wheelDelta > 0 ? true : false;
        } else {
            delta = ev.detail < 0 ? true : false;
        }
        func(delta);
        return false;
    }
    if (window.addEventListener) {
        console.log("addEventListener");
        el.addEventListener('mousewheel', wheel, false);
        el.addEventListener('DOMMouseScroll', wheel, false);////FF,火狐瀏覽器會(huì)識(shí)別該方法
    } else {
        el.onmousewheel = wheel;//W3C
    }
}


function onDragStart(event) {
    console.log(event);
    if (!this.dragging) {
        this.data = event.data;
        this.dragging = true;
        this.dragPoint = event.data.getLocalPosition(this.parent);
        this.dragPoint.x -= this.x;
        this.dragPoint.y -= this.y;
    }
}

function onDragEnd() {
    if (this.dragging) {
        this.dragging = false;
        this.data = null;
    }
}
var oldtime = 0;
function onDragMove() {
    if (this.dragging) {
        if (Date.now() - oldtime < 10) {
            return
        }
        oldtime = Date.now();
        var newPosition = this.data.getLocalPosition(this.parent);
        this.x = newPosition.x - this.dragPoint.x;
        this.y = newPosition.y - this.dragPoint.y;
    }
}

export default {
    name: 'XiangQi',
    props: {

    },
    data() {
        return {
            app: null,

        }
    },
    mounted() {

        this.app = new PIXI.Application({
            width: 500,
            height: 500,
            view: this.$refs.cvs,
        });

        const imgs = [
            { name: "maps", url: "/index.jpg", crossOrigin: true },
        ];
        this.app.loader.add(imgs,).load(this.load)
    },
    methods: {
        getSprite(name) {
            let texture = this.app.loader.resources[name].texture;
            var textureWidth = texture.width;
            var textureHeight = texture.height;

            var sprite = new Sprite(texture);
            var max = this.app.screen.width > this.app.screen.height ? this.app.screen.height : this.app.screen.width;

            sprite.width = max;
            sprite.height = textureHeight * max / textureWidth;

            sprite.buttonMode = true;
            sprite.interactive = true;
            console.log(sprite);
            return sprite
        },
        load(loader, resources) {
            console.log('load 完成');

            var mapsSprite = this.getSprite('maps')
            var rootContainer = new PIXI.Container();
            rootContainer.interactive = true
            rootContainer.on('pointerdown', onDragStart)
                .on('pointerup', onDragEnd)
                .on('pointerupoutside', onDragEnd)
                .on('pointermove', onDragMove);


            rootContainer.addChild(mapsSprite);


            function SetMouseCenterWithAnchor(e) {
                if (e.target !== mapsSprite) {
                    return
                }
                this.MoveInfo = e.data.getLocalPosition(this.parent);//鼠標(biāo)與父節(jié)點(diǎn)距離

                this.MoveInfo.x2 = this.MoveInfo.x - this.x;//鼠標(biāo)與本精靈原點(diǎn)距離
                this.MoveInfo.y2 = this.MoveInfo.y - this.y;

                var leftW = this.width * this.anchor.x;//精靈的中心距離左邊位置
                var topH = this.height * this.anchor.y;//精靈的中心距離上邊位置

                var mouseX = leftW + this.MoveInfo.x2;//鼠標(biāo)移動(dòng)(或點(diǎn)擊等事件)時(shí)在精靈的位置
                var mouseY = topH + this.MoveInfo.y2;

                var oldAnchor = {
                    x: this.anchor.x,
                    y: this.anchor.y,
                }
                // 重新設(shè)置中心點(diǎn), xy就會(huì)自動(dòng)改變,
                this.anchor.set(mouseX / this.width, mouseY / this.height);

                // 重新設(shè)置平移
                this.x += (this.anchor.x - oldAnchor.x) * this.width;
                this.y += (this.anchor.y - oldAnchor.y) * this.height;
            }
            mapsSprite.on('pointermove', SetMouseCenterWithAnchor)

            var mapsSpriteScale = mapsSprite.scale.x;

            addMousewheelEvent(this.$refs.cvs, (delta) => {

                if (delta == false) {//向下滾動(dòng)
                    mapsSpriteScale > 0.1 && (mapsSpriteScale -= 0.08)
                } else {//向上滾動(dòng)
                    mapsSpriteScale < 3 && (mapsSpriteScale += 0.08);
                }
                mapsSprite.scale.set(mapsSpriteScale);
            })


            this.app.stage.addChild(rootContainer);
        }
    }
}
</script>