如何在html5畫布中製作可點擊的點？

我正在玩simple tutorial畫線在HTML5畫布。因爲它基於jQuery，所以很容易爲繪圖添加很多效果。如何在html5畫布中製作可點擊的點？

如何讓click/hoverable點擊/懸停（mouseenter/mouseleave）時添加jQuery效果？這些點是由

c.fillStyle = '#333'; 

for(var i = 0; i < data.values.length; i ++) { 
    c.beginPath(); 
    c.arc(getXPixel(i), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true); 
    c.fill(); 
}

如何添加jquery選擇器？基本上，我想要顯示點擊座標或懸停。

來源

2012-05-19 Googlebot

有很多這些框架爲你做這些，嘗試使用一個代替。 – Joseph

「因爲它基於jQuery，所以很容易爲繪圖添加大量效果。」這是不正確的，你將無法在畫布對象上使用jquery動畫，canvas是一種低級別，你將不得不自己實現所有的動畫效果！ jQuery適用於DOM元素 – jazzytomato

問題是，jQuery適用於DOM而不是畫布上的繪畫。你需要做的是將這些點存儲在某處並懸停在畫布元素上，檢查鼠標相對於畫布的座標（例如，如果將鼠標放在畫布的左上角，座標是[ 0,0]）在點/形狀的區域內。如果是這樣，鼠標將鼠標懸停在該點上，您可以顯示效果。

僞代碼，以更好地理解：

// adding shapes to the canvas 
var shapes = []; // make that rects for simplicity. 
For (condition): 
    shapes.push (new Rect(x,y,width,height)); 
    canvas.rect(x, y, width, height); 

// testing hover. 
$("#canvas").mousemove(function(e) { 
    var offsetX = e.pageX - $(this).position().left; 
    var offsetY = e.pageY - $(this).position().top; 

    Foreach shape in shapes: 
     if(shape.contains(offsetX, offsetY)) // a fictious method, implement it yourself...lookup for collision detection; not exactly that but something like that... 
      Mouse hovers! do something great. 
});

好吧，也許找出一個點是否包含在矩形內，你可以使用這樣的事情：

function contains(rect, x, y) { 
    return (x >= rect.x && 
      x <= rect.x + rect.width && 
      y >= rect.y && 
      y <= rect.y + rect.height) 
}

來源

2012-05-19 14:19:41

當然，只能使用cuboid。 – Jordan

你可以使用一個框架如EaselJS，它抽象處理添加到畫布上的對象上的所有處理鼠標事件的工作。

來源

2012-05-19 16:05:50 Neil

謝謝，效果真的很棒！ – Googlebot

如何在html5畫布中製作可點擊的點？

回答

相關問題