diff options
Diffstat (limited to 'files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html')
| -rw-r--r-- | files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html | 206 |
1 files changed, 206 insertions, 0 deletions
diff --git a/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html b/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html new file mode 100644 index 0000000000..5eac7321fe --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html @@ -0,0 +1,206 @@ +--- +title: CanvasRenderingContext2D.isPointInPath() +slug: Web/API/CanvasRenderingContext2D/isPointInPath +translation_of: Web/API/CanvasRenderingContext2D/isPointInPath +--- +<div>{{APIRef}}</div> + +<p>Die Methode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.isPointInPath()</code></strong> der Canvas 2D API entscheidet darüber, ob ein Punkt in einem gegeben Pfad enthalten ist.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">boolean <var><em>ctx</em>.isPointInPath(x, y); +boolean <var><em>ctx</em>.isPointInPath(x, y, fillRule); + +boolean <var><em>ctx</em>.isPointInPath(path, x, y); +boolean <var><em>ctx</em>.isPointInPath(path, x, y, fillRule);</var></var></var></var> +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>x</dt> + <dd>Die X-Koordinate des zu prüfenden Punktes.</dd> + <dt>y</dt> + <dd>Die Y-Koordinate des zu prüfenden Punktes.</dd> + <dt><code>fillRule</code></dt> + <dd>Der Algorithmus, der prüft, ob der Punkt innerhalb oder außerhalb des Pfades liegt.<br> + Mögliche Werte: + <ul> + <li><code><strong>"nonzero</strong></code>": Die <a href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding Regel</a>, sie ist standardmäßig eingestellt.</li> + <li><code><strong>"evenodd"</strong></code>: Die <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding Regel</a>.</li> + </ul> + </dd> + <dt><code>path</code></dt> + <dd>Ein {{domxref("Path2D")}} Objekt.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<dl> + <dt>{{jsxref("Boolean")}}</dt> + <dd>Ein Boolean, welcher <code>true</code> ist, wenn der gegebene Punkt innerhalb des gegeben Pfades liegt, ansonsten <code>false</code>.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Benutzung_der_Methode_isPointInPath">Benutzung der Methode <code>isPointInPath</code></h3> + +<p>Dies ist ein einfaches Snippet, welches die <code>isPointinPath</code> Methode nutzt, um zu prüfen, ob ein Punkt in gegebenem Pfad enthalten ist.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">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 +</pre> + +<p>Editieren Sie den folgenden Quelltext. Die Änderungen werden in Echtzeit übernommen und Log-Ausgaben in die <a href="/en-US/docs/Tools/Browser_Console">console</a> ausgegeben:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ispointinpath", "CanvasRenderingContext2D.isPointInPath")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Path parameter</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop(31) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Path parameter</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile(31) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<ul> + <li>Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), this method incorrectly failed to multiply the specified point's coordinates by the current transformation matrix before comparing it to the path. Now this method works correctly even if the context is rotated, scaled, or otherwise transformed.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> |