基於對象的Canvas JavaScript事件

Question

我需要在畫布上單擊特定（點）或矩形的onclick動作。

例：

 $(document).ready(function(){
    var canvas = $('#myCanvas').get(0);
    if (!canvas.getContext) { return; }
    var ctx = canvas.getContext('2d');
    ctx.fillRect(150,140,8,8);
    ctx.fillRect(200,120,8,8);
    ctx.fillRect(200,160,8,8);

});

我需要使用javascript連接兩條直線和一條曲線連接另外兩個點。我該怎么做？

Answer 1

您需要自己維護區域。 畫布上沒有對象，只有像素，瀏覽器對此一無所知。

在這里演示

您可以執行以下操作（簡化）：

// define the regions - common for draw/redraw and check
var rect1 = [150,140,8,8];
var rect2 = [200,120,8,8];
var rect3 = [200,160,8,8];

var regions = [rect1, rect2, rect3];

現在在您的init上，您可以使用相同的數組來渲染所有矩形：

$(document).ready(function(){
    var canvas = $('#myCanvas').get(0);
    if (!canvas.getContext) { return; }
    var ctx = canvas.getContext('2d');

    //use the array also to render the boxes
    for (var i = 0, r; r = regions[i]; i++) {
        ctx.fillRect(r[0],r[1],r[2],r[3]);
    }
});

在click事件上，您檢查數組以查看鼠標坐標（針對畫布進行了校正）是否在任何矩形內：

$('#myCanvas').on('click', function(e){

    var pos = getMousePos(this, e);

    // check if we got a hit
    for (var i = 0, r; r = regions[i]; i++) {
        if (pos.x >= r[0] && pos.x <= (r[0] + r[2]) &&
            pos.y >= r[1] && pos.y <= (r[1] + r[3])) {

            alert('Region ' + i + ' was hit');
        }
    }
});

//get mouse position relative to canvas
function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }

還請記住，如果調整了窗口大小或由於其他原因清除了畫布（瀏覽器對話框等），請重新繪制畫布。

要連接盒子，您需要存儲第一個命中位置，當您獲得第二個命中位置時，請在它們之間畫一條線。

演示在這里

添加到全局變量中，還可以從全局變量中獲取畫布和上下文（有關准備就緒的相關修改，請參見小提琴）：

var x1 = -1, y1;
var canvas = myCanvas;
var ctx = canvas.getContext('2d');

在點擊事件中：

$('#myCanvas').on('click', function(e){
    var pos = getMousePos(this, e);
    for (var i = 0, r; r = regions[i]; i++) {
        if (pos.x >= r[0] && pos.x <= (r[0] + r[2]) &&
            pos.y >= r[1] && pos.y <= (r[1] + r[3])) {

            //first hit? then store the coords
            if (x1 === -1) {
                x1 = pos.x;
                y1 = pos.y;

            } else {
                //draw line from first point to this
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(pos.x, pos.y);
                ctx.stroke();

                x1 = -1; //reset (or keep if you want continuous lines).
            };
        }
    }
});