HTML5 Canvas: Zooming

43

Bazując na sugestii użycia drawImage, można również połączyć to z funkcją skali.

Więc zanim narysować skalę obrazu kontekst do poziomu powiększenia chcesz:

ctx.scale(2, 2) // Doubles size of anything draw to canvas.

stworzyłem mały przykład tutaj http://jsfiddle.net/mBzVR/4/ który używa drawImage i skalę, aby powiększyć mousedown i na mouseUp .

Źródło

2010-08-06 09:15:43 Castrohenge

+6

ostrzeżenie! Jeśli nie zależy ci na pikselowaniu twoich obrazów, to będzie działało dobrze. W przeciwnym razie powinieneś pomnożyć wszystkie swoje rozmiary i dane dotyczące ruchu przez współczynnik. Można go zapisać w obiekcie z kamery i wyprowadzić współczynnik na podstawie poziomu powiększenia. –

+0

O i teoretycznie powinieneś być w stanie naprawić pixelację, renderując obraz do dużego rozmiaru, a tak naprawdę jest. –

+1

Należy również pamiętać, że wszystko rośnie, w tym granice. Jeśli chcesz zwiększyć rozmiar kształtów bez zagęszczania konturów, musisz ręcznie pomnożyć ich szerokość, wysokość i położenie podczas rysowania. –

6

IIRC Płótno jest bitmapą styl raster. To nie będzie zoomable bo nie ma przechowywać informacje w celu uzyskania zbliżenia.

Najprościej jest, aby dwie kopie w pamięci (powiększone i non) i zamienić je na kliknięcie myszą.

Źródło

2010-08-06 04:25:52 Karl

3

Jeśli masz obraz źródłowy lub elementu canvas i swoją 400x400 płótno chcesz zwrócić się można użyć metody drawImage do osiągnięcia powiększanie.

Tak na przykład , pełny rywal W może być tak

ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);

I powiększony widok jak może wyglądać ten

ctx.drawImage(img, img.width/4, img.height/4, img.width/2, img.height/2, 0, 0, canvas.width, canvas.height);

Pierwszy parametr drawImage jest element obrazu lub element płótno do rysowania, obok 4 są x, y , szerokość i wysokość do pobrania ze źródła i 4 ostatnie parametry to x, y, szerokość i wysokość regionu do narysowania w obszarze roboczym. Następnie zajmie się skalowaniem dla ciebie.

Wystarczy wybrać szerokość i wysokość próbki źródłowej na podstawie poziomu powiększenia i wartości xiy na podstawie miejsca kliknięcia myszy minus połowa obliczonej szerokości i wysokości (ale trzeba będzie zapewnić prostokąt nie jest poza zakresem).

Źródło

2010-08-06 05:31:05

13

Właśnie to wypróbować:

<!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>

Pracuje dla mnie idealny z powiększania i ruch myszy .. można dostosować go do kółka myszy w górę & dół Njoy !!!

Źródło

2012-07-24 07:15:30 GOK

+0

Witam GOK, zastanawiając się, czy możliwe jest zastosowanie kodu do obrazu zamiast własnego rysunku? Próbowałem poniższy kod, ale nie pozwala mi przeciągnąć. Czy mogę wiedzieć, co jest z nim nie tak? 'var imageObj = new Image(); imageObj.onload = function() { context.drawImage (imageObj, 69, 50); }; imageObj.src = 'http: //www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; ' –

+1

To jest idealne! lubię to. – kobe

-1

Jedną z opcji jest użycie css funkcję zoom:

$("#canvas_id").css("zoom","x%");

Źródło

2017-11-16 21:28:04 mbastola

HTML5 Canvas: Zooming

Odpowiedz

Powiązane problemy