lienzo html5 estirar el lado de un rectángulo

¿Es posible que pueda estirar el lado de un rectángulo y cambiar su forma de línea recta a otra cosa como un arco o algo así al estirarlo desde el centro como se muestra a continuación?

enter image description here

preguntado el 13 de enero de 13 a las 16:01

3 Respuestas

Probablemente no quiera usar un arco como lo sugirió otra persona, ya que un arco solo le dará, bueno, un arco. Un mejor enfoque sería representar su rectángulo (4 lados) como 4 beziers cúbicos. Un bezier cúbico con puntos de control que son colineales con los puntos inicial y final producirá una línea recta, por lo que aún puede representar un rectángulo normal. Luego, cuando desee estirar los lados en una curva, simplemente mueva los puntos de control hacia afuera, hacia adentro, hacia arriba o hacia abajo según la curva que desee. Probablemente sería beneficioso obtener un comprensión rápida de beziers.

Haré una foto para ilustrar esto mejor y la incluiré en varios minutos.

Construyendo un rectángulo a partir de beziers cúbicos

Entonces, cuando dibujemos nuestro rectángulo, el código se verá así:

ctx.moveTo(p1.x,p1.y);
ctx.bezierCurveTo(cp1.x,cp1.y,cp2.x,cp2.y,p2.x,p2.y);
ctx.bezierCurveTo(cp3.x,cp3.y,cp4.x,cp4.y,p3.x,p3.y);
ctx.bezierCurveTo(cp5.x,cp5.y,cp6.x,cp6.y,p4.x,p4.y);
ctx.bezierCurveTo(cp7.x,cp7.y,cp8.x,cp8.y,p1.x,p1.y);

Respondido el 13 de enero de 13 a las 23:01

Después de tu sugerencia también encontré Curva cuadrática. ¿Puedo usar esto también? - Sandeep Kumar

Ciertamente, una curva cuadrática sigue siendo un bezier, simplemente cuadrática. Un bezier cúbico simplemente le dará otro grado de libertad para crear curvas. Un cuadrático es también un bezier cúbico pero con ambos puntos de control en la misma ubicación. Cualquiera de los dos funcionará, pero elegiría un bezier cúbico para tener más libertad en la curva, a menos que sepa que solo desea admitir una curva limitada. - DerekR

No puede lograr esto simplemente dibujando un rectángulo. Sin embargo, puedes dibujar las tres líneas y dibujar un arco para el cuarto lado. Aquí hay un tutorial on context.arc().

Respondido el 13 de enero de 13 a las 16:01

en realidad, quiero un rectángulo que tenga lados normales, luego quiero estirar cualquier lado del rectángulo para cambiar su forma. - Sandeep Kumar

@Sandy eso no es posible, no puedes crear un lienzo que no sea rectangular. Zoltán Toth

solo un ejemplo de lo que es posible - DEMO Pero el lienzo sigue siendo rectangular (borde rojo) - Zoltán Toth

puede usar la función quadraticCurveTo, tiene 4 parámetros y es bastante fácil de usar, mire el ejemplo en

http://jsfiddle.net/55Ws3/

<canvas width="800" height="800" id="world" style="border: 1px solid red;"><p class="noCanvas">You need a <a href="#">modern browser</a> to view this.</p></canvas>


var canvasElement = document.getElementById('world');
// Always check for properties and methods, to make sure your code doesn't break 
// in other browsers.
if (canvasElement && canvasElement.getContext) {
    // Get the 2d canvasContext.
    // Remember: you can only initialize one canvasContext per element.
    var canvasContext = canvasElement.getContext('2d');
    if (canvasContext) {
        canvasContext.beginPath();
        canvasContext.moveTo(100, 200);
        canvasContext.lineTo(200, 200);
        canvasContext.quadraticCurveTo(325, 250, 200, 300);
        canvasContext.lineTo(100, 300);
        canvasContext.lineTo(100, 200);
        canvasContext.fillStyle = 'red';
        canvasContext.strokeStyle = 'red';
        canvasContext.lineWidth = 2;
        canvasContext.fill();
        canvasContext.stroke();
        canvasContext.closePath();
    }
}

Respondido 08 Jul 13, 12:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.