Espero que todos estén teniendo un día maravilloso..
así que aquí hay algo que hice y una aplicación en línea con fabricjs y pdfjs "casi listo", pero tengo algunos problemas al dibujar líneas ... estoy usando la última versión de FabricJS (5.2.1)
cuando dibujo una línea, dibujará útilmente sin problemas, pero cuando intento seleccionar el botón de dibujar línea y mover el cursor alrededor del lienzo, ¡la línea de dibujo anterior comienza siguiendo al cursor! ¿alguien puede ayudarme con este problema?
También a continuación hay más información sobre el enlace de la aplicación, el código de dibujo lineal, el error y lo que quería ser.
Mi problema: https://gfycat.com/harshspotlesscollie
Esto es lo que estoy tratando de hacer: http://jsfiddle.net/vmachan/L10ren1q/
Dibujar código de línea (se encuentra en el archivo viewer.js: línea 110):
$(".tool-button").on("click", function () { $(".tool-button").removeClass("active"); $(this).addClass("active"); const addLine = () => { if ($("#addLine").hasClass("active")) { mode="draw"; isDown = true; canvas.on("mouse:down", function (o) { var pointer = canvas.getPointer(oe); var points = [ pointer.x, pointer.y, pointer.x, pointer.y ]; line = new fabric.Line(points, { strokeWidth: 5, fill: 'black', stroke: 'black', originX: 'center', originY: 'center', ObjectId: "id" + Math.random().toString(16).slice(2), }); canvas.add(line); canvas.renderAll(); }); canvas.on('mouse:move', function(o){ if (!isDown) return; if(mode=="draw"){ var pointer = canvas.getPointer(oe); line.set({ x2: pointer.x, y2: pointer.y }); canvas.renderAll(); } }); canvas.on('mouse:up', function(){ $(".tool-button").removeClass("active"); isDown = false; canvas.selection=false; }); }; addLine(); });