Jak zrobić klikalne punkty w kanwie HTML5?

Question

Gram z simple tutorial dla linii rysunkowej w kanwie HTML5. Ponieważ jest oparty na jQuery, można łatwo dodać wiele efektów do rysunku.

Jak mogę uczynić punkt klikalny/hoverable, aby dodać efekty jquery po kliknięciu/hover (mouseenter/mouseleave)? Punkty są rysowane przez:

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(); 
} 

Jak dodać selektor jquery? Zasadniczo chcę wyświetlać współrzędne punktu po kliknięciu lub najechaniu na obiekt.

Answer 1

Problem polega na tym, że jQuery współpracuje z DOMem, a nie rysunkami na płótnie. Co musisz zrobić, to przechowywać te punkty gdzieś i najechając myszką na element canvas, sprawdzić, czy współrzędne myszy odnoszą się do płótna (tj. Jeśli umieścisz mysz nad lewym górnym rogiem płótna, współrzędne są [ 0,0]) znajdują się w obszarze punktu/kształtu. Jeśli tak, punkt jest przesuwany przez mysz i możesz wyświetlić efekt.

Psuedocode lepiej zrozumieć:

// 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. 
}); 

Ok, może dowiedzieć się, czy punkt znajduje się wewnątrz prostokąta, można użyć coś takiego:

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

Answer 2

Można użyć ramy podobnie jak EaselJS, który usuwa całą ciężką pracę związaną z obsługą zdarzeń myszy na obiektach dodawanych do obszaru roboczego.