基本原理
Cavnas的確能實(shí)現(xiàn)很多很酷炫狂拽屌炸天的效果设褐，但是交互性要差很多颠蕴，簡單的鼠標(biāo)單擊選中某個(gè)圖形泣刹，都要花費(fèi)一番周折。
Canvas只是一個(gè)dom節(jié)點(diǎn)犀被，所有監(jiān)聽的事件都只能綁定在這個(gè)節(jié)點(diǎn)上项玛，但是我們可能需要對Canvas上的某個(gè)元素進(jìn)行操作∪跖校基本的原理就是事件還是綁定在Canvas上，通過判斷點(diǎn)擊發(fā)生的位置是否在Canvas中某個(gè)圖形的路徑內(nèi)(這里注意锥惋，我沒有說是某個(gè)圖形的區(qū)域內(nèi))昌腰，從而進(jìn)一步確定是在哪個(gè)圖形上戳來戳去。
isPointInPath
為了讓我們判斷點(diǎn)擊點(diǎn)到底是否在路徑內(nèi)膀跌，Canvas提供了context.isPointInPath(x,y)
方法遭商，參數(shù)自然是某個(gè)點(diǎn)的橫豎坐標(biāo)。
來個(gè)例子捅伤，先隨便畫三個(gè)矩形：
var rectList = [ [50,50,50,50], [120,120,80,60], [30,150,60,80] ];var drawRect = function(x,y,w,h){ ctx.beginPath(); ctx.rect(x,y,w,h); }
// init
ctx.clearRect(0, 0,canvas.width(), canvas.height());
$.each(rectList, function(n,v){
drawRect(rectList[n][0],rectList[n][1],rectList[n][2],rectList[n][3]);
ctx.stroke();
});
另外再寫個(gè)getCanvasPoint
方法劫流，主要把點(diǎn)擊坐標(biāo)換算成Canvas里面的坐標(biāo)：
var getCanvasPoint = function(x,y) { var canvasOffset = canvas.offset(); return { x: x - canvasOffset.left, y: y - canvasOffset.top } }
是時(shí)候該isPointInPath
方法登場，實(shí)現(xiàn)點(diǎn)中某個(gè)矩形的時(shí)候改變矩形邊框的顏色
canvas.on("mousedown", function(e){ moving = true; var point = getCanvasPoint(e.pageX, e.pageY); $.each(rectList, function(n, v) { drawRect(rectList[n][0],rectList[n][1],rectList[n][2],rectList[n][3]); if(ctx.isPointInPath(point.x, point.y)){ moveItem = n; startPos.x = point.x; startPos.y = point.y; ctx.strokeStyle = "#ff4444"; } else { ctx.strokeStyle = "#000"; } ctx.stroke(); }) });
這里我們從預(yù)定義的rectList
中依次拿出每個(gè)長方形參數(shù)丛忆，分表是左上角的x坐標(biāo)祠汇，y坐標(biāo)，長熄诡，寬可很。然后先畫出長方形的路徑，畫完一個(gè)用isPointInPath
方法判斷一下點(diǎn)擊點(diǎn)是否在當(dāng)前路徑中凰浮，如果在我抠，就給當(dāng)前的改顏色，如果不在就畫出來然后繼續(xù)畫下一個(gè)長方形繼續(xù)判斷路徑袜茧。
是不是很麻煩菜拓，isPointInPath
只對當(dāng)前路徑有效,也就說我們不能把三個(gè)長方形都畫完了再判斷某個(gè)點(diǎn)是否在第一個(gè)長方形路徑中，而必須是每次畫完一個(gè)長方形就要判斷一次笛厦，而且Canvas中路徑是不能保存的纳鼎，要改變某一條路徑，就必須把整個(gè)Canvas重新畫一遍递递。
所以這里我們在循環(huán)中不單單是繪制了點(diǎn)中的長方形喷橙，還要繪制沒點(diǎn)的長方形。
拖動元素
基本原理就是上面那樣登舞，看到這里贰逾，你已經(jīng)洞悉了Canvas實(shí)現(xiàn)點(diǎn)擊等事件的小秘密。那我們就繼續(xù)實(shí)現(xiàn)拖動其中的元素吧菠秒。
canvas.on("mousemove", function(e){ if( !moving && moveItem == null ) { return; } ctx.clearRect(0, 0,canvas.width(), canvas.height()); var point = getCanvasPoint(e.pageX, e.pageY); $.each(rectList, function(n, v) { var moveX = 0, moveY = 0; if(n !== moveItem ){ ctx.strokeStyle = "#000"; } else { moveX = point.x - startPos.x; moveY = point.y - startPos.y; ctx.strokeStyle = "#ff4444"; } drawRect(rectList[n][0] + moveX,rectList[n][1] + moveY,rectList[n][2],rectList[n][3]); ctx.stroke(); }) });
依然是熟悉的味道疙剑，依然是熟悉的配方氯迂。我們還是依賴mousemove方法，移動端請用touchmove方法言缤。
因?yàn)橹霸邳c(diǎn)擊的時(shí)候我們已經(jīng)把是哪個(gè)長方形被選中給保存在變量moveItem中了嚼蚀，所以這里就直接判斷就好了。是要拖動的元素就把長方形的x,y對應(yīng)拖動的距離進(jìn)行更新管挟。同樣是要把整個(gè)Canvas都繪制一遍轿曙。
另外在mouseup事件中保存下狀態(tài)，方便下次繪畫:
canvas.on("mouseup", function(e){ moving = false; $.each(rectList, function(n){ if (n == moveItem){ var point = getCanvasPoint(e.pageX, e.pageY); rectList[n][0] += point.x - startPos.x; rectList[n][1] += point.y - startPos.y; } }); startPos = {} moveItem = null });
記灼ⅰ：在Canvas中不管你搞什么幺蛾子导帝，都要按照之前的規(guī)則把所有路徑繪制一遍。
完整代碼：
https://github.com/bob-chen/canvas-demo/blob/master/basic/movebymouse.html
參考
http://jo2.org/html5-canvas-ispointinpath/
