Как выбрать HTML5 формы холста?

Question

У меня есть холст HTML5, на котором я нарисовал несколько фигур.

Я хочу, чтобы при щелчке мышью по любой фигуре фигура выбиралась (по крайней мере, она может сказать, какая фигура выбрана).

Спасибо.

Answer 1

Попробуйте использовать существующую библиотеку холста (или создайте свою собственную), в которой есть событие при выборе фигуры.

В приведенном ниже примере используется библиотека Kinetic JS , а приведенный ниже пример взят из Пример событий области холста HTML5 :

var triangle = new Kinetic.Shape(function(){
    var context = this.getContext();
    context.beginPath();
    context.lineWidth = 4;
    context.strokeStyle = "black";
    context.fillStyle = "#00D2FF";
    context.moveTo(120, 50);
    context.lineTo(250, 80);
    context.lineTo(150, 170);
    context.closePath();
    context.fill();
    context.stroke();
});

triangle.on("mouseout", function(){
    writeMessage(messageLayer, "Mouseout triangle");
});

triangle.on("mousemove", function(){
    var mousePos = stage.getMousePosition();
    var x = mousePos.x - 120;
    var y = mousePos.y - 50;
    writeMessage(messageLayer, "x: " + x + ", y: " + y);
});

shapesLayer.add(triangle);

var circle = new Kinetic.Shape(function(){
    var canvas = this.getCanvas();
    var context = this.getContext();
    context.beginPath();
    context.arc(380, canvas.height / 2, 70, 0, Math.PI * 2, true);
    context.fillStyle = "red";
    context.fill();
    context.lineWidth = 4;
    context.stroke();
});

circle.on("mouseover", function(){
    writeMessage(messageLayer, "Mouseover circle");
});
circle.on("mouseout", function(){
    writeMessage(messageLayer, "Mouseout circle");
});
circle.on("mousedown", function(){
    writeMessage(messageLayer, "Mousedown circle");
});
circle.on("mouseup", function(){
    writeMessage(messageLayer, "Mouseup circle");
});

shapesLayer.add(circle);

stage.add(shapesLayer);
stage.add(messageLayer);

Кроме того, я включил некоторое обнаружение при наведении мыши, если курсор находится внутри фигуры, без использования каких-либо библиотек JavaScript.

Обнаружение мыши на основе прямоугольной формы:

function isCursorWithinRectangle(x, y, width, height, mouseX, mouseY) {
    if(mouseX > x && mouseX < x + width && mouseY > y && mouseY < y + height) {
        return true;
    }
    return false;
}

Обнаружение мыши на основе окружности:

function isCursorWithinCircle(x, y, r, mouseX, mouseY) {
    var distSqr = Math.pow(x - mouseX, 2) + Math.pow(y - mouseY, 2);

    if(distSqr < r * r) {
        return true;
    }
    return false;
}

Answer 2

Canvas не имеет интерфейса для элементов , например, DOM.Он используется исключительно для рисования.

Вам необходимо создать свои активы как объекты и использовать цикл рисования для их рисования.Затем вы забываете об элементе canvas, работаете со своими объектами, с их смещениями и т. Д.

Answer 3

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

Идея состоит в том, что вы дублируете все свои фигуры на скрытом вторичном холсте, где выприсвойте каждой фигуре уникальный цвет.При выполнении наведения мыши или события щелчка на исходном холсте вы сохраняете координаты мыши (x, y) относительно видимого холста, а затем ищите цвет пикселя на скрытом холсте, используя те же координаты.Поскольку каждая фигура имеет уникальный цвет на скрытом холсте, этот цвет соответствует точной форме, выбранной пользователем.

Обратите внимание, что поддерживается только примерно 16,7 миллионов форм, поскольку RGB имеет только 24 бита цвета,но этого должно быть более чем достаточно.

Вот простой пример использования D3 и Canvas: http://bl.ocks.org/syntagmatic/6645345