Использование Context.isPointInPath

Question

Я гуглил по этому поводу, но не нашел ни одного примера, который использует Context.isPointInPath в HTML 5.

Я знаю, что это должно вернуть мне значение true, если точка находится на текущем пути, но как именно вы его используете? Если вы используете его между context.beginPath() и cotext.closePath() (или заполните * в этом отношении)

Я пробовал это:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillRect(0,0, 100,100);
ctx.isPointInPath(50,50); // Returned false
ctx.isPointInPath(50,0);  // Tried it on the actual path, not the filled region, returned false
ctx.isPointInPath(50,8);  // My canvas had the default 8 offset, returned false
ctx.isPointInPath(50,9);  // Canvas had a border of 1px, returned false

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

Наконец, я закрыл путь и проверил значения, по-прежнему вернул false.

Answer 1

Все ваши звонки на isPointInPath() возвращаются как ложные, потому что вы на самом деле не создаете никаких путей, когда работаете со своим контекстом.Функция fillRect() не создает путь.Он просто заполняет некоторые пиксели на холсте тем цветом, который вы указали ранее.

Вместо этого вы захотите использовать одну из функций изменения пути, например rect() или moveTo().Все подробности о isPointInPath() и функциях пути см. В спецификации холста здесь:

isPointInPath (): http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-ispointinpath

функции пути: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#complex-shapes-%28paths%29