En fabric.js, podemos dibujar caminos a mano alzada ( http://fabricjs.com/freedrawing ) ( http://fabricjs.com/fabric-intro-part-4#free_drawing )
(Sí, ya he visto esta publicación y no resuelve ni hace referencia a mi problema)
Lo que estoy tratando de lograr es mostrar el relleno a medida que el usuario dibuja. No solo cuando se crea la ruta (como se ve en la demostración a continuación), sino que también establece ese relleno para todas las demás rutas dibujadas que no quiero. SOLO quiero que el relleno se aplique solo a la ruta que se está dibujando y muestre el relleno a medida que se dibuja.
Mi pregunta es: "¿Cómo puedo mostrar el relleno mientras el usuario está dibujando usando dibujo libre en fabric.js?"
var canvas = new fabric.Canvas('c', { isDrawingMode: true }); canvas.on('path:created', function() { canvas.getObjects().forEach(o => { o.fill = '#000' }); canvas.renderAll(); }); canvas { border: 1px solid #ccc; } <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script> <canvas id="c" width="600" height="400"></canvas> Breve explicación simplificada de la solución:
Creé una nueva clase llamada LassoBrush (muy similar a la clase PencilBrush excepto que el valor del ancho del trazo es 0, el color del trazo = nulo y el relleno cambié de nulo a this.color (que es lo que el usuario establezca) y luego se llama así ..
canvas.freeDrawingBrush = new fabric.LassoBrush(canvas); canvas.freeDrawingBrush.color = '#000'; canvas.isDrawingMode = true;Para quien quiera saber como solucionar esto....
Lo que buscas es un pincel personalizado.
Eche un vistazo a PencilBrush y BaseBrush .
Es relativamente sencillo extender PencilBrush y agregar algo de lógica a closePath en contexto.
La esencia:
Cuando un usuario está dibujando, el pincel se encarga de representar lo que ve. El pincel usa el contexto superior, el contexto inferior lo usa fabric.Canvas. Una vez que se realiza el dibujo, se crea una ruta y se agrega al lienzo.
Se borra el contexto superior.
Esto se hace por razones de rendimiento. El contexto superior está ahí por esa razón. Por cierto, EraserBrush es exactamente lo que he descrito aquí, pero cada vez más complicado.