HTML动画缩放中心,html5-canvas – 在动画HTML5画布中缩放和平移

这是一种缩放点的技巧：

绘制地图

通过不使用变换来绘制地图来简化事物(不需要翻译,缩放！).

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

您所做的是将原始地图缩放到所需大小,然后从用户选择的缩放点向上和向左拉动它.

context.drawImage(

map,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',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,canvas.width,canvas.height);

ctx.save();

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

dot(ctx,focusX,"red");

ctx.restore();

}

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

ctx.beginPath();

ctx.arc(x,4,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