Maison interface Web Tutoriel H5 详解如何用HTML5 Canvas API控制图片的缩放变换_html5教程技巧

详解如何用HTML5 Canvas API控制图片的缩放变换_html5教程技巧

May 23, 2016 pm 02:20 PM
canvas html5 缩放

缩放变换scale(sx,sy)传入两个参数,分别是水平方向和垂直方向上对象的缩放倍数。例如context.scale(2,2)就是对图像放大两倍。其实,看上去简单,实际用起来还是有一些问题的。我们来看一段代码:

JavaScript Code复制内容到剪贴板
  1. nbsp;html>   
  2. "zh">   
  3.   
  4.      "UTF-8">   
  5.     缩放变换   
  6.     
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.        
  10.   
  11.   
  12. "canvas-warp">   
  13.     "canvas">   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.        
  
  •   
  • <script> </script>
  •     window.onload = function(){   
  •         var canvas = document.getElementById("canvas");   
  •         canvas.width = 800;   
  •         canvas.height = 600;   
  •         var context = canvas.getContext("2d");   
  •         context.fillStyle = "#FFF";   
  •         context.fillRect(0,0,800,600);   
  •   
  •         context.strokeStyle = "red";   
  •         context.lineWidth = 5;   
  •         for(var i = 1; i 
  •             context.save();   
  •             context.scale(i,i);   
  •             context.strokeRect(50,50,150,100);   
  •             context.restore();   
  •         }   
  •     };   
  •   
  •   
  •   
  • 运行结果:
    2016322115330220.jpg (850×500)

     其实缩放很简单,稍微复杂的是,如何让鼠标成为放大或者缩小的中心。如果数学几何不好,计算公式就可能看不明白了。

    JavaScript Code复制内容到剪贴板
    1. canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox浏览器兼容   
    2.     var pos=windowToCanvas(canvas,event.clientX,event.clientY);   
    3.     event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));   
    4.     if(event.wheelDelta>0){   
    5.         imgScale*=2;   
    6.         imgX=imgX*2-pos.x;   
    7.         imgY=imgY*2-pos.y;   
    8.     }else{   
    9.         imgScale/=2;   
    10.         imgX=imgX*0.5+pos.x*0.5;   
    11.         imgY=imgY*0.5+pos.y*0.5;   
    12.     }   
    13.     drawImage();   
    14. }  

      这个时候,基本功能就实现了,加载一张图片和加载多张图片都差不多,维护每一张图片的位置和大小,下面来整理一下代码吧。

    JavaScript Code复制内容到剪贴板
    1. var canvas,context;   
    2. var img,//图片对象   
    3.     imgIsLoaded,//图片是否加载完成;   
    4.     imgX=0,   
    5.     imgY=0,   
    6.     imgScale=1;   
    7.     
    8. (function int(){   
    9.     canvas=document.getElementById('canvas');   
    10.     context=canvas.getContext('2d');   
    11.     loadImg();   
    12. })();   
    13.     
    14. function loadImg(){   
    15.     img=new Image();   
    16.     img.onload=function(){   
    17.         imgIsLoaded=true;   
    18.         drawImage();   
    19.     }   
    20.     img.src="map.jpg";   
    21. }   
    22.     
    23. function drawImage(){   
    24.     context.clearRect(0,0,canvas.width,canvas.height);   
    25.     context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);   
    26. }   
    27.     
    28. canvas.onmousedown=function(event){   
    29.     var pos=windowToCanvas(canvas,event.clientX,event.clientY);   
    30.     canvas.onmousemove=function(event){   
    31.         canvas.style.cursor="move";   
    32.         var pos1=windowToCanvas(canvas,event.clientX,event.clientY);   
    33.         var x=pos1.x-pos.x;   
    34.         var y=pos1.y-pos.y;   
    35.         pos=pos1;   
    36.         imgX+=x;   
    37.         imgY+=y;   
    38.         drawImage();   
    39.     }   
    40.     canvas.onmouseup=function(){   
    41.         canvas.onmousemove=null;   
    42.         canvas.onmouseup=null;   
    43.         canvas.style.cursor="default";   
    44.     }   
    45. }   
    46. canvas.onmousewheel=canvas.onwheel=function(event){   
    47.     var pos=windowToCanvas(canvas,event.clientX,event.clientY);   
    48.     event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));   
    49.     if(event.wheelDelta>0){   
    50.         imgScale*=2;   
    51.         imgX=imgX*2-pos.x;   
    52.         imgY=imgY*2-pos.y;   
    53.     }else{   
    54.         imgScale/=2;   
    55.         imgX=imgX*0.5+pos.x*0.5;   
    56.         imgY=imgY*0.5+pos.y*0.5;   
    57.     }   
    58.     drawImage();   
    59. }   
    60.     
    61. function windowToCanvas(canvas,x,y){   
    62.     var bbox = canvas.getBoundingClientRect();   
    63.     return {   
    64.         x:x - bbox.left - (bbox.width - canvas.width) / 2,   
    65.         y:y - bbox.top - (bbox.height - canvas.height) / 2   
    66.     };   
    67. }  

    缩放变换应注意的问题
    看了上面的例子,大家一定对产生的结果有点奇怪。一是左上角顶点的坐标变了,而是线条的粗细也变了。因此,对于缩放变换有两点问题需要注意:

    缩放时,图像左上角坐标的位置也会对应缩放。
    缩放时,图像线条的粗细也会对应缩放。
    比如对于最小的那个原始矩形,它左上角的坐标是(50,50),线条宽度是5px,但是放大2倍后,左上角坐标变成了(100,100),线条宽度变成了10px。这就是缩放变换的副作用。

    童鞋们一定在期待着我说解决副作用的途径。很遗憾,没有什么好的方法去解决这些副作用。如果想固定左上角坐标缩放,可以把左上角坐标变成(0,0),这样的话无论是什么倍数,0乘上它还是0,所以不变。如果不想让线条粗细变化,那就别使用线条。或者自己封装一个函数,不要使用scale()。

    究其根本,之前我们说过平移变换、旋转变换、缩放变换都属于坐标变换,或者说是画布变换。因此,缩放并非缩放的是图像,而是整个坐标系、整个画布!就像是对坐标系的单位距离缩放了一样,所以坐标和线条都会进行缩放。仔细想想,这一切貌似挺神奇的。

    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

    Outils d'IA chauds

    Undresser.AI Undress

    Undresser.AI Undress

    Application basée sur l'IA pour créer des photos de nu réalistes

    AI Clothes Remover

    AI Clothes Remover

    Outil d'IA en ligne pour supprimer les vêtements des photos.

    Undress AI Tool

    Undress AI Tool

    Images de déshabillage gratuites

    Clothoff.io

    Clothoff.io

    Dissolvant de vêtements AI

    AI Hentai Generator

    AI Hentai Generator

    Générez AI Hentai gratuitement.

    Article chaud

    R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Meilleurs paramètres graphiques
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Comment réparer l'audio si vous n'entendez personne
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    Où trouver la courte de la grue à atomide atomique
    1 Il y a quelques semaines By DDD

    Outils chauds

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    Bordure de tableau en HTML Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

    Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

    Tableau imbriqué en HTML Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

    Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

    Marge gauche HTML Marge gauche HTML Sep 04, 2024 pm 04:48 PM

    Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

    Disposition du tableau HTML Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

    Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

    Liste ordonnée HTML Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

    Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

    Déplacer du texte en HTML Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

    Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

    Espace réservé d'entrée HTML Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

    Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

    Bouton HTML onclick Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

    Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

    See all articles