HTML5 Canvas: zoom

43

Sobre la base de la sugerencia de utilizar drawImage, también podría combinar esto con la función de escala.

Así que antes de dibujar la escala de la imagen del contexto al nivel de zoom que desee:

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

He creado un pequeño ejemplo aquí http://jsfiddle.net/mBzVR/4/ que utiliza drawImage y la escala para acercar y alejar mousedown mouseup .

Fuente

2010-08-06 09:15:43 Castrohenge

+6

ADVERTENCIA! Si no te importa que tus imágenes se pixelen, funcionará bien. De lo contrario, deberías multiplicar todos tus tamaños y datos de movimiento por una proporción. Puede almacenarlo en un objeto de cámara y generar una proporción basada en el nivel de zoom. –

+0

O y, en teoría, debería poder reparar la pixelación haciendo que la imagen tenga un tamaño mayor de lo que realmente es. –

+1

También tenga en cuenta que todo se amplía, incluidas las fronteras. Si desea aumentar el tamaño de las formas sin engrosar los contornos, tendrá que multiplicar su ancho, alto y posición manualmente a medida que los dibuja. –

6

IIRC lienzo es un mapa de bits de estilo de trama. Que no será ampliable porque no hay información almacenada para hacer un zoom a.

Su mejor apuesta es mantener dos copias en la memoria (zoom y no) e intercambiarlos en el clic del ratón.

Fuente

2010-08-06 04:25:52 Karl

3

Si usted tiene una imagen de origen o elemento de tela y su lienzo 400x400 desea dibujar en que puede utilizar el método drawImage para lograr el zoom.

Así, por ejemplo, , el pleno compite w podría ser así

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

y una vista ampliada podría ser así

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

El primer parámetro a drawImage es el elemento de imagen o elemento canvas para dibujar, el próximo 4 son la x, y , ancho y alto para muestrear desde la fuente y los últimos 4 parámetros son x, y, ancho y alto de la región para dibujar en el lienzo. A continuación, manejará la escala por usted.

Simplemente tendrá que elegir el ancho y alto para la muestra de origen según el nivel de zoom y las xey en función de dónde se hace clic en el mouse menos la mitad del ancho y alto calculados (pero deberá asegurarse rectángulo no está fuera de límites).

Fuente

2010-08-06 05:31:05

13

Sólo probar esto:

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

funciona perfecto para mí con el zoom y el movimiento del ratón .. se puede personalizar con la rueda del ratón hacia arriba hacia abajo & Njoy !!!

Fuente

2012-07-24 07:15:30 GOK

+0

Hola, GOK, preguntándote si es posible aplicar tu código a una imagen en lugar de tu propio dibujo. He intentado el siguiente código pero no me permite arrastrarlo. ¿Puedo saber qué pasa con eso? 'var imageObj = new Image(); imageObj.onload = function() { context.drawImage (imageObj, 69, 50); }; imageObj.src = 'http: //www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; ' –

+1

¡Es perfecto! me gusta. – kobe

-1

Una opción es utilizar CSS función de zoom:

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

Fuente

2017-11-16 21:28:04 mbastola

HTML5 Canvas: zoom

Respuesta

Cuestiones relacionadas