Как получить значение клика определенной части холста

Question

Я хочу получить значение нажатой части элемента canvas.Холст содержит несколько элементов, выглядит как на картинке ниже. блок-схема .

Я пытался с событием click addEventListener, но я не могу получить значение.Ниже я поделился кодом для справки.

    canvas.addEventListener('click',function(evt){
       console.log(evt);

});

Answer 1

посмотрите этот фрагмент, который определяет, щелкнули ли вы по прямоугольнику на холсте или нет.

var startRectPoint = {
  x: 10,
  y: 10
};
var endRectPoint = {
  x: 100,
  y: 50
};

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(startRectPoint.x, startRectPoint.y, endRectPoint.x, endRectPoint.y);

function mouseDown(e) {
  var x, y;

  x = e.clientX - canvas.offsetLeft - pageXOffset;
  y = e.clientY - canvas.offsetTop - pageYOffset;
  var minX = Math.min(startRectPoint.x, endRectPoint.x);
  var maxX = Math.max(startRectPoint.x, endRectPoint.x);
  var minY = Math.min(startRectPoint.y, endRectPoint.y);
  var maxY = Math.max(startRectPoint.y, endRectPoint.y);
  if (x > minX && x < maxX && y > minY && y < maxY) {
    alert("you clicked inside of rectangle");
  } else {
    alert("you clicked outside of rectangle");
  }
}

canvas {
  border: 1px solid;
}

<canvas id="myCanvas" width="400" height="200" onmousedown="mouseDown(event)"></canvas>

Answer 2

У вас должна быть позиция каждой блок-схемы, и когда пользователь щелкает, вы должны рассчитать положение холста с помощью позиции блок-схемы. Это удовлетворит ваше требование. введите описание ссылки здесь

  var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft,
    elemTop = elem.offsetTop,
    context = elem.getContext('2d'),
    elements = [];

    // Add event listener for `click` events.
    elem.addEventListener('click', function (event) {
       // var leftWidth = $("#leftPane").css("width")

      //  var x = event.pageX - (elemLeft + parseInt(leftWidth) + 220),
       //     y = event.pageY - (elemTop + 15);
            
            var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;

        elements.forEach(function (element) {
            if (y > element.top && y < element.top + element.height && x > element.left && x < element.left + element.width) {
                alert(element.text);
            }
        });
    }, false);



    // Set the value content (x,y) axis
    var x = 15, y = 20, maxWidth = elem.getAttribute("width"),
        maxHeight = elem.getAttribute("height"), type = 'TL',
        width = 50, height = 60, text = "", topy = 0, leftx = 0;
            


    for (i = 1; i <= 15; i++) {
        y = 10;
        for (j = 1; j <= 6; j++) {
            width = 50, height = 60
            switch (j) {
                case 1:
                    type = 'TL'; // Trailer
                    height = 60;
                    width = 85;
                    text = i + 'E';
                    break;
                case 2:
                    type = 'DR'; // Door
                    height = 35;
                    width = 85;
                    text = i;
                    break;
                case 3:
                    type = 'FL'; // Floor
                    height = 30;
                    width = 40;
                    break;
                case 4:
                    type = 'FL'; // Floor
                    height = 30;
                    width = 40;
                    y -= 10;
                    break;
                case 5:
                    type = 'DR'; // Door
                    height = 35;
                    width = 85;
                    text = i*10 + 1;
                    y = topy;
                    break;
                case 6:
                    type = 'TL'; // Trailer
                    height = 60;
                    width = 85;
                    text = i + 'F';
                    y += 5;
                    break;
            }

            topy = y;
            leftx = x;
            if (type == 'FL') {
                for (k = 1; k <= 12; k++) {
                    elements.push({
                        colour: '#05EFFF',
                        width: width,
                        height: height,
                        top: topy,
                        left: leftx,
                        text: k,
                        textColour: '#fff',
                        type: type
                    });

                    if (k % 2 == 0) {
                        topy = y + elements[j - 1].height + 5;
                        leftx = x;
                        y = topy;
                    }
                    else {
                        topy = y;
                        leftx = x + elements[j - 1].width + 5;
                    }
                }
                x = leftx;
                y = topy;
            }
            else {
                elements.push({
                    colour: '#05EFFF',
                    width: width,
                    height: height,
                    top: y,
                    left: x,
                    text: text,
                    textColour: '#fff',
                    type: type
                });
            }

            //get the y axis for next content
            y = y + elements[j-1].height + 6
            if (y >= maxHeight - elements[j-1].height) {
                break;
            }
        }
        //get the x axis for next content
        x = x + elements[0].width + 15
        if (x >= maxWidth - elements[0].width) {
            break;
        }
    }

    // Render elements.
    elements.forEach(function (element) {
        context.font = "14pt Arial";
        context.strokeStyle = "#000";
        context.rect(element.left, element.top, element.width, element.height);
        if (element.type == 'FL') {
            context.fillText(element.text, element.left + element.width / 4, element.top + element.height / 1.5);
        }
        else {
            context.fillText(element.text, element.left + element.width / 2.5, element.top + element.height / 1.5);
        }
        context.lineWidth = 1;
        context.stroke()
    });

	<canvas id="myCanvas" width="1125" height="668" style="border: 3px solid #ccc; margin:0;padding:0;" />