товом приложении у меня есть холст с простым прямоугольником. Методрисовать называется каждые 100 мс.

как вы можете видеть из кода, я использую колесико мыши для масштабирования всего. Что происходит сейчас, так это то, что все масштабируется, но когда прямоугольник имеет размер 10px, 10px и у меня мышь прямо над ним, прямоугольник больше не находится под мышью после масштабирования. (Что, конечно, правильно, потому что все единицы масштабируются до.

Но я хочу, чтобы положение мыши было «центром действия масштабирования», как в картах Google, так что содержимое, которое находится под мышью до масштабирования, также и под мышью. Я сделал несколько попыток с переводом, но я не могу понять, как это сделать.

Заранее спасибо.

Вот мой код:

 <script type="text/javascript">
        var scroll = 0;
        var scale = 1.0;


                    /** This is high-level function.
         * It must react to delta being more/less than zero.
         */
        function handle(delta) {

                var canvas = document.getElementById("myCanvas");
                var ctx = canvas.getContext("2d");

                scroll = delta;
                if(scroll > 0)
                {
                    scale += 0.2;
                }
                if(scroll < 0)
                {
                    scale -= 0.2;
                }


        }

        /** Event handler for mouse wheel event.
         */
        function wheel(event){
                var delta = 0;
                if (!event) /* For IE. */
                        event = window.event;
                if (event.wheelDelta) { /* IE/Opera. */
                        delta = event.wheelDelta/120;
                } else if (event.detail) { /** Mozilla case. */
                        /** In Mozilla, sign of delta is different than in IE.
                         * Also, delta is multiple of 3.
                         */
                        delta = -event.detail/3;
                }
                /** If delta is nonzero, handle it.
                 * Basically, delta is now positive if wheel was scrolled up,
                 * and negative, if wheel was scrolled down.
                 */
                if (delta)
                        handle(delta);
                /** Prevent ,default actions caused by mouse wheel.
                 * That might be ugly, but we handle scrolls somehow
                 * anyway, so don't bother here..
                 */
                if (event.preventDefault)
                        event.preventDefault();
            event.returnValue = false;
        }

        /** Initialization code. 
         * If you use your own event management code, change it as required.
         */
        if (window.addEventListener)
                /** DOMMouseScroll is for mozilla. */
                window.addEventListener('DOMMouseScroll', wheel, false);
        /** IE/Opera. */
        window.onmousewheel = document.onmousewheel = wheel;

        var drawX = 0;
        var drawY = 0;
        var overX = 0;
        var overY = 0;

         function startCanvas()
         {
             var myCanvas = document.getElementById("myCanvas");
             var ctx = myCanvas.getContext("2d");
             ctx.canvas.width  = window.innerWidth;
             ctx.canvas.height = window.innerHeight;                 
             setInterval(draw,100);
         }

         function draw()
         {
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");

            ctx.clearRect(0,0,window.innerWidth,window.innerHeight);
            ctx.save();
            ctx.scale(scale,scale);
            ctx.fillRect(drawX,drawY,20,20);
            //ctx.translate(-scale,-scale);
            ctx.restore();
            ctx.font="20pt Arial";  
            ctx.fillText(scale+":"+drawX,0,150);                
         }

         function canvasClick(event)
         {
            console.log(event.layerX+"/"+scale);
            drawX = event.layerX/scale;
            drawY = event.layerY/scale;
         }

         function canvasOver(event)
         {
            console.log("over");
            overX = event.layerX;
            overY = event.layerY;
         }

    </script>