¡Buenas noches, queridos colegas! Necesito dos aplicaciones de dibujo con dos botones: selección y línea de dibujo. El botón "selección" debe seleccionar formas para transformarlas. El botón dibujar línea debe dibujar línea.
Ahora mi código dibujó la línea y la seleccionó. Quiero dividir estas funciones. ¿Cómo debo solucionar mi problema?
var Line = (function() { function Line(canvas) { this.canvas = canvas; this.isDrawing = false; this.bindEvents(); } Line.prototype.bindEvents = function() { var inst = this; inst.canvas.on('mouse:down', function(o) { inst.onMouseDown(o); }); inst.canvas.on('mouse:move', function(o) { inst.onMouseMove(o); }); inst.canvas.on('mouse:up', function(o) { inst.onMouseUp(o); }); inst.canvas.on('object:moving', function(o) { inst.disable(); }) } Line.prototype.onMouseUp = function(o) { var inst = this; if (inst.isEnable()) { inst.disable(); } }; Line.prototype.onMouseMove = function(o) { var inst = this; if (!inst.isEnable()) { return; } var pointer = inst.canvas.getPointer(oe); var activeObj = inst.canvas.getActiveObject(); activeObj.set({ x2: pointer.x, y2: pointer.y }); activeObj.setCoords(); inst.canvas.renderAll(); }; Line.prototype.onMouseDown = function(o) { var inst = this; inst.enable(); var pointer = inst.canvas.getPointer(oe); origX = pointer.x; origY = pointer.y; var points = [pointer.x, pointer.y, pointer.x, pointer.y]; var line = new fabric.Line(points, { strokeWidth: 5, stroke: 'red', fill: 'red', originX: 'center', originY: 'center', hasBorders: false, hasControls: false }); inst.canvas.add(line).setActiveObject(line); }; Line.prototype.isEnable = function() { return this.isDrawing; } Line.prototype.enable = function() { this.isDrawing = true; } Line.prototype.disable = function() { this.isDrawing = false; } return Line; }()); console.log(fabric); var canvas = new fabric.Canvas('canvas'); var line = new Line(canvas); <div id="canvasContainer"> <canvas id="canvas" width="400" height="400" style="border: solid 1px"></canvas> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js" ></script>En este momento, tiene tanto el dibujo como la selección porque Fabric hace que su lienzo asociado sea seleccionable de forma predeterminada.
Este comportamiento se controla cambiando la propiedad booleana .selection en el objeto devuelto al llamar a new fabric.Canvas() .
Entonces, todo lo que tiene que hacer es configurar dos botones (Seleccionar/Dibujar), configurar canvas.selection en el estado deseado y regresar desde el controlador mouseMove antes de hacer cualquier dibujo en caso de que selection==true .
Aquí hay un ejemplo:
function select(state) { canvas.selection = state; } var Line = (function() { function Line(canvas) { this.canvas = canvas; this.isDrawing = false; this.bindEvents(); } Line.prototype.bindEvents = function() { var inst = this; inst.canvas.on('mouse:down', function(o) { inst.onMouseDown(o); }); inst.canvas.on('mouse:move', function(o) { inst.onMouseMove(o); }); inst.canvas.on('mouse:up', function(o) { inst.onMouseUp(o); }); inst.canvas.on('object:moving', function(o) { inst.disable(); }) } Line.prototype.onMouseUp = function(o) { var inst = this; if (inst.isEnable()) { inst.disable(); } }; Line.prototype.onMouseMove = function(o) { var inst = this; if (!inst.isEnable() || canvas.selection) { return; } var pointer = inst.canvas.getPointer(oe); var activeObj = inst.canvas.getActiveObject(); activeObj.set({ x2: pointer.x, y2: pointer.y }); activeObj.setCoords(); inst.canvas.renderAll(); }; Line.prototype.onMouseDown = function(o) { var inst = this; inst.enable(); var pointer = inst.canvas.getPointer(oe); origX = pointer.x; origY = pointer.y; var points = [pointer.x, pointer.y, pointer.x, pointer.y]; var line = new fabric.Line(points, { strokeWidth: 5, stroke: 'red', fill: 'red', originX: 'center', originY: 'center', hasBorders: false, hasControls: false }); inst.canvas.add(line).setActiveObject(line); }; Line.prototype.isEnable = function() { return this.isDrawing; } Line.prototype.enable = function() { this.isDrawing = true; } Line.prototype.disable = function() { this.isDrawing = false; } return Line; }()); var canvas = new fabric.Canvas('canvas'); canvas.selection = false; var line = new Line(canvas); <div id="canvasContainer"> <canvas id="canvas" width="400" height="400" style="border: solid 1px"></canvas> </div> <button onclick='select(true);'>Select</button> <button onclick='select(false);'>Draw</button> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>