• Allgemeines
• Schnittstellen/Objekte
• Canvas-Zustand
• Transformationen
• Rechtecke
• Pfad-Schnittstelle
  • arc()
  • arcTo()
  • beginPath()
  • bezierCurveTo()
  • clip()
  • closePath()
  • fill()
  • isPointInPath()
  • lineTo()
  • moveTo()
  • quadraticCurveTo()
  • rect()
  • stroke()
• Farben und Styles
• Linienstile
• Schatten
• Verknüpfungen
• Bilder zeichnen
• Pixel-Manipulation
• Anwendungen
• Links
• Sitemap
• Impressum

Pfad-Schnittstelle - isPointInPath()

Die Methode isPointInPath liefert true zurück, falls der Punkt mit den übergebenen Koordinaten x und y vom aktuellen Arbeitspfad umschlossen wird, im anderen Fall false.

Vorsicht: Wird derzeit nicht von allen Browsern unterstützt! (Safari, Firefox ab Ver 2, Opera nicht)

isPointInPath

void isPointInPath(x, y)

Die Methode erwartet zwei Parameter.

Parameter

x - Horizontale Koordinate des zu überprüfenden Punkts

y - Vertikale Koordinate des zu überprüfenden Punkts

Beispiel

function drawIt(){
  var objCanvas = document.getElementById("canvas_id");
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // Kontext
    var objContext = objCanvas.getContext('2d');

    // Neuen Arbeitspfad anlegen
    objContext.beginPath();

    // Erste Form (Quadrat)
    objContext.moveTo(10, 10);
    objContext.lineTo(60, 10);
    objContext.lineTo(60, 60);
    objContext.lineTo(10, 60);
    objContext.lineTo(10, 10);
    // Füllmethode (rot)
    objContext.fillStyle = "#f00";
    objContext.fill();

    // Falls der Browser die Methode unterstützt
    if(typeof objContext.isPointInPath == "function")
      alert(objContext.isPointInPath(15, 15));
  }else{
    // Sonstiger Code
  }
}

Erläuterung

Zunächst wird ein Quadrat gezeichnet und gefüllt. In einer if-Anweisung wird nun geprüft, ob der Browser isPointInPathunterstützt und bei Erfolg ein Benachrichtigung ausgegeben, ob sich der Punkt innerhalb des Pfads befindet.