pixijs以鼠标为中心平移缩放

缩放方法用的是鼠标移动时不断设置元素中心anchor,并对元素进行平移, 这种方式会影响子元素排列

(理想的方法: 获取鼠标与元素中心anchor的距离, 根据缩放比例计算放大后与放大之前的距离, 进行平移(上下左右平移的比例应该还不一样) ,感觉比较复杂)

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

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

//设置别名
let Application = PIXI.Application;

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

//绑定滚动事件
function addMousewheelEvent(el, func) {
    // function func(delta) {
    //  console.log(delta);
    //  if (delta ==true) {//向上滚动

    //  } else {// 向下滚动

    //  }
    // }

    //统一处理滚轮滚动事件
    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,火狐浏览器会识别该方法
    } 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);//鼠标与父节点距离

                this.MoveInfo.x2 = this.MoveInfo.x - this.x;//鼠标与本精灵原点距离
                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;//鼠标移动(或点击等事件)时在精灵的位置
                var mouseY = topH + this.MoveInfo.y2;

                var oldAnchor = {
                    x: this.anchor.x,
                    y: this.anchor.y,
                }
                // 重新设置中心点, xy就会自动改变,
                this.anchor.set(mouseX / this.width, mouseY / this.height);

                // 重新设置平移
                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) {//向下滚动
                    mapsSpriteScale > 0.1 && (mapsSpriteScale -= 0.08)
                } else {//向上滚动
                    mapsSpriteScale < 3 && (mapsSpriteScale += 0.08);
                }
                mapsSprite.scale.set(mapsSpriteScale);
            })


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