Solución:
No hay un borrador integrado en Fabric y la implementación es un poco difícil.
Lo que pasa con Fabric es que todo está basado en objetos y la mayoría de las cosas también están basadas en vectores.
A diferencia del lienzo nativo, no podemos simplemente borrar algunos píxeles en un mapa de bits global. Tenemos todo el modelo de objetos debajo, y la salida del lienzo es un bucle simple de todos esos objetos renderizados en el lienzo.
Una forma en que podríamos emular el borrador es tal vez con algún tipo de superposición en la parte superior del lienzo. Y una especie de dibujar líneas “borradas” en él, dando la ilusión de que los objetos subyacentes están siendo eliminados.
Pero todavía hay complicaciones con esto:
- ¿Cómo serializaríamos esta capa (a JSON o SVG)?
- ¿Qué pasa si borra la mitad del trazado previamente dibujado y luego quiere trabajar con una forma ya borrada? La forma en sí necesita ser modificada; la superposición no funcionaría.
- ¿El borrador afectaría solo a las formas o también al color de fondo? ¿Qué pasa con la imagen de fondo?
Es probable que haya más problemas en los que no pensé en este momento.
Acabo de escribir mi borrador en Fabric y espero poder responder también las preguntas hechas por @kangax.
Primero, si desea tener un borrador de escritura a mano, debe construir un objeto como este:
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
Luego pirateé ligeramente la biblioteca de tejidos real (v. 2.4.3) aquí:
createPath: function(pathData) {
var path = new fabric.Path(pathData, {
fill: null,
stroke: this.color,
strokeWidth: this.width,
strokeLineCap: this.strokeLineCap,
strokeMiterLimit: this.strokeMiterLimit,
strokeLineJoin: this.strokeLineJoin,
strokeDashArray: this.strokeDashArray,
// ADDED BY AZ (24 Nov 2018)
globalCompositeOperation: this.globalCompositeOperation,
id: this.id
});
Utilizando globalCompositeOperation puedes administrar tu canvas.freeDrawingBrush para dibujar un camino de color (el color que desee, elijo rojo, pero también puede elegir el color de fondo de su lienzo) como este:
canvas.isDrawingMode = 1;
canvas.freeDrawingBrush.color = "red";
canvas.freeDrawingBrush.width = 10;
canvas.freeDrawingBrush.globalCompositeOperation = 'destination-out';
canvas.freeDrawingBrush.id = 'erasure';
ctx.beginPath(); // the context of canvas
canvas.renderAll();
Entonces, cuando mueva el mouse sobre el lienzo, verá un camino rojo. Cuando mueve el mouse hacia arriba, finalmente se crea la ruta y se aplica el gCO, borrando todo lo que se encuentra en la ruta roja.
Bueno, si quieres guardar el lienzo, prefiero usar el canvas.toSVG() función (es ideal para pantallas retina si puedes administrarla). Entonces, para guardar el lienzo como SVG, solo necesita esta línea canvas.toSVG() y puede almacenar el resultado en algún lugar. Cuando desee restaurar el lienzo, debe administrar también la identificación de ‘borrado’, para que pueda usar mi función de restauración:
function restoreSketch(imageSVG) {
fabric.loadSVGFromString(imageSVG, function (objects, options) {
$.each(objects, function (index, value) {
if (value.id && value.id == 'erasure') {
value.set({
globalCompositeOperation: 'destination-out'
}); //set gCO for value
}
});
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
});
Espero ser útil para todos los que tienen dolores de cabeza con Fabric.js
EDITAR: como sugirió @Benni, las líneas relacionadas con el borrado se pueden desplazar. Si desea fijarlos en el lienzo, puede cambiar ligeramente el código usando lockMovementX y lockMovementY. Entonces, en la biblioteca fabric.js, después
globalCompositeOperation: this.globalCompositeOperation,
agregar:
lockMovementX: this.lockMovementX,
lockMovementY: this.lockMovementY,
Luego, en tu código, después canvas.freeDrawingBrush.id = 'erasure'; agregar:
canvas.freeDrawingBrush.lockMovementX = true;
canvas.freeDrawingBrush.lockMovementY = true;