0
165
ViewsCómo crear diseños/formas personalizados usando el elemento canvas en react/javascript
Estoy trabajando en una aplicación web de diseño de interiores en 2D, donde un usuario podrá agregar imágenes/SVG al diseño a continuación. Estoy trabajando en el elemento de lienzo, pero el problema es que el elemento de lienzo solo toma altura y ancho, por lo que puedo crear un rectángulo o un cuadrado. ¿Es posible usar el elemento canvas? Si no, sugiera amablemente cualquier otro enfoque. gracias 
·
Juan Pablo Isaza
1 answers
Answer question0
Puede usar Path para crear formas personalizadas y llamar a la función Clip para cortar la imagen en la ruta requerida
let canvas = document.querySelector("canvas"); let ctx = canvas.getContext("2d"); // creating the path similar to the question ctx.beginPath(); ctx.moveTo(4,0); ctx.lineTo(4,4); ctx.lineTo(0,4); ctx.lineTo(0,12); ctx.lineTo(22,12); ctx.lineTo(22,0); ctx.closePath(); ctx.clip(); // cut the canvas to above path ctx.drawImage(imageTag, 0, 0); // now this will show image to the segmented path
·
Juan Pablo Isaza
Report
Answer question