From 6781d84b8a98f4c28efebaf7ed15d0666083ef11 Mon Sep 17 00:00:00 2001
From: MDN <actions@users.noreply.github.com>
Date: Sun, 6 Jun 2021 00:57:45 +0000
Subject: [CRON] sync translated content

---
 .../css/tools/cubic_bezier_generator/index.html    | 321 ---------------------
 1 file changed, 321 deletions(-)
 delete mode 100644 files/de/web/css/tools/cubic_bezier_generator/index.html

(limited to 'files/de/web/css/tools')

diff --git a/files/de/web/css/tools/cubic_bezier_generator/index.html b/files/de/web/css/tools/cubic_bezier_generator/index.html
deleted file mode 100644
index a401f734aa..0000000000
--- a/files/de/web/css/tools/cubic_bezier_generator/index.html
+++ /dev/null
@@ -1,321 +0,0 @@
----
-title: Cubic Bezier Generator
-slug: Web/CSS/Tools/Cubic_Bezier_Generator
-tags:
-  - CSS
-  - Werkzeuge
-translation_of: Web/CSS/Tools/Cubic_Bezier_Generator
----
-<div id="Tool">
-<div class="hidden">
-<pre class="brush:html">&lt;html&gt;
-    &lt;canvas id="bezier" width="336" height="336"&gt;
-    &lt;/canvas&gt;
-    &lt;form&gt;
-       &lt;label for="x1"&gt;x1 = &lt;/label&gt;&lt;input onchange="updateCanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'&gt;
-       &lt;label for="y1"&gt;y1 = &lt;/label&gt;&lt;input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y1" value="0.33" class='field'&gt;
-       &lt;label for="x2"&gt;x2 = &lt;/label&gt;&lt;input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="x2" value="0.14" class='field'&gt;
-       &lt;label for="y2"&gt;y2 = &lt;/label&gt;&lt;input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y2" value="0.53" class='field'&gt;
-       &lt;br&gt;
-       &lt;output id="output"&gt;Log&lt;/output&gt;
-    &lt;/form&gt;
-&lt;/html&gt;
-     </pre>
-
-<pre class="brush:css">.field {
-    width: 40px;
-}
-     </pre>
-
-<pre class="brush:js">function updateCanvas() {
-
-    var x1 = document.getElementById('x1').value;
-    var y1 = document.getElementById('y1').value;
-    var x2 = document.getElementById('x2').value;
-    var y2 = document.getElementById('y2').value;
-
-    drawBezierCurve(x1, y1, x2, y2);
-}
-
-const radius = 4;
-// Place needed to draw the rulers
-const rulers = 30.5;
-const margin = 10.5;
-const basic_scale_size = 5; // Size of 0.1 tick on the rulers
-var scaling; //LIMITATION: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated
-var dragSM = 0; // Drag state machine: 0 = nodrag, others = object being dragged
-
-function initCanvas() {
-    // get the canvas element using the DOM
-    var canvas = document.getElementById('bezier');
-
-    // Make sure we don't execute when canvas isn't supported
-    if (canvas.getContext) {
-        // use getContext to use the canvas for drawing
-        var ctx = canvas.getContext('2d');
-
-        scaling = Math.min(canvas.height - rulers - margin, canvas.width - rulers - margin);
-
-        canvas.onmousedown = mouseDown;
-        canvas.onmouseup = mouseUp;
-    } else {
-        alert('You need Safari or Firefox 1.5+ to see this demo.');
-    }
-}
-
-function cX(x) {
-    return x * scaling + rulers;
-}
-
-function reverseX(x) {
-    return (x - rulers) / scaling;
-}
-
-function lX(x) {
-    //Used when drawing vertical lines to prevent subpixel blur
-    var result = cX(x);
-    return Math.round(result) == result ? result + 0.5 : result;
-}
-
-function cY(y) {
-
-    return (1 - y) * scaling + margin;
-}
-
-function reverseY(y) {
-    return (margin - y) / scaling + 1;
-}
-
-function lY(y) {
-    // Used when drawing horizontal lines to prevent subpixel blur
-    var result = cY(y);
-    return Math.round(result) == result ? result + 0.5 : result;
-}
-
-function drawBezierCurve(x1, y1, x2, y2) {
-
-    // get the canvas element using the DOM
-    var canvas = document.getElementById('bezier');
-
-    // Make sure we don't execute when canvas isn't supported
-    if (canvas.getContext) {
-
-        // use getContext to use the canvas for drawing
-        var ctx = canvas.getContext('2d');
-
-
-
-        // Clear canvas
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-        // Draw the rulers
-        ctx.beginPath();
-        ctx.strokeStyle = "black";
-
-        // Draw the Y axis
-        ctx.moveTo(cX(0), cY(0));
-        ctx.lineTo(cX(1), cY(0));
-        ctx.textAlign = "right";
-
-        for (var i = 0.1; i &lt;= 1; i = i + 0.1) {
-            ctx.moveTo(-basic_scale_size + cX(0), lY(i));
-            if ((i == 0.5) || (i &gt; 0.9)) {
-                ctx.moveTo(-2 * basic_scale_size + cX(0), lY(i));
-                ctx.fillText(Math.round(i * 10) / 10, -3 * basic_scale_size + cX(0), cY(i) + 4);
-                // Limitation the constant 4 should be font size dependant
-            }
-            ctx.lineTo(cX(0), lY(i));
-        }
-        ctx.stroke();
-        ctx.closePath();
-        ctx.beginPath();
-
-        // Draw the Y axis label
-        ctx.save();
-        ctx.rotate(-Math.PI / 2);
-        ctx.textAlign = "left";
-        ctx.fillText("Output (Value Ratio)", -cY(0), -3 * basic_scale_size + cX(0));
-        ctx.restore();
-
-        // Draw the X axis
-        ctx.moveTo(cX(0), cY(0));
-        ctx.lineTo(cX(0), cY(1));
-        ctx.textAlign = "center";
-        for (i = 0.1; i &lt;= 1; i = i + 0.1) {
-            ctx.moveTo(lX(i), basic_scale_size + cY(0));
-            if ((i == 0.5) || (i &gt; 0.9)) {
-                ctx.moveTo(lX(i), 2 * basic_scale_size + cY(0));
-                ctx.fillText(Math.round(i * 10) / 10, cX(i), 4 * basic_scale_size + cY(0));
-                // Limitation the constant 4 should be dependant of the font size
-            }
-            ctx.lineTo(lX(i), cY(0));
-        }
-
-        // Draw the X axis label
-        ctx.textAlign = "left";
-        ctx.fillText("Input (Time Duration Ratio)", cX(0), 4 * basic_scale_size + cY(0));
-        // Limitation the constant 4 should be dependant of the font size
-        ctx.stroke();
-        ctx.closePath();
-
-        // Draw the Bézier Curve
-        ctx.beginPath();
-        ctx.moveTo(cX(0), cY(0));
-        ctx.strokeStyle = 'blue';
-        ctx.bezierCurveTo(cX(x1), cY(y1), cX(x2), cY(y2), cX(1), cY(1));
-        ctx.stroke();
-        ctx.closePath();
-
-
-
-        // Draw the P2 point (with a line to P0)
-        ctx.beginPath();
-        ctx.strokeStyle = 'red';
-        ctx.moveTo(cX(x1), cY(y1));
-        ctx.lineTo(cX(0), cY(0));
-        ctx.stroke();
-        ctx.closePath();
-        ctx.beginPath();
-        ctx.moveTo(cX(x1), cY(y1));
-        ctx.arc(cX(x1), cY(y1), radius, 0, 2 * Math.PI);
-        ctx.stroke();
-        ctx.fillStyle = 'white';
-        ctx.fill();
-        ctx.closePath();
-
-
-
-        // Draw the P3 point (with a line to P1)
-        ctx.beginPath();
-        ctx.strokeStyle = 'red';
-        ctx.moveTo(cX(x2), cY(y2));
-        ctx.lineTo(cX(1), cY(1));
-        ctx.stroke();
-        ctx.closePath();
-
-        ctx.beginPath();
-        ctx.moveTo(cX(x2), cY(y2));
-        ctx.arc(cX(x2), cY(y2), radius, 0, 2 * Math.PI);
-        ctx.stroke();
-        ctx.fill();
-        ctx.closePath();
-
-        // Draw the P1(1,1) point (with dashed hints)
-        ctx.beginPath();
-        ctx.moveTo(cX(1), cY(1));
-        ctx.strokeStyle = 'lightgrey';
-        ctx.lineTo(cX(0), cY(1));
-        ctx.moveTo(cX(1), cY(1));
-        ctx.lineTo(cX(1), cY(0));
-        ctx.stroke();
-        ctx.closePath();
-
-        ctx.beginPath();
-        ctx.strokeStyle = "black";
-        ctx.fillStyle = "black";
-        ctx.arc(cX(1), cY(1), radius, 0, 2 * Math.PI);
-        ctx.fill();
-        ctx.stroke();
-        ctx.closePath();
-
-
-        // Draw the P0(0,0) point
-        ctx.beginPath();
-        ctx.arc(cX(0), cY(0), radius, 0, 2 * Math.PI);
-        ctx.fill();
-        ctx.stroke();
-        ctx.closePath();
-
-
-    } else {
-        alert('You need Safari or Firefox 1.5+ to see this demo.');
-    }
-}
-
-function mouseDown(e) {
-
-    var canvas = document.getElementById('bezier');
-
-    var x1 = cX(document.getElementById('x1').value);
-    var y1 = cY(document.getElementById('y1').value);
-
-    var x = e.pageX - canvas.offsetLeft;
-    var y = e.pageY - canvas.offsetTop;
-
-    var output = document.getElementById('output');
-    output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")";
-
-
-    if ((x1 + radius &gt;= x) &amp;&amp; (x1 - radius &lt;= x) &amp;&amp; (y1 + radius &gt;= y) &amp;&amp; (y1 - radius &lt;= y)) {
-        var output = document.getElementById('output');
-        output.value = "P1!";
-        dragSM = 1;
-    }
-
-    var x2 = cX(document.getElementById('x2').value);
-    var y2 = cY(document.getElementById('y2').value);
-
-    if ((x2 + radius &gt;= x) &amp;&amp; (x2 - radius &lt;= x) &amp;&amp; (y2 + radius &gt;= y) &amp;&amp; (y2 - radius &lt;= y)) {
-        var output = document.getElementById('output');
-        output.value = "P2!";
-        dragSM = 2;
-    }
-
-    // If we are starting a drag
-    if (dragSM != 0) {
-        canvas.onmousemove = mouseMove;
-    }
-}
-
-function mouseUp(e) {
-
-    var output = document.getElementById('output');
-    output.value = "Mouse up!";
-    dragSM = 0;
-    canvas.onmousemove = null;
-}
-
-function mouseMove(e) {
-    if (dragSM != 0) {
-        var canvas = document.getElementById('bezier');
-
-        var x = e.pageX - canvas.offsetLeft;
-        var y = e.pageY - canvas.offsetTop;
-
-        var output = document.getElementById('output');
-        output.value = "Drag!";
-
-        if (dragSM == 1) {
-            var x1 = document.getElementById('x1');
-            var y1 = document.getElementById('y1');
-            x1.value = reverseX(x);
-            x1.value = Math.round(x1.value * 10000) / 10000;
-            y1.value = reverseY(y);
-            y1.value = Math.round(y1.value * 10000) / 10000;
-            if (x1.value &lt; 0) { x1.value = 0; }
-            if (x1.value &gt; 1) { x1.value = 1; }
-        } else if (dragSM == 2) {
-            var x2 = document.getElementById('x2');
-            var y2 = document.getElementById('y2');
-            x2.value = reverseX(x);
-            x2.value = Math.round(x2.value * 10000) / 10000;
-            y2.value = reverseY(y);
-            y2.value = Math.round(y2.value * 10000) / 10000;
-            if (x2.value &lt; 0) { x2.value = 0; }
-            if (x2.value &gt; 1) { x2.value = 1; }
-        }
-        updateCanvas();
-    }
-}
-
-initCanvas();
-updateCanvas();
-     </pre>
-</div>
-
-<p>{{draft}}</p>
-
-<p><span class="seoSummary">Dies ist ein Beispielwerkzeug; es erlaubt die Bearbeitung von Bezierkurven. Es ist noch nicht wirklich nützlich, wird es aber sein!</span></p>
-
-<p>{{EmbedLiveSample("Tool", 1000, 2000)}}</p>
-</div>
-- 
cgit v1.2.3-54-g00ecf