CanvasRenderingContext2D.isPointInPath()

Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

Il metodo CanvasRenderingContext2D.isPointInPath() delle API Canvas 2D controlla se un punto specificato cade all'interno del path corrente.

Sintassi

boolean ctx.isPointInPath(x, y);
boolean ctx.isPointInPath(x, y, algorithmo);

boolean ctx.isPointInPath(path, x, y);
boolean ctx.isPointInPath(path, x, y, algoritmo);

Parametri

x
La coordinata X del punto da controllare
y
La coordinata Y del punto da controllare
Algoritmo
La'lgoritmo con cui viene verificato se il punto cade all'interno del path.
Valori possibili:
path
Il Path2D path da usare come path corrente.

Restituisce

Boolean

Un Boolean, che sarà true (vero) se il punto cade all'interno della forma, altrimenti restitiusce false (falso).

Esempi

Uso del metodo isPointInPath

Questa è una semplice snippet che usa il metodo isPointInPath per controllare se un punto cade o no sulla forma corrente.

HTML

<canvas id="canvas"></canvas>

JavaScript

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

ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(ctx.isPointInPath(10, 10)); // true

Modifica il codice qui sotto, e guarda live come cambia il canvas: per guardare i log apri la tua console

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(ctx.isPointInPath(10, 10)); // true</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Specifiche

Specifica Stato Commenti
WHATWG HTML Living Standard
The definition of 'CanvasRenderingContext2D.isPointInPath' in that specification.
Living Standard  

Compatibilità Browser

Caratteristica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Supporto base (Yes) (Yes) (Yes) (Yes) (Yes)
Parametro path (Yes) 31 (31) Not supported (Yes) Not supported
Caratteristica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Supporto base (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
Parametro path ? ? 31.0 (31) ? ? ?

Note di compatibilità

  • Prima di Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), questo metodo sbagliava a moltiplicare le coordinate del punto specificato per la matrice di trasformazione corrente, prima di controllare il se il punto cadeva o no sul path. Ora il metodo funzioa correttamente anche se il contesto è ruotato, scalato o trasformato in altro modo.

Vedi anche

Tag del documento e collaboratori

 Ultima modifica di: endeios,