LayaAir 以鼠标点为中心,用滚轮控制Sprite放大缩小

很多游戏中使用鼠标滚轮来控制地图的放大和缩小, 类似百度地图的控制方式

官方给的东西少之又少只能自己动手解决!

实现效果和这个基本一致

http://bl.ocks.org/sgruhier/1d692762f8328a2c9957

这个使用D3.js 实现的我们需要用游戏引擎实现,这个只能借鉴了

首先定义一些全局变量

    private pic:Laya.Sprite = new Laya.Sprite; //代表地图的图片层
    private scale:number = 1; //放大的倍率 默认为1

    private bgX:number = 0; //地图的x点的坐标
    private bgY:number = 0; //地图Y点的坐标

然后画出这个地图, 我用一个圆形来替代这个地图

    this.pic = new Laya.Sprite;
    this.pic.graphics.drawCircle(Laya.stage.width/2, Laya.stage.height/2, 35, "#00ffff");
    Laya.stage.addChild(this.pic);

开启监听事件

    Laya.stage.on(Laya.Event.MOUSE_WHEEL,this,this.mouseWheel)

    mouseWheel(e:Laya.Event){
        console.info(e)
        this.zoom(Laya.stage.mouseX,Laya.stage.mouseY,e.delta);
    }

zoom 方法来控制放大和缩小

  zoom(x:number,y:number,delta:number){

        let ns:number = this.scale;
        if(delta>0){
            ns += 0.05;
        }else{
            ns -= 0.05;
        }
        ns = ns < 0.1 ? 0.1 : (ns > 5 ? 5 : ns);
        this.bgX = this.bgX - (x - this.bgX) * (ns - this.scale) / (this.scale);
        this.bgY = this.bgY - (y - this.bgY) * (ns - this.scale) / (this.scale);

        this.scale = ns;

        this.pic.pos(this.bgX,this.bgY);

        this.pic.scaleX = this.scale;
        this.pic.scaleY = this.scale;
    }

期间引用了很多大神的文章

svg平移、放大、缩小及js操作svg

以鼠标位置为中心缩放平移图片（图片map）

感谢大神们的无私分享精神愿 LayaAir 这个高速引擎能够越走越远

LayaAir 以鼠标点为中心,用滚轮控制Sprite放大缩小

猜你喜欢