canvas 的算法缩放计算

Question

谁有正确的数学公式来计算 canvas 游戏中的缩放比例？我需要一个基于鼠标位置的。

缩放 _tilemap，但我需要一个允许根据鼠标位置缩放的数学公式。

const SM_S = SceneManager._scene;
const mapZoom = SM_S._spriteset._tilemap.scale;
    function wheel_(event) {//TODO: zoom system
        if(event.wheelDeltaY>0){
            mapZoom.x+=0.05;
            mapZoom.y+=0.05;
            $gameMap._displayX+=0.05
            dX+=0.05;
        }else{
            mapZoom.x-=0.05;
            mapZoom.y-=0.05;
            $gameMap._displayX-=0.05
            dX-=0.05;
        }
    };

更新位置

const editorTiker = new PIXI.ticker.Ticker().add((delta) => {
    document.title = `(mX: ${mX})  (mY: ${mY}) | (dX: ${~~dX}) (dY: ${~~dY})`;
    if(scrollAllowed){
        let scrolled = false;
        (mX<20 && (dX-=scrollF) || mX>sceneX-20 && (dX+=scrollF)) && (scrolled=true);
        (mY<20 && (dY-=scrollF) || mY>sceneY-20 && (dY+=scrollF)) && (scrolled=true);
        scrolled && (scrollF+=0.01) || (scrollF=0.01) ;
    }
    $gameMap._displayX += ((dX-$gameMap._displayX)/scrollSpeed);
    $gameMap._displayY += ((dY-$gameMap._displayY)/scrollSpeed);
});

Answer 1

解决了，我用的是pivot和内存槽

let memCoord = new PIXI.Point(), memCoord2 = new PIXI.Point(); // for control zoom memory
    function wheel_(event) {
        setMouseXY(); // get mouse xy in canvas
        const pos = new PIXI.Point(mX,mY);
        SM_S._spriteset._tilemap.toLocal(pos, null, memCoord);
        if(event.wheelDeltaY>0){
            mapZoom.x+=0.1,mapZoom.y+=0.1
        }else{
           if(mapZoom.x>0.3){
                mapZoom.x-=0.1, mapZoom.y-=0.1;
           };
        };
        SM_S._spriteset._tilemap.toLocal(pos, null, memCoord2);
        $gameMap._displayX -= (memCoord2.x - memCoord.x)/48;
        $gameMap._displayY -= (memCoord2.y - memCoord.y)/48;
        dX = +$gameMap._displayX;
        dY = +$gameMap._displayY;
    };

canvas 的算法缩放计算

algorithmic Zoom calculation for canvas

javascript

algorithm

zooming

html5-canvas

pixi.js