[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.isPointInStroke()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

isPointInStroke(x, y)
isPointInStroke(path, x, y)

Przykłady:

<script>

 window.onload = () => {

 const szer = 600;
 const wys = 600;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");
 const zadanie1 = document.getElementById("zadanie1");
 const zadanie2 = document.getElementById("zadanie2");

 //ctx.beginPath();
 ctx.rect(300, 25, 75, 75);
 ctx.stroke();
 zadanie2.innerText = ctx.isPointInStroke(300, 30);

 ctx.font = "50px serif";
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.fillText(zadanie2.innerText, 400, 100);

 const obrys = new Path2D();
 obrys.ellipse(350, 300, 100, 100, Math.PI * 1, 0, 2 * Math.PI);
 ctx.lineWidth = 10;
 ctx.fillStyle = "rgba(0,0,0,0)";
 ctx.strokeStyle = "yellow";
 ctx.fill(obrys);
 ctx.stroke(obrys);

 ctx.beginPath();
 ctx.rect(25, 25, 75, 75);
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.fill();
 zadanie1.innerText = ctx.isPointInPath(50, 60);

 ctx.font = "50px serif";
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.fillText(zadanie1.innerText, 125, 100);

 const obiekt = new Path2D();
 obiekt.arc(100, 300, 100, 0, 2 * Math.PI);
 ctx.fillStyle = "green";
 ctx.fill(obiekt);

 canvas.addEventListener("mousemove", (e) => {
 
 // Sprawdź, czy punkt znajduje się wewnątrz obiektu
 const isPointInPath = ctx.isPointInPath(obiekt, e.offsetX, e.offsetY);
 ctx.fillStyle = isPointInPath ? "orange" : "green";
 zadanie1.innerText = isPointInPath ? "TAK" : "NIE";
 ctx.fill(obiekt);

 const isPointInStroke = ctx.isPointInStroke(
 obrys, e.offsetX, e.offsetY,
 );
 ctx.strokeStyle = isPointInStroke ? "orange" : "yellow";
 zadanie2.innerText = isPointInStroke ? "TAK" : "NIE";
 ctx.fillStyle = "green";
 ctx.clearRect(300, 300, canvas.width, canvas.height);
 ctx.fill(obrys);
 ctx.stroke(obrys);

 });

 return;

 };

</script>

<canvas id="canvas" width="100" height="100"></canvas>
<p>Na ścieżce: <code id="zadanie1">NIE</code></p>
<p>Na ścieżce obrys: <code id="zadanie2">NIE</code></p>

Opis:
Metoda CanvasRenderingContext2D.isPointInStroke() raportuje, czy określony punkt znajduje się w obszarze objętym obrysem ścieżki. Parametry x - współrzędna osi x punktu do sprawdzenia, y - współrzędna osi Y punktu do sprawdzenia, path - ścieżka Path2D do sprawdzenia. Jeśli nie określono, używana jest bieżąca ścieżka. Wartość zwracana wartość logiczna, jeśli true punkt znajduje się wewnątrz obszaru objętego obrysem ścieżki, w przeciwnym razie false.

Zobacz też: