Canvas isPointInPath не работает с ctx.drawImage () - PullRequest
Новая
       11

Canvas isPointInPath не работает с ctx.drawImage ()

2 голосов
/ 23 декабря 2011
  1. Полагаю, это не сработает, потому что canvas рисует растровое изображение вектора (а растровое изображение - это не путь).
  2. Даже если это сработало, растровое изображение, скорее всего, всегда имеет прямоугольный разрешитель.

Есть ли способ использовать что-то вроде isPointInPath при использовании drawImage?

пример:

  • Верхний холст рисуется с помощью drawImage, а isPointInPath не работает.
  • Нижний холст рисуется с помощью arc и isPointInPath работает.

ссылка на мое доказательство

** РЕДАКТИРОВАТЬ **

Я рисую круг на одном холсте и используюisPointInPath чтобы увидеть, находится ли указатель мыши внутри круга (нижний холст в моем примере).Я также «копирую» нижний холст на верхний холст, используя drawImage.Обратите внимание, что isPointInPath не будет работать на верхнем холсте (скорее всего, по причинам, указанным выше).Есть ли обходной путь, который я могу использовать для этого, который будет работать для ЛЮБОГО вида пути (или растрового изображения)?

Ответы [ 3 ]

3 голосов
/ 24 декабря 2011

В контексте холста есть эта скрытая вещь, называемая текущим путем. ctx.beginPath, ctx.lineTo и т. Д. Создайте этот путь.

Когда вы звоните ctx.stroke() или ctx.fill(), холст поглаживает или заполняет этот путь.

Даже после обводки или заливки путь все еще присутствует в контексте.

Этот путь - только вещь, которую isPointInPath проверяет.

Если вы хотите проверить, находится ли что-то на изображении, которое вы нарисовали, или на прямоугольнике, нарисованном с помощью ctx.fillRect(), это невозможно при использовании встроенных методов.

Как правило, вы хотите использовать функцию «точка-в-прямоугольнике», которую вы пишете сами (или получаете от кого-то другого).

Если вы ищете, как сделать идеальное пиксельное (а не только прямоугольное изображение) обнаружение попадания для изображения, здесь обсуждаются различные методы: Пиксельная 2D-мышь с выбором Canvas

1 голос
/ 24 декабря 2011

Вы можете попробовать переопределить ctx.drawImage(), чтобы всегда рисовать прямоугольник позади самого изображения, например так ( JSFiddle пример ): 

ctx.customDrawImage = function(image, x, y){
    this.drawImage(image, x, y);
    this.rect(x, y, image.width, image.height);
}
var img1 = new Image();
img1.onload = function(){
var x = y = 0;
ctx.drawImage(img1, x, y);
console.log(ctx.isPointInPath(x + 1, y + 1));

x = 1.25 * img1.width;
ctx.customDrawImage(img1, x, y);
console.log(ctx.isPointInPath(x + 1, y + 1));

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

0 голосов
/ 07 мая 2017

Для меня isPointInPath не удалось после перемещения canvas.Итак, я использовал:

mouseClientX -= gCanvasElement.offsetLeft; mouseclientY -= gCanvasElement.offsetTop;

...