Html5 Метод Canvas isPointInPath определяет только последний объект

Question

Пример здесь .

var context=document.getElementById("canvas").getContext("2d");

//Red Box
context.beginPath();
context.fillStyle="Red";
context.rect(10,10,50,50);
context.fill();

//Pink circle
context.beginPath();
context.lineWidth="3";
context.fillStyle="Pink";
context.arc(250,250,50,0,Math.PI*2,false);
context.fill();
context.stroke();

context.font="1.2em Verdana";
context.fillStyle="Black";
context.fillText(context.isPointInPath(35,35),35,35);
context.fillText(context.isPointInPath(250,250),250,250);

Если вы пишете без beginPath, все объекты обнаружены. Как определить объекты на холсте или опустить beginPath?

Answer 1

Если вы хотите использовать эту функцию, вам нужно перестраивать путь каждый раз, когда вы хотите выполнить тест (только не вызывайте fill или stroke).

Что я обычно делаю вместо этогоиспользует мою собственную тестовую функцию «точка-в-многоугольнике» или мою собственную структуру пространственных данных, если объектов много и скорость важна.

Обратите внимание, что холст - это просто растровое изображение, и он не хранитКоманды, которые вы используете, чтобы нарисовать на нем.Вот почему он не может выполнить проверку после рисования фигуры, и вы можете проверить только текущий путь.

После того, как вы вызовете beginPath, предыдущая геометрия пути отбрасывается, и у вас есть только затронутые пиксели, если выназывается fill или stroke.

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

Answer 2

Я только что прочитал, что новым дополнением к спецификации canvas являются объекты Path ().Предположительно они могут быть сохранены и впоследствии протестированы и / или воспроизведены.Может быть полезноЕсли я правильно понял спецификацию.

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#path-objects