Я хочу предупреждающее сообщение в jcanvas при нажатии на прямоугольник - PullRequest
Новая
       19

Я хочу предупреждающее сообщение в jcanvas при нажатии на прямоугольник

0 голосов
/ 03 июня 2018

Я новичок с элементом canvas, но мои исследования в Google не увенчались успехом ... Итак, у меня есть элемент canvas, и я рисую много прямоугольников на холсте.

В настоящее времякогда я нажимаю на мою форму, я могу отобразить предупреждающее сообщение, например:

'Вы нажали на прямоугольник 54'.

Я нашел тонны статей о меню на Javascript на элементе html, но ничего о Canvas ...

Есть ли способ сделать это?

1 Ответ

0 голосов
/ 03 июня 2018

Вам необходимо отслеживать координаты и проверять, находится ли мышь в одном из прямоугольников.

Пример: 

var canvas  = document.getElementById( 'myCanvas' ),
    ctx = canvas.getContext( '2d' ),
     // [x, y, width, height]
    rects = [ [0, 0, 50, 50, '#f00' ], [60, 0, 50, 50, '#0f0' ], [ 0, 60, 50, 50, '#00f' ], [ 60, 60, 50, 50, '#555' ] ];

for ( var i = 0; i < rects.length; i++ ) {
    // Draw rectangles at (x, y) with (width, height)
    ctx.fillStyle = rects[ i ][ 4 ];
    ctx.fillRect( rects[ i ][ 0 ], rects[ i ][1 ], rects[ i ][ 2 ], rects[ i ][ 3 ] )
}

canvas.addEventListener( 'click', function (e) {
    var x = e.offsetX,
        y = e.offsetY;

    for ( var i = 0; i <rects.length; i++ ) {
        // check if mouse x between x and x + width, also mouse y between y and y + height
        if ( x > rects[ i ][ 0 ] && x < rects[ i ][ 0 ] + rects[ i ][ 2 ] && y > rects[ i ][ 1 ] && y < rects[ i ][ 1 ] + rects[ i ][ 3] ) {
            console.log( 'Rectangle: ' + parseInt( i + 1 ) )
        }
    }
})
<canvas id="myCanvas"></canvas>
...