Curvas cuadráticas de Bézier
Para dibujar una curva cuadrática de Bézier en el <canvas> utilizamos, además de otros métodos()
y propiedades ya conocidas, un método especifico: bezierCurveTo()
| JavaScript | Descripción | Defecto | |
|---|---|---|---|
| lineWidth | context.lineWidth = numero; | Determina (sets) o devuelve (returns) la grosor de la línea. | 1 |
| strokeStyle | context.strokeStyle = color | gradient | patrón; | Determina (sets) o devuelve (returns) el color, gradiente o patrón de la línea. | negro |
| fillStyle | context.fillStyle = color | gradient | patrón; | Determina o devuelve el color, gradiente o patrón del relleno. | negro |
| beginPath() | context.beginPath(); | Empezamos a dibujar | |
| quadraticCurveTo() | context.quadraticCurveTo(cx,cy,x,y); | Define una curva cuadrática de Bézier. cx,cy = coordenadas punto de anclaje (control point) x,y = coordenadas punto final (el punto de partida siendo determinado previamente). |
|
| fill() | context.fill(); | Rellena una forma geométrica. | black |
| stroke() | context.stroke(); | Dibuja una línea ya definida. |
Vea la chuleta con las propiedades y metodos() de canvas.
Repaso de Geometría
Tres puntos del plano: a, pc y z definen una curva cuadrática de Bézier.
La curva empieza en el punto a, se dirige hacia pc ( punto de control ) y llega a z viniendo de la dirección del punto de control.
Usualmente, no pasará por pc. Este punto sólo proporciona información direccional.
See the Pen curva cuadrática de Bézier by Gabi (@enxaneta) on CodePen.
Lea más sobre las curvas de Bézier en Wikipedia
Veamos un ejemplo. A continuación dibujamos una curva cuadrática de Bézier en el <canvas>. Utilizamos ctx.moveTo(ax,ay) para mover el "lapiz"
en el punto a. Para esbozar la curva utilizamos ctx.quadraticCurveTo( pcx,pcy,zx,zy ), donde pcx,pcy son las coordenadas del punto de control pc, y
zx, zy son las coordenadas del punto final z.
Para dar estilo a la curva utilizamos como siempre las propiedades lineWidth y strokeStyle. Al final dibujamos la curva ya definida, con stroke().
ctx.beginPath(); ctx.moveTo(ax,ay);// aquí empieza la curva ctx.quadraticCurveTo(pcx,pcy,zx,zy); ctx.stroke();
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
var ax = 20, ay = 130;
var pcx = 40, pcy = 15;
var zx = 180, zy = 170;
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(ax,ay);// aquí empieza la curva
ctx.quadraticCurveTo(pcx,pcy,zx,zy);
ctx.stroke();
}
}
Calcular las coordenadas de un punto en la curva
Para calcular las coordenadas de un punto en la curva de Bézier utilizamos una fórmula encontrada en Vikipedia
x = (1 - t) * (1 - t) * ax + 2 * (1 - t) * t * pcx + t * t * zx; y = (1 - t) * (1 - t) * ay + 2 * (1 - t) * t * pcy + t * t * zy;
El parámetro t ( var t ) es muy importante. Puede tomar valores entre 0 y 1 y representa la posición del punto es la curva.
Si t == 0, el punto se encuentra justo al inicio de la curva, coincidiendo con ax, ay.
Si t == .5 el punto cuyas coordenadas queremos calcular se encuentra justo en el medio de la curva.
Si t == 1 el punto se encuentra al final de la curva, coincidiendo con x2, y2.
var canvas1 = document.getElementById("lienzo1");
if (canvas1 && canvas1.getContext) {
var ctx1 = canvas1.getContext("2d");
if (ctx1) {
var ax = 20, ay = 130;
var pcx = 40, pcy = 15;
var zx = 180, zy = 170;
ctx1.strokeStyle = "blue";
ctx1.lineWidth = 5;
ctx1.beginPath();
ctx1.moveTo(ax,ay);
ctx1.quadraticCurveTo(pcx,pcy,zx,zy);
ctx1.stroke();
// calculamos las coordenadas del punto
// con una fórmula encontrada en wikipedia
var t = .7; // valor entre 0 - 1
x = (1 - t) * (1 - t) * ax + 2 * (1 - t) * t * pcx + t * t * zx;
y = (1 - t) * (1 - t) * ay + 2 * (1 - t) * t * pcy + t * t * zy;
ctx1.beginPath();
ctx1.fillStyle = "red";
ctx1.arc(x,y,10,0,2*Math.PI);
ctx1.fill();
}
}