Canvas也能实现Map的能拖能缩放的效果

标签：canvas   map   平移   缩放   

1. Canvas简介：Canvas是HTML5中新增的一个重要的HTML标签，它为了客户端矢量图形而设计的，顾名思义Canvas就是一个画布，你可以在上面画出你想要的任何图形，如果你想设计一个特色的图标，你可以用Canvas，如果你想在客户端绘制一个矢量图你可以选择Canvas。

http://www.w3school.com.cn/html5/html5_canvas.asp

2. Canvas的例子：

http://javascript.ruanyifeng.com/htmlapi/canvas.html

3. Canvas的特殊效果：

今天我要重点介绍的是Canvas可以实现类似于百度地图和googleMap的效果，可以平移，可以缩放，下面的这幅图就可以实现：

说说主要思路和主要的代码：

3.1 平移：

画图就不多介绍了，用canvas可以画出任何你想要的图，平移就是需要移动页面上的元素，那么canvas是个画板，画板不能移动，那如何平移呢？首先需要将我们要画到画板上的元素存储在内存中，鼠标移动的时候，如果移动10个像素，那么我们就把内存中存储的元素全部移动五个像素，操作canvas面板的前提是对面板的任何操作，任何变化都需要重画，重画的效率是很快的，这个我做过测试，不要把canvas设置太大，只要再屏幕能显示大小就可以了。

$(canvas).bind('mousemove', function ()
{
	var scale = canvasConstructor.scale;
	var x = event.clientX;
	var y = event.clientY;
	if (canDrag)
	{
		var len = canvasDatasets.figures.length;
		for (var i = 0; i < len; i++)
		{
			canvasDatasets.figures[i].setPosition(x - lastPosition.x, y - lastPosition.y);
		}
		_drawBoard.reDraw();
		lastPosition.x = x;
		lastPosition.y = y;
		return;
	}
}

3.2 缩放：

缩放的道理也是一样，就是需要重画图形

$(canvas).mousewheel(function (event, intDelta)
{
    if (enableMousewheel)
    {
        if (isWheeling)
        {
        	isWheeling = false;
        	var edgeZoomScale = 0;
        	var enable = false;
        	if (intDelta > 0)
        	{
        		if (_defaultZoomScale == _defaultMaxScale)
        		{
        			isWheeling = true;
        			return;
        		}
        		else
        		{
        			edgeZoomScale = _defaultZoomScale + _defaultZoomIncrement;
        			if (edgeZoomScale > _defaultMaxScale)
        			{
        				edgeZoomScale = _defaultMaxScale;
        			}
        			enable = true;
        		}
        	}
        	else if (intDelta <= 0)
        	{
        		if (_defaultZoomScale == _defaultMinScale)
        		{
        			isWheeling = true;
        			return;
        		}
        		else
        		{
        			edgeZoomScale = _defaultZoomScale - _defaultZoomIncrement;
        			if (edgeZoomScale < _defaultMinScale)
        			{
        				edgeZoomScale = _defaultMinScale;
        			}
        			enable = true;
        		}
        	}
        	if (enable)
        	{
        		var point = new Point(event.clientX, event.clientY);
        		var ratio = edgeZoomScale / _defaultZoomScale;
        		_defaultZoomScale = edgeZoomScale;
        		_drawBoard.zoomRefresh(ratio, point);
        		parent.setZoomText(_defaultZoomScale);
        	}
        	isWheeling = true;
        }
    }
});

前段需要添加鼠标的滚轮事件需要引用一个js

<script src="Scirpts/jquery.mousewheel.js" type="text/javascript"></script>

可以去网上下载，引用这个js后，就可以用上面的方式绑定鼠标滚轮的缩放事件了，上图中放大和缩小的按钮也可以实现同样缩放的功能。

intDelta是判断前滚还是后滚动的，具体的逻辑就是将页面上所有图形的左边都同时缩放一定的倍数，倍数可以我们自己控制了，就是ratio，主要的方法就是zoomRefresh，这个方法里面也会调用reDraw。

主要的逻辑和算法我已经讲了，如果还有什么不明白的可以联系我或者给我留言。

Canvas也能实现Map的能拖能缩放的效果

标签：canvas   map   平移   缩放   

原文地址：http://blog.csdn.net/jcx5083761/article/details/43793423