這是一種縮放點的技巧：

繪制地圖

通過不使用變換來繪制地圖來簡化事物(不需要翻譯,縮放！).

所需要的只是context.drawImage的縮放版本.

您所做的是將原始地圖縮放到所需大小,然后從用戶選擇的縮放點向上和向左拉動它.

context.drawImage(

map,

0,0,map.width,map.height, // start with the map at original (unscaled) size

offsetX,offsetY, // pull the map leftward & upward from the scaling point

scaledWidth,scaledHeight // resize the map to the currently scaled size

選擇縮放點(焦點)：

縮放焦點實際上是2分！

第一個焦點是mouseX,mouseY,用戶單擊該按鈕以設置所需的縮放點.重要的是要記住鼠標坐標位于縮放空間中.用戶正在查看/單擊的地圖被縮放,因此他們的mouseX,mouseY也被縮放.

通過不縮放鼠標坐標來計算第二個焦點.第二個點是原始未縮放地圖上的等效鼠標位置.

第二個未縮放的焦點用于計算從第一個焦點向左和向上拉刻度圖的程度.

function setFocus(mx,my){

// mouseX,mouseY is the scaling point in scaled coordinates

focusX=mx;

focusY=my;

// convert the scaled focal point

// to an unscaled focal point

focusX1=parseInt((mx-mapLeft)/scale);

focusY1=parseInt((my-mapTop)/scale);

}

縮放地圖

當用戶表明他們想要將地圖縮放或更大時：

>計算新的縮放地圖寬度&高度

>計算從縮放點向上和向左拉動新縮放的地圖需要多少偏移(縮放點先前由鼠標位置選擇).

碼：

function setScale(newScale){

scale=newScale;

// calc the width & height of the newly scaled map

mapWidth=parseInt(iw*scale);

mapHeight=parseInt(ih*scale);

// calc how much to offset the map on the canvas

mapLeft=parseInt(focusX-focusX1*scale);

mapTop =parseInt(focusY-focusY1*scale);

// draw the map

drawMap();

}

這是示例代碼和演示：

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

var $canvas=$("#canvas");

var canvasOffset=$canvas.offset();

var offsetX=canvasOffset.left;

var offsetY=canvasOffset.top;

//

var counter=1;

var PI2=Math.PI*2;

var iw,ih;

var mapLeft,mapTop,mapWidth,mapHeight;

var focusX,focusY,focusX1,focusY1;

var scale;

var map=new Image();

map.οnlοad=start;

map.src="https://dl.dropboxusercontent.com/u/139992952/multple/mapSmall.png";

function start(){

iw=map.width;

ih=map.height;

// initial

mapLeft=0;

mapTop=0;

scale=1.00;

setFocus(iw/2*scale,ih/2*scale);

setScale(scale); // also sets mapWidth,mapHeight

drawMap();

//

$("#canvas").mousedown(function(e){handleMouseDown(e);});

//

canvas.addEventListener('DOMMouseScroll',handleScroll,false);

canvas.addEventListener('mousewheel',handleScroll,false);

}

//

function setScale(newScale){

scale=newScale;

mapWidth=parseInt(iw*scale);

mapHeight=parseInt(ih*scale);

mapLeft=parseInt(focusX-focusX1*scale);

mapTop =parseInt(focusY-focusY1*scale);

drawMap();

}

//

function setFocus(mx,my){

// mouseX,mouseY is the scaling point in scaled coordinates

focusX=mx;

focusY=my;

// convert the scaled focal point

// to an unscaled focal point

focusX1=parseInt((mx-mapLeft)/scale);

focusY1=parseInt((my-mapTop)/scale);

//

drawMap();

}

//

function drawMap(){

ctx.clearRect(0,0,canvas.width,canvas.height);

ctx.save();

ctx.drawImage(map,0,0,iw,ih,mapLeft,mapTop,mapWidth,mapHeight);

dot(ctx,focusX,focusY,"red");

ctx.restore();

}

function dot(ctx,x,y,fill){

ctx.beginPath();

ctx.arc(x,y,4,0,PI2);

ctx.closePath();

ctx.fillStyle=fill;

ctx.fill();

ctx.lineWidth=2;

ctx.stroke();

}

//

function handleScroll(e){

e.preventDefault();

e.stopPropagation();

var delta=e.wheelDelta?e.wheelDelta/30:e.detail?-e.detail:0;

if (delta){

counter+=delta;

setScale(1+counter/100);

}

};

//

function handleMouseDown(e){

e.preventDefault();

e.stopPropagation();

mouseX=parseInt(e.clientX-offsetX);

mouseY=parseInt(e.clientY-offsetY);

setFocus(mouseX,mouseY);

drawMap();

}

body{ background-color: ivory; }

canvas{border:1px solid red;}

Click to set zoom point
Use mousewheel to zoom

總結

以上是生活随笔為你收集整理的html画布 缩放的正方形,html5-canvas – 在动画HTML5画布中缩放和平移的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。