0

Tengo un polígono creado y que se dibuja en el canvas, este se ve así:

introducir la descripción de la imagen aquí

La cosa es que, si en este polígono quiero meter una imagen sin que se desborde (Es decir que vaya de acuerdo a la forma del polígono), como le podría hacer con una imagen??, ya que lo que hago para dibujar el polígono es simplemente hacer uso de las funciónes

ctx.beginPath,
ctx.closePath,
ctx.stroke,
ctx.fill

Las cuales permiten dibujar lineas y conectarlas para crear una forma, hay manera de usar esta forma ya creada para poner dentro una imagen que quepa en el poligono? (No importa si los lados de la imagen son recortados).

Por ejemplo supongamos que en un triangulo quiero dibujar una imagen sin que esta pase los limites del triangulo:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.save();
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(40,100);
ctx.lineTo(80,20);
ctx.lineTo(120,100);
ctx.closePath();
ctx.stroke();
ctx.restore();
<canvas id = "canvas" width = "400" height = "400"></canvas>

Como haría yo entonces en este triangulo como ejemplo, dibujar una imagen cualquiera que quepa en los limites del triangulo (De momento sin escalarse), es decir con el tamaño de la imagen original, y que esta no pase los limites del triangulo?

(si consigo ver como hacerlo con un triangulo, podré hacerlo con el polígono).

NOTA: las lineas de separación horizontales y verticales del poligono original son hechas aparte del poligono, el polígono como tal es este mismo pero sin las lineas.

1 respuesta 1

1

respuesta traducida: respuesta original

despues haber investigado un poco, creo que es posible hacerlo si se crea un pattern usando la imagen y impostando la el pattern como fillStyle.

var ctx = canvas.getContext("2d");
var pattern = ctx.createPattern(imageObj, "repeat");
ctx.fillStyle = pattern;

así que se trata solo de crear el poligono (usando moveTo y lineTo) y rellenarlo normalmente.

Actualizacion

todavía estoy examinando la posibilidad de manipular o menos la imagen, para adaptarla a un poligono arbitrario. En linea de principio se podria utilizar setTransform para lograrlo.

ctx.save();
ctx.setTransform(m11,m12,m21,m22,dx,dy);
ctx.drawImage(imageObj);
ctx.restore();

Determinar los valores del setTransform es la parte mas complicada (si es posible hacerlo). Hace mucho que no hago calculos matematicos, pero si me recuerdo correctamente esto es lo que se tiene que hacer :

(0,0) --- (w,0)       (x1,y1) --- (x2,y2)
  |         |            |           |
  |  Image  |     =>     |  Morphed  |
  |         |            |           |
(0,h) --- (w,h)       (x3,y3) --- (x4,y4)

por cada punto, tenes que efectuar la siguiente operación de matriz :

 |m11 m21 dx|   |xI|   |xM|
 |m12 m22 dy| X |yI| = |yM|
 | 0   0   1|   | 1|   | 1|

8 ecuaciones, 6 variables (recordando que los elementos de la matriz son la variables, el resto son costantes - nuestros inputs). Podria no tener solución. ahora se trata solo de deducir (o buscar el google o preguntar en Math.SE..) e implementar la formula para cada parametro.

Actualizacion 2

aunque no tenga pruebas concretas, creo que sea imposible hacerlo con setTransform.

Mirando como hace GIMP con su instrumento persperctiva, es necesario cambiar tambien la tercer linea de la matriz de transformación para poder transformar la imagen en un poligono arbitrario.

Las API Canvas no parecen dar los medios necesario para esto (de por si solo las transformaciones afines son admitidas : translation, rotation, scale, cortar o una combinación de las anteriores).

citando este post en 2D Transforms:

Las tranformaciones 2D de CSS3 pueden transformar solo bloques en paralelogramos. por ejemplo, es imposible transformar un bloque en esta forma : [forma irregular]. Para obtener esto es necesario utilizar las tranformaciones 3D CSS3, este es el motivo por el cual el conjunto de construcción de matriz tiene solo 3 puntos de control para arrastrar , no 4

Hay planes para CSS 3D Transforms, pero no solo no se cuanto sea ampliamente suportado. no se si el elemento canvas (con el contexto 2d, osea - WebGL es otra historia) lo permitirà algun dia.

En breve, no es posible hacer lo que buscas con cualquier metodo que conosco.

1
  • ¡Me han servido tus referencias y tu traducción del contenido que encontraste!, en una de las respuestas se evidencia exactamente lo que necesito!, muchísimas gracias federico!, por si alguien necesita hacer algo parecido un día y encuentra esta respuesta, den click al link original de la respuesta de federico y miren la respuesta de el usuario Cbas. De ahí saque la respuesta que me sirvio.
    – Layer
    Commented el 3 abr. 2019 a las 22:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.