HTML 5 Canvas Наведите курсор мыши на событие (показать подсказку) - PullRequest
Новая
       33

HTML 5 Canvas Наведите курсор мыши на событие (показать подсказку)

1 голос
/ 25 ноября 2011

Я работаю над проектом визуализации.На основании моих данных я рисую на холсте сотни маленьких кружочков.Я хочу добавить указатель мыши над событием, чтобы всякий раз, когда мышь окружала область круга, она отображала некоторые свойства узла из моих данных в виде всплывающей подсказки или текста на холсте.Мой текущий метод drawCircle 

function drawCircle(canvas,x,y,r) 
{
    canvas.strokeStyle = "#000000";
    canvas.fillStyle = "#FFFF00";
    canvas.lineWidth = 2;
    canvas.beginPath();
    canvas.arc(x,y,r,0,Math.PI*2,true);
    canvas.stroke();
    canvas.fill();
    canvas.closePath();
}

Я изучил kinetic.js Но не могу понять, как я могу вызывать свой метод drawCircle [многократно], используя их библиотеку.

Любая помощь будет высоко оценена.

1 Ответ

3 голосов
/ 07 декабря 2011

Если вы все еще хотите использовать KineticJS, вы должны поместить материал Kinetic внутри своей процедуры drawCircle. В основном это извлечено из их учебника и урезано: 

function drawCircle(stage,x,y,r) {
  var circle = new Kinetic.Shape(function(){
    var context = this.getContext();
    // draw the circle here: strokeStyle, beginPath, arc, etc...
  });
  circle.addEventListener("mouseover", function(){
    // do something
  });
  stage.add(circle);
}

Если вы все же не хотите использовать KineticJS, вам нужно будет запомнить для себя положение и радиусы каждого круга, который вы нарисовали, а затем сделать что-то вроде этого: 

canvas.onmouseover = function onMouseover(e) {
  var mx = e.clientX - canvas.clientLeft;
  var my = e.clientY - canvas.clientTop;
  // for each circle...
  if ((mx-cx)*(mx-cx)+(my-cy)*(my-cy) < cr*cr)
    // the mouse is over that circle
}
...