Context.isPointInPath Wykorzystanie

Question

google za to, ale nie znaleźliśmy żadnego przykładu, który używa Context.isPointInPath w HTML 5.

wiem to ma powrócić mnie ważne, jeśli chodzi o to, na bieżącej ścieżki, ale jak dokładnie to zrobić używasz tego? Należy go używać w między context.beginPath() i cotext.closePath() (lub wypełnić * dla tej sprawy)

Próbowałem to:

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 

Nie wiem, co poszło nie tak, ale wszystkie z nich wróciła fałszywe i nigdy miał jeden powracający prawdziwy.

Wreszcie zamknął drogę i sprawdzane pod kątem wartości, wciąż zwrócony fałszywe.

Answer 1

Wszystkie połączeń na isPointInPath() wracają fałszywe, ponieważ nie są w rzeczywistości tworząc żadnych ścieżek podczas pracy z kontekstu. Funkcja fillRect() nie tworzy ścieżki. Po prostu wypełnia niektóre piksele na twoim płótnie w dowolnym kolorze, który wcześniej określiłeś.

Zamiast tego należy użyć jednej z funkcji modyfikujących ścieżkę, takich jak rect() lub moveTo(). Dla wszystkich szczegółów dotyczących isPointInPath() i funkcji drogi, odnoszą się do spec płótnie tutaj:

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

funkcji Ścieżka: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#complex-shapes-%28paths%29