確定縮放後HTML5畫布上的鼠標位置

因此，我正在開發一些涉及使用畫布的HTML5軟件。有一個畫布，我需要能夠縮放，並允許用戶在鼠標單擊時在畫布上塗鴉。到目前爲止，在我發現的一些示例的幫助下，我已經獲得縮放工作。問題是，縮放後，我的繪圖工具上的鼠標位置不合時宜。在任何縮放之前，我可以畫得很好。下面是變焦代碼：確定縮放後HTML5畫布上的鼠標位置

//Zoom 
     mainCanvas.onmousewheel = function(event) { 
      var mousex = event.clientX - mainCanvas.offsetLeft; 
      var mousey = event.clientY - mainCanvas.offsetTop; 
      var wheel = event.wheelDelta/120; 
      //n or -n 

      var zoom = 0; 
      if(wheel < 0) { 
       zoom = 1/2; 
       if(currentzoom == 1) 
        return; 
      } else { 
       mousex = event.clientX - mainCanvas.offsetLeft; 
       mousey = event.clientY - mainCanvas.offsetTop; 
       zoom = 2; 
       if(currentzoom == 32) 
        return; 
      } 
      currentzoom *= zoom; 
      mainContext.translate(originx, originy); 

      mainContext.scale(zoom, zoom); 
      mainContext.translate(-(mousex/scale + originx - mousex/(scale * zoom)), -(mousey/scale + originy - mousey/(scale * zoom))); 
      originx = (mousex/scale + originx - mousex/(scale * zoom)); 
      originy = (mousey/scale + originy - mousey/(scale * zoom)); 
      scale *= zoom; 
      draw(mainContext, gridArray); 
     }

就像我說的，變焦是不實際的問題，僅僅是問題的根源。這裏是一個確定的繪圖工具鼠標位置的代碼：我敢肯定，問題出在代碼後半模塊

//this function determines the mouse position relative to the canvas element 
     function ev_canvas(ev) { 
      if(ev.layerX || ev.layerX == 0) {//Firefox, IE 
       ev._x = ev.layerX; 
       ev._y = ev.layerY; 
      } else if(ev.offsetX || ev.offsetX == 0) {//Opera 
       ev._x = ev.offsetX; 
       ev._y = ev.offsetY; 
      } 

      var func = tool[ev.type]; 
      if(func) { 
       func(ev); 
      } 
     }

，但我不知道出來解決它。任何幫助，將不勝感激。

來源

2012-05-16 user1237544

我在油畫方面的專家，但我要說你必須用你在上下文中使用的基本相同的（也許是一些逆轉換）轉換你的鼠標座標。現在，即使您放大了不同的位置，當您點擊左上角時，它可能會整體繪製在圖像的左上角？ – Brendan

我確實認爲鼠標座標需要進行類似的轉換，我一直在擺弄它，但我還沒有找到任何解決方案。至於縮放，它相對於鼠標位置（鼠標位置的方向）進行縮放，並且其繪製位置取決於縮放的位置。我在變焦上我畫一個彩色網格，放大後，我對塗鴉的圖像往往倍的部分不是在畫布上可見。一般來說，你是對的。放大後的塗鴉通常是放在實際的鼠標位置上。 – user1237544

你找到了這個答案嗎？我也有同樣的問題。 – jgarza

我懷疑這是一個代碼片段，它依賴於一些全局變量，如currentzoom

所以，如果我理解這個問題的權利，問題的關鍵在於你如何使用這兩種鼠標控制和縮放畫布。我懷疑，當你縮放時，DOM將鼠標光標放置在它最初呈現的圖片所屬的位置。因此，如果您放大200％並將鼠標放置在畫布中心左側100像素左右，則畫布的行爲就好像鼠標位於中心左側200像素。

currentzoom = 1; 
originX = 0; 
originY = 0; 

function ev_canvas(ev) { 
     if(ev.layerX || ev.layerX == 0) {//Firefox, IE 
      ev._x = ev.layerX * currentzoom/1 - originX; 
      ev._y = ev.layerY * currentzoom/1 - originY; 
     } else if(ev.offsetX || ev.offsetX == 0) {//Opera 
      ev._x = ev.offsetX * currentzoom/1 - originX; 
      ev._y = ev.offsetY * currentzoom/1 - originY; 
     } 

     var func = tool[ev.type]; 
     if(func) { 
      func(ev); 
     } 
    }

的/ 1在保留的情況下未來用戶希望非「1」值設置爲currentzoom。

來源

2012-05-16 20:56:03

對不起，我應該澄清一點：currentzoom最初設置爲1.從此開始，它會在代碼片段中看到變化。不幸的是，解決方案並不那麼簡單。縮放與鼠標位置協調工作，以便放大到鼠標所在的位置。我認爲你的解決方案可能在更標準的縮放上工作。 – user1237544

是mainContext，originX和originY還是全局變量？如果您可以爲所有全局變量提供明確的聲明將會很有幫助。 –

對於Joomla網站，您可以使用鼠標懸停縮放 - 這是一個Joomla Extension，使您能夠從Joomla網頁查看更大版本的縮略圖。現在，您可以輕鬆瀏覽圖像畫廊：只需將鼠標光標移動到縮略圖上即可查看全尺寸圖像，而無需加載新頁面。在此處下載http://joomlaboat.com/mouse-over-zoom

如果圖片不適合窗口，圖片會自動調整大小。您可以自定義擴展，有很多其他選項。爲了加載透明的圖像，沒有背景只使用.png圖像。

來源

2012-07-10 21:13:30 JoomlaBoat

剛剛嘗試了這一點：

<!DOCTYPE HTML> 
<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
     <style> 
      body { 
       margin: 0px; 
       padding: 0px; 
      } 

      #wrapper { 
       position: relative; 
       border: 1px solid #9C9898; 
       width: 578px; 
       height: 200px; 
      } 

      #buttonWrapper { 
       position: absolute; 
       width: 30px; 
       top: 2px; 
       right: 2px; 
      } 

      input[type = 
      "button"] { 
       padding: 5px; 
       width: 30px; 
       margin: 0px 0px 2px 0px; 
      } 
     </style> 
     <script> 
      function draw(scale, translatePos){ 
       var canvas = document.getElementById("myCanvas"); 
       var context = canvas.getContext("2d"); 

       // clear canvas 
       context.clearRect(0, 0, canvas.width, canvas.height); 

       context.save(); 
       context.translate(translatePos.x, translatePos.y); 
       context.scale(scale, scale); 
       context.beginPath(); // begin custom shape 
       context.moveTo(-119, -20); 
       context.bezierCurveTo(-159, 0, -159, 50, -59, 50); 
       context.bezierCurveTo(-39, 80, 31, 80, 51, 50); 
       context.bezierCurveTo(131, 50, 131, 20, 101, 0); 
       context.bezierCurveTo(141, -60, 81, -70, 51, -50); 
       context.bezierCurveTo(31, -95, -39, -80, -39, -50); 
       context.bezierCurveTo(-89, -95, -139, -80, -119, -20); 
       context.closePath(); // complete custom shape 
       var grd = context.createLinearGradient(-59, -100, 81, 100); 
       grd.addColorStop(0, "#8ED6FF"); // light blue 
       grd.addColorStop(1, "#004CB3"); // dark blue 
       context.fillStyle = grd; 
       context.fill(); 

       context.lineWidth = 5; 
       context.strokeStyle = "#0000ff"; 
       context.stroke(); 
       context.restore(); 
      } 

      window.onload = function(){ 
       var canvas = document.getElementById("myCanvas"); 

       var translatePos = { 
        x: canvas.width/2, 
        y: canvas.height/2 
       }; 

       var scale = 1.0; 
       var scaleMultiplier = 0.8; 
       var startDragOffset = {}; 
       var mouseDown = false; 

       // add button event listeners 
       document.getElementById("plus").addEventListener("click", function(){ 
        scale /= scaleMultiplier; 
        draw(scale, translatePos); 
       }, false); 

       document.getElementById("minus").addEventListener("click", function(){ 
        scale *= scaleMultiplier; 
        draw(scale, translatePos); 
       }, false); 

       // add event listeners to handle screen drag 
       canvas.addEventListener("mousedown", function(evt){ 
        mouseDown = true; 
        startDragOffset.x = evt.clientX - translatePos.x; 
        startDragOffset.y = evt.clientY - translatePos.y; 
       }); 

       canvas.addEventListener("mouseup", function(evt){ 
        mouseDown = false; 
       }); 

       canvas.addEventListener("mouseover", function(evt){ 
        mouseDown = false; 
       }); 

       canvas.addEventListener("mouseout", function(evt){ 
        mouseDown = false; 
       }); 

       canvas.addEventListener("mousemove", function(evt){ 
        if (mouseDown) { 
         translatePos.x = evt.clientX - startDragOffset.x; 
         translatePos.y = evt.clientY - startDragOffset.y; 
         draw(scale, translatePos); 
        } 
       }); 

       draw(scale, translatePos); 
      }; 



      jQuery(document).ready(function(){ 
       $("#wrapper").mouseover(function(e){ 
        $('#status').html(e.pageX +', '+ e.pageY); 
       }); 
      }) 
     </script> 
    </head> 
    <body onmousedown="return false;"> 
     <div id="wrapper"> 
      <canvas id="myCanvas" width="578" height="200"> 
      </canvas> 
      <div id="buttonWrapper"> 
       <input type="button" id="plus" value="+"><input type="button" id="minus" value="-"> 
      </div> 
     </div> 
     <h2 id="status"> 
     0, 0 
     </h2> 
    </body> 
</html>

工作非常適合我用鼠標運動軌跡..恩喬伊！

來源

2012-07-24 07:08:11 GOK

我得到了一個更好的劇本，以獲得畫布上鼠標的位置：

function writeMessage(canvas, message) { 
     var context = canvas.getContext('2d'); 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.font = '18pt Calibri'; 
     context.fillStyle = 'black'; 
     context.fillText(message, 10, 25); 
     } 
     function getMousePos(canvas, evt) { 
     var rect = canvas.getBoundingClientRect(), root = document.documentElement; 

     // return relative mouse position 
     var mouseX = evt.clientX - rect.top - root.scrollTop; 
     var mouseY = evt.clientY - rect.left - root.scrollLeft; 
     return { 
      x: mouseX, 
      y: mouseY 
     }; 
     } 

     window.onload = function() { 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 

     canvas.addEventListener('mousemove', function(evt) { 
      var mousePos = getMousePos(canvas, evt); 
      var message = "Mouse position: " + mousePos.x + "," + mousePos.y; 
      writeMessage(canvas, message); 
     }, false); 
     };

試試吧，如果有問題，評論..

來源

2012-07-24 07:22:41 GOK

確定縮放後HTML5畫布上的鼠標位置

回答

相關問題