Обработчик наведения mousemove canvas - есть ответ

Кирилл Туровников, 379 просмотров

Писал скрипт для генерации круговой диаграммы и нужно чтобы при наведении на сектор срабатывал обработчик и показывал номер сектора.
<!DOCTYPE html>
<html>
<head></head><body>

<canvas id='chart1' width='316' height='316'></canvas>

<script>
window.onload = function() {
var drawingCanvas = document.getElementById('chart1');
//context.addEventListener("mousemove", mousemove, false);
//context.onmousemove = mousemove; при инициации обработчика сразу же не отрисовывает canvas
if(drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');
var size = drawingCanvas.height;
var n = 5; //Число секторов Data.length
var grad = 360/n;
var rad = grad*Math.PI/180;
var start = 3*Math.PI/2;
var r = size/2;
var colorTable = ['#DC3912','#FF9900','#FFF804','#66AA00','#6BE5F3','#3366CC','#990099','#DD4477',
'#DC3912','#FF9900','#FFF804','#66AA00','#6BE5F3','#3366CC','#990099','#DD4477'];

for (var i = 1; i < n+1; i++) {
//сектор
context.fillStyle = colorTable[i-1];
context.beginPath();
context.moveTo(drawingCanvas.height/2, drawingCanvas.width/2);
context.arc(drawingCanvas.height/2, drawingCanvas.width/2,size/2/100*100,start+rad*(i-1),start+rad*i,false);
context.closePath();
context.fill();
};

//приблизительный вид обработчика
function mousemove(evt) {
var mouseX = evt.pageX - context.offsetLeft;
var mouseY = evt.pageY - context.offsetTop;
for (var i = 1; i < n+1; i++) {
var a1 = start+rad*(i-1);
var a2 = start+rad*i;
if((mouseX-r)*(mouseX-r)+(mouseY-r)*(mouseY-r)<=r*r && mouseY>Math.tan(a1)*mouseX+r && mouseY>Math.tan(a2)*mouseX+r){
text = i;
};};
}
}
</script>
</body></html>

Ответы:

holden321

1). Вы пытаетесь прикрепить обработчик к несуществующему (пока-что) объекту, поэтому код крашится и дальше не работает.
2). Обработчик mousemove нужно цыплять к html элементу, а не к контексту канваса.
Т.е. цеплять нужно за drawingCanvas и там где он существует, допустим сразу внутри условия if(drawingCanvas...
Насчет математики это отдельный разговор, наверное вы знаете что делаете.

11 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.