Mouse event бутон в canvas.
В този урок ще ви покажа как да намерите точните координати на бутон в canvas елемент, който е вложен в един или повече елементи така, че на каквато и резолюция да отворите вашия сайт да знаете къде се намира той. За целта ще ползваме следната HTML структура
|
1 2 |
<canvas id="canvas" style="background: #ccc;" width="650" height="350"> </canvas> |
а css кода ще запишем
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#wrapper-site { position: relative; margin: 30px auto 10px auto; width: 960px; background: #fff; border: 1px solid black; } #content { width: 650px; margin: auto; } |
Този код представлява два дива центрирани в браузъра спрямо резолюцията и канваса. В канваса ще изчертаем следната картинка
Сега е време да започнем с JavaScript кода.
1. Първо ще направим няколко променливи които ще ни трябват
|
1 2 3 4 5 6 7 8 |
var canvasField = document.getElementById("canvas"); var ctx = canvasField.getContext("2d"); var img = new Image(); img.src = 'img/button.png'; var mouseX; var mouseY; var canvasPosition; |
2. Ще направим клас който ще взима координатите на нашия бутон – X left, X right, y Top и y Bottom. За да ги намерим можем да ползваме photoshop и да извадим 4 гайда и да намерим тези позиции. На картинката по долу се вижда какви са текущите X left, X right, y Top и y Bottom на бутона.
а самия клас ще представлява това
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// Class for button function Button(xL, xR, yT, yB) { this.xLeft = xL; this.xRight = xR; this.yTop = yT; this.yBottom = yB; } Button.prototype.checkClicked = function() { if (this.xLeft <= mouseX && mouseX <= this.xRight && this.yTop <= mouseY && mouseY <= this.yBottom) { return true; } } |
Класа Button има и един метод, който да проверява координатите къде е кликнато и ако е в полето на координатите на бутона да връща true.
3. Ще направим една функция която да чертае нашата картинка в канваса.
|
1 2 3 |
function draw() { ctx.drawImage(img, 0, 0, 650, 350, 0, 0, 650, 350); } |
В предишния урок съм обяснил подробно как работи drawImage. Можете да го прочетете от тук
4. Следва да направим една функция, която да връща текущите ни координати на канваса независимо от резолюцията на екрана.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function findPos(obj) { var curleft = 0; var curtop = 0; while( obj != null ) { curleft += obj.offsetLeft ; curtop += obj.offsetTop ; obj = obj.offsetParent ; } return [curleft,curtop]; } |
В случайя obj.offsetLeft ни връща текущата позиция на елемента спрямо неговия родител. Затова трябва да ползваме такава функция с цикъл който да събира в curleft и curtop офсета на всички родители на канваса.
5. Почти накрая остана да направим mouse event – а, който да проверява клика ни върху канваса на какви X и Y координати се намират
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function mouseClicked(e) { canvasPosition = findPos(document.getElementById("canvas")); mouseX = e.pageX - canvasPosition[0]; mouseY = e.pageY - canvasPosition[1]; if (btnPlay.checkClicked()) { document.getElementById("result").innerHTML = "You click"; } else { document.getElementById("result").innerHTML = "mouseX = " + mouseX + " mouseY = " + mouseY; } } |
canvasPosition ще направи инстанция към функцията findPos, която ще ни върне масив с позициите. След това ще кажем, че mouseX e равно на кликнатото място в канваса минус offsetLeft на канваса. Същото важи и да mouseY. Така ще получим точните координати за да можем после да проверим метода на класа Button дали ще ни върне true и ако е така значи сме кликнали в координатите на бутона.
5. Сега остава само да сложим два addEventListener – а за да изчертаем първоначално картинката в канваса и за кликването с мишката върху канваса
|
1 2 |
window.addEventListener("load", draw, false); document.getElementById("canvas").addEventListener("click", mouseClicked, false); |
Демо на урока можете да видите тук