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

Question

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

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

спасибо.

Answer 1

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

В приведенном ниже примере используется Kinetic JS library, а ниже пример из HTML5 Canvas Region Events Example:

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

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

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

Answer 3

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

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

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

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