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。

主要的邏輯和算法我已經講了，如果還有什麼不明白的可以聯繫我或者給我留言。