aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/css
diff options
context:
space:
mode:
authorMDN <actions@users.noreply.github.com>2021-06-06 00:57:45 +0000
committerMDN <actions@users.noreply.github.com>2021-06-06 00:57:45 +0000
commit6781d84b8a98f4c28efebaf7ed15d0666083ef11 (patch)
treeb41358d544b1e542eb075488ec3b95333b11aa1d /files/es/web/css
parent32530cee2c4594f72494b9d6862c493aaabc0bac (diff)
downloadtranslated-content-6781d84b8a98f4c28efebaf7ed15d0666083ef11.tar.gz
translated-content-6781d84b8a98f4c28efebaf7ed15d0666083ef11.tar.bz2
translated-content-6781d84b8a98f4c28efebaf7ed15d0666083ef11.zip
[CRON] sync translated content
Diffstat (limited to 'files/es/web/css')
-rw-r--r--files/es/web/css/tools/cubic_bezier_generator/index.html321
1 files changed, 0 insertions, 321 deletions
diff --git a/files/es/web/css/tools/cubic_bezier_generator/index.html b/files/es/web/css/tools/cubic_bezier_generator/index.html
deleted file mode 100644
index dab5df8c51..0000000000
--- a/files/es/web/css/tools/cubic_bezier_generator/index.html
+++ /dev/null
@@ -1,321 +0,0 @@
----
-title: Generador de curvas de bézier
-slug: Web/CSS/Tools/Cubic_Bezier_Generator
-translation_of: Web/CSS/Tools/Cubic_Bezier_Generator
-original_slug: Web/CSS/Herramientas/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>Esta es una herramienta de ejemplo que te permitirá editar y ver de manera gráfica una curva de Bézier. Esta no es una herramienta realmente útil, pero ¡lo será!</p>
-
-<p>{{EmbedLiveSample("Tool", 1000, 2000)}}</p>
-</div>
-
-<p> </p>