Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use HTML5 Canvas API to control the zoom transformation of pictures. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Scale transform scale (sx,sy) passes in two parameters, the scale multiple of the object horizontally and vertically. For example, context.scale (2) magnifies the image twice as much. In fact, it looks simple, but there are still some problems in using it. Let's look at a piece of code:

Scale transform

Body {background: url (". / images/bg3.jpg") repeat;}

# canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto;}

I can't believe your browser doesn't support Canvasations! Hurry up and change it!

_ window.onload = function () {

Var canvas = document.getElementById ("canvas")

Canvas.width = 800,

Canvas.height = 600,

Var context = canvas.getContext ("2d")

Context.fillStyle = "# FFF"

Context.fillRect (0Pol 0800600)

Context.strokeStyle = "red"

Context.lineWidth = 5

For (var I = 1; I

< 4; i++){ context.save(); context.scale(i,i); context.strokeRect(50,50,150,100); context.restore(); } }; 运行结果： 2016322115330220.jpg (850×500) 其实缩放很简单，稍微复杂的是，如何让鼠标成为放大或者缩小的中心。如果数学几何不好，计算公式就可能看不明白了。 JavaScript Code复制内容到剪贴板 canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox浏览器兼容 var pos=windowToCanvas(canvas,event.clientX,event.clientY); event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40)); if(event.wheelDelta>

0) {

ImgScale*=2

ImgX=imgX*2-pos.x

ImgY=imgY*2-pos.y

} else {

ImgScale/=2

ImgX=imgX*0.5+pos.x*0.5

ImgY=imgY*0.5+pos.y*0.5

}

DrawImage ()

}

At this time, the basic function is achieved, loading a picture and loading multiple pictures are about the same, maintain the location and size of each picture, let's sort out the code.

JavaScript Code copies content to the clipboard

Var canvas,context

Var img,// Picture object

Whether the imgIsLoaded,// picture has been loaded or not

ImgX=0

ImgY=0

ImgScale=1

(function int () {

Canvas=document.getElementById ('canvas')

Context=canvas.getContext ('2d')

LoadImg ()

) ()

Function loadImg () {

Img=new Image ()

Img.onload=function () {

ImgIsLoaded=true

DrawImage ()

}

Img.src= "map.jpg"

}

Function drawImage () {

Context.clearRect (0century 0canvas.widthdepartment canvas.height)

Context.drawImage (img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale)

}

Canvas.onmousedown=function (event) {

Var pos=windowToCanvas (canvas,event.clientX,event.clientY)

Canvas.onmousemove=function (event) {

Canvas.style.cursor= "move"

Var pos1=windowToCanvas (canvas,event.clientX,event.clientY)

Var x=pos1.x-pos.x

Var y=pos1.y-pos.y

Pos=pos1

ImgX+=x

ImgY+=y

DrawImage ()

}

Canvas.onmouseup=function () {

Canvas.onmousemove=null

Canvas.onmouseup=null

Canvas.style.cursor= "default"

}

}

Canvas.onmousewheel=canvas.onwheel=function (event) {

Var pos=windowToCanvas (canvas,event.clientX,event.clientY)

Event.wheelDelta=event.wheelDelta?event.wheelDelta: (event.deltaY* (- 40))

If (event.wheelDelta > 0) {

ImgScale*=2

ImgX=imgX*2-pos.x

ImgY=imgY*2-pos.y

} else {

ImgScale/=2

ImgX=imgX*0.5+pos.x*0.5

ImgY=imgY*0.5+pos.y*0.5

}

DrawImage ()

}

Function windowToCanvas (canvas,x,y) {

Var bbox = canvas.getBoundingClientRect ()

Return {

XRX-bbox.left-(bbox.width-canvas.width) / 2

Y bbox.top-(bbox.height-canvas.height) / 2

}

}

Problems that should be paid attention to in scaling transformation

Looking at the above example, everyone must be a little strange about the result. First, the coordinates of the vertices in the upper left corner have changed, but the thickness of the lines has also changed. Therefore, there are two issues that need to be noted for scaling transformations:

When you zoom, the position of the coordinates in the upper-left corner of the image also corresponds to the zoom.

When you zoom, the thickness of the image line also corresponds to scaling.

For example, for the smallest original rectangle, the coordinate of its upper-left corner is (50), and the width of the line is 5px, but after magnifying 2 times, the coordinate of the upper-left corner becomes (100100) and the width of the line becomes 10px. This is the side effect of scaling transformations.

Children's shoes must be waiting for me to talk about ways to solve the side effects. Unfortunately, there is no good way to deal with these side effects. If you want to scale the coordinates of the upper-left corner, you can change the coordinates of the upper-left corner to (0d0), so that no matter what multiple it is, 0 multiplies it or 0, so it doesn't change. If you don't want the line thickness to change, don't use the line. Or wrap a function yourself instead of using scale ().

Fundamentally, we have said before that translation transformation, rotation transformation and scaling transformation all belong to coordinate transformation, or canvas transformation. Therefore, scaling is not the image, but the entire coordinate system, the entire canvas! It's like scaling the unit distance of the coordinate system, so both the coordinates and the lines are scaled. When you think about it, it all seems amazing.

On "how to use HTML5 Canvas API to control the zoom transformation of pictures" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.