Mouse event бутон в canvas.

Mouse event бутон в canvas.

В този урок ще ви покажа как да намерите точните координати на бутон в canvas елемент, който е вложен в един или повече елементи така, че на каквато и резолюция да отворите вашия сайт да знаете къде се намира той. За целта ще ползваме следната HTML структура

click on canvas to view coordinates

а css кода ще запишем

 

Този код представлява два дива центрирани в браузъра спрямо резолюцията и канваса. В канваса ще изчертаем следната картинка

button

Сега е време да започнем с JavaScript кода.

1. Първо ще направим няколко променливи които ще ни трябват

2. Ще направим клас който ще взима координатите на нашия бутон – X left, X right, y Top и y Bottom. За да ги намерим можем да ползваме photoshop и да извадим 4 гайда и да намерим тези позиции. На картинката по долу се вижда какви са текущите X left, X right, y Top и y Bottom на бутона.

fotoshop

а самия клас ще представлява това

Класа Button има и един метод, който да проверява координатите къде е кликнато и ако е в полето на координатите на бутона да връща true.

3. Ще направим една функция която да чертае нашата картинка в канваса.

В предишния урок съм обяснил подробно как работи drawImage. Можете да го прочетете от тук

4. Следва да направим една функция, която да връща текущите ни координати на канваса независимо от резолюцията на екрана.

В случайя obj.offsetLeft ни връща текущата позиция на елемента спрямо неговия родител. Затова трябва да ползваме такава функция с цикъл който да събира в curleft и curtop офсета на всички родители на канваса.

5. Почти накрая остана да направим mouse event – а, който да проверява клика ни върху канваса на какви X и Y координати се намират

canvasPosition ще направи инстанция към функцията findPos, която ще ни върне масив с позициите. След това ще кажем, че mouseX e равно на кликнатото място в канваса минус offsetLeft на канваса. Същото важи и да mouseY. Така ще получим точните координати за да можем после да проверим метода на класа Button дали ще ни върне true и ако е така значи сме кликнали в координатите на бутона.

5. Сега остава само да сложим два addEventListener – а за да изчертаем първоначално картинката в канваса и за кликването с мишката върху канваса

Демо на урока можете да видите тук

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.