Javascript Girl
  1. Javascript Girl
  3. Toile HTML5: Zoom
Intereting Posts
Qu'est-ce que les exportations et le prototype en version JavaScript? Différence entre innerText et innerHTML en javascript Rafraîchir DOM après avoir ajouté l'élément Comment quantifier automatiquement les cases de valeur d'entrée sur chaque ligne dans une table HTML Combinaison de favoris pour créer une bascule entre HTTP et HTTPS? Bon IDE pour node.js + coffeescript + jasmine JQuery ui dialogue modifie le titre après le rappel de charge Javascript: quelles sont les lignes directrices sur la façon de définir de nouveaux types de données? Comment contrôler le volume du système en utilisant javascript Lors de l'édition d'une grille, comment puis-je désactiver des champs spécifiques par ligne? Mootools: je veux mettre en œuvre une architecture similaire à Big pipe dans Facebook Les variables globales entendues sont mauvaises, quelle solution alternative dois-je utiliser? <Script> tag vs <script type = 'text / javascript'> tag Comment créer un REAL sleep () en JavaScript? D3 update circle-pack data new nodes chevauche les noeuds existants

Toile HTML5: Zoom

Existe-t-il un moyen simple de faire un zoom avant et arrière dans la toile (JavaScript)? Fondamentalement, j'ai une toile 400x400px et j'aimerais pouvoir faire un zoom avant avec 'mousedown' (2x) et revenir avec 'mouseup'.

J'ai passé les deux derniers jours à googler, mais pas de chance jusqu'à présent. 🙁

Merci pour l'aide.

En s'appuyant sur la suggestion d'utiliser drawImage, vous pouvez également combiner cela avec la fonction d'échelle.

Donc, avant de dessiner l'échelle d'image, le contexte au niveau de zoom souhaité: 

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

J'ai créé un petit exemple ici http://jsfiddle.net/mBzVR/4/ qui utilise drawImage et scale pour zoomer sur mousedown et out on mouseup.

Essayez cela: 

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

Fonctionne parfaitement pour moi avec un zoom et un mouvement de la souris. Vous pouvez le personnaliser sur la roue de la souris vers le haut et vers le bas Njoy !!!

IIRC Canvas est un bitmap de style raster. Il ne sera pas zoomable car il n'y a pas d'informations stockées pour effectuer un zoom avant.

Votre meilleur pari est de garder deux copies en mémoire (zoom et non) et de les échanger sur le clic de la souris.

Si vous avez une image source ou un élément de toile et votre toile 400×400 dans laquelle vous souhaitez dessiner, vous pouvez utiliser la méthode drawImage pour obtenir un zoom.

Donc, par exemple, la vue complète pourrait être comme celle-ci 

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

Et une vue agrandie pourrait être comme celle-ci 

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

Le premier paramètre à drawImage est l'élément d'image ou l'élément de toile à dessiner, les 4 suivants sont les x, y, la largeur et la hauteur à l'échantillon de la source et les 4 derniers paramètres sont les x, y, la largeur et la hauteur de la région à Dessinez dans le canevas. Il va alors gérer la mise à l'échelle pour vous.

Vous devriez simplement choisir la largeur et la hauteur pour l'échantillon source en fonction du niveau de zoom et de x et y en fonction de l'endroit où la souris est cliquée moins la moitié de la largeur et de la hauteur calculées (mais vous devez vous assurer que le rectangle n'est pas Hors limites).