Смотреть снизу вверх
jsfiddle.net
Финал
let ctx = null;
let elementClick = null;
let x_before;
let y_before;
let elements = [ // элементы для отрисовки
{
name: '1',
color: 'blue',
width: 100,
height: 100,
top: 20,
left: 15
},
{
name: '2',
color: 'red',
width: 100,
height: 100,
top: 50,
left: 125
},
{
name: '3',
color: 'yellow',
width: 100,
height: 100,
top: 150,
left: 185
},
{
name: '4',
color: 'green',
width: 100,
height: 100,
top: 300,
left: 235
},
];
function releaseMouseButton () { // отпускаем мышку
// 5
elementClick = null;
}
function moveRect (event) { // постоянно отрисовываем
// 4
if (elementClick == null) {return}
let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport
x_click = event.clientX - infoPos.left; // пиксель по x внутри тэга canvas на который нажали
y_click = event.clientY - infoPos.top; // пиксель по y внутри тэга canvas на который нажали
desplX = x_click - x_before;
desplY = y_click - y_before;
elementClick.left = elementClick.left + desplX;
elementClick.top = elementClick.top + desplY;
x_before = x_click;
y_before = y_click;
window.requestAnimationFrame(draw);
}
function clickByRect (event) { // отслеживаем клик по элементу
// 3
let x_click;
let y_click;
let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport
x_click = event.clientX - infoPos.left; // пиксель по x внутри тэга canvas на который нажали
y_click = event.clientY - infoPos.top; // пиксель по y внутри тэга canvas на который нажали
x_before = x_click;
y_before = y_click;
console.log(x_click);
console.log(y_click);
elementClick = null;
elements.forEach ( function (element) {
x_final = element.left + element.width; // правый край элемента по x
y_final = element.top + element.height; // низ края элемента по y
if ( (x_click > element.left) && (x_click < x_final) &&
(y_click > element.top) && (y_click < y_final) )
{
elementClick = element;
}
});
}
function draw () {
// 2
canvas = document.getElementById('tutorial');
let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport
let width = infoPos.width; // получаем ширину элемента
let height = infoPos.height; // получаем ширину высоту
ctx.clearRect(0, 0, width, height); // стираем прошлый кадр
elements.forEach (function(element){ // отрисовка элемента
ctx.fillStyle = element.color;
ctx.fillRect(element.left, element.top, element.width, element.height);
});
}
function initialization() { // точка входа
// 1
canvas = document.getElementById('tutorial'); // Получаем тэг Канвас
canvas.addEventListener('mousedown', clickByRect);
canvas.addEventListener('mousemove', moveRect);
canvas.addEventListener('mouseup', releaseMouseButton);
if (canvas.getContext) { // проверка
ctx = canvas.getContext('2d');
draw();
}
}
initialization();
Добавим функцию для отслеживания кликов по элементам.
function clickByRect (event) { // отслеживаем клик по элементу
let x_click;
let y_click;
let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport
x_click = event.clientX - infoPos.left; // пиксель по x внутри тэга canvas на который нажали
y_click = event.clientY - infoPos.top; // пиксель по y внутри тэга canvas на который нажали
console.log(x_click);
console.log(y_click);
let elementClick = null;
elements.forEach ( function (element) {
x_final = element.left + element.width; // правый край элемента по x
y_final = element.top + element.height; // низ края элемента по y
if ( (x_click > element.left) && (x_click < x_final) &&
(y_click > element.top) && (y_click < y_final) )
{
elementClick = element;
}
if (elementClick != null) {
alert(x_click + ' ' + y_click);
}
});
}
function initialization() { // точка входа
canvas = document.getElementById('tutorial'); // Получаем тэг Канвас
canvas.addEventListener('click', clickByRect); // Вешаем событие и врубаем функцию
if (canvas.getContext) { // проверка
ctx = canvas.getContext('2d');
draw();
}
}
jsfiddle.net
Отрисуем четыре элемента
let ctx = null;
let elements = [ // элементы для отрисовки
{
name: '1',
color: 'blue',
width: 100,
height: 100,
top: 20,
left: 15
},
{
name: '2',
color: 'red',
width: 100,
height: 100,
top: 50,
left: 125
},
{
name: '3',
color: 'yellow',
width: 100,
height: 100,
top: 150,
left: 185
},
{
name: '4',
color: 'green',
width: 100,
height: 100,
top: 300,
left: 235
},
];
function initialization() { // точка входа
canvas = document.getElementById('tutorial'); // Получаем тэг Канвас
if (canvas.getContext) { // проверка
ctx = canvas.getContext('2d');
draw();
}
}
function draw () {
canvas = document.getElementById('tutorial');
elements.forEach (function(element){ // отрисовка элемента
ctx.fillStyle = element.color;
ctx.fillRect(element.left, element.top, element.width, element.height);
});
}
initialization();
function initialization() { // точка входа
canvas = document.getElementById('tutorial'); // Получаем тэг Канвас
canvas.addEventListener('click', function (event){ // вешаем эвент на всё окно канваса
let infoPos = canvas.getBoundingClientRect();
console.log(infoPos.left);
console.log(event.clientX); //левый край окна браузера
console.log(infoPos.top);
console.log(event.clientY); //верхний край окна браузера
let xpos = event.clientX - infoPos.left;
console.log(xpos); // координаты пикселя x в окне canvas, на который нажали
let ypos = event.clientY - infoPos.top;
console.log(ypos); // координаты пикселя y в окне canvas, на который нажали
});
}
initialization();
canvas{
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<canvas id ="tutorial" width="200" height="200"></canvas>
<script src="canvas.js"></script>
</body>
</html>
Top comments (0)