Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/6: Рейтинг темы: голосов - 6, средняя оценка - 5.00
Olga25
0 / 0 / 0
Регистрация: 18.07.2016
Сообщений: 24
1

События addEventListener на картинке

16.08.2016, 22:00. Просмотров 1053. Ответов 2
Метки нет (Все метки)

Подскажите пожалуйста как создать массив из картинок вывести этот массив на экран и привязать к нему события нажатия кнопки мыши. При нажатии картинки появлялось сообщение координат этой картинки по x и y. При это используется canvas, добавление картинки drawImage?
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
16.08.2016, 22:00
Ответы с готовыми решениями:

Вызов события у элементов на которых повесил событие addEventListener
Здравствуйте!!! Подскажите как вызвать у каждого элемента событие клика в данном коде? В консоле...

addEventListener
Вопрос может показаться странным, просто я только начинаю вникать в js... Суть в следующем: Я...

Заменить addEventListener
Подскажите пожалуйста, чем заменить addEventListener что бы функция заработала? window.onload...

Не подключается addEventListener к элементам
Показывает "triangles.forEach is not a function" window.onload = { var field =...

Почему не срабатывает addEventListener?
Почему не срабатывает addEventListener? <span class="btn btn-success fileinput-button"> ...

2
mudcrab
4 / 4 / 5
Регистрация: 21.05.2013
Сообщений: 26
Завершенные тесты: 1
17.08.2016, 13:09 2
Лучший ответ Сообщение было отмечено Olga25 как решение

Решение

Действительно,было бы интересно узнать,как можно назначать обработчик на отдельные картинки в canvas. Пока получилось только создать массив из картинок и в цикле вычислять при клике мыши,попадаешь или не попадаешь по картинке, и если попадаешь, то выводить сообщение:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var canvas = document.getElementById("canvas"); 
            canvas.width=400;
            canvas.height=400;
            ctx = canvas.getContext('2d');          
            function Picture(coordX,coordY,src) {
                this.coordX=coordX;
                this.coordY=coordY;
                this.img=new Image();
                this.img.src=src;
                this.width=this.img.width;
                this.height=this.img.height;
                this.draw=function() {
                    ctx.beginPath();
                    ctx.drawImage(this.img,this.coordX, this.coordY);
                    ctx.closePath();
                };
            }
            function onClick(e) {               
                for (i=0;i<pictures.length;i++) {
                    if ((e.offsetX>=pictures[i].coordX)&&(e.offsetX<=pictures[i].coordX+pictures[i].width)&&
                        (e.offsetY>=pictures[i].coordY)&&(e.offsetY<=pictures[i].coordY+pictures[i].height)) {
                            alert("X:"+pictures[i].coordX+" Y:"+pictures[i].coordY);
                        }
                }   
            }
            
            var pictures=[];
            for (i=0;i<4;i++) {
                pictures[i]=new Picture(100*i,100*i,'castle.png');
                pictures[i].draw();
            }
            canvas.addEventListener("mousedown",onClick);
1
Olga25
0 / 0 / 0
Регистрация: 18.07.2016
Сообщений: 24
18.08.2016, 15:24  [ТС] 3
Спасибо за помощь.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
18.08.2016, 15:24

Window.onload/addEventListener
Почему второй обработчик срабатывает сразу при загрузке страницы, а не при клике, как первый? Что...

Cannot read property 'addEventListener' of null
начал изучать javascript html делаю Сапёра на html/javascript/css не пойму в чем проблемма ...

Передача параметров в функцию из addEventListener
Вот если так сделать, то будет вызвана функция myfunc при нажатии на объект. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru