在 fabric.js 中沒有默認選擇的畫線

Question

晚安，親愛的同事們：我需要兩個帶有兩個按鈕的繪圖應用程序。 選擇和畫線。 按鈕“選擇”應為 select 形狀以轉換它們。 按鈕畫線應該畫線。

現在我的代碼畫線並使其被選中。 我想划分這個功能。 我應該如何解決我的問題？

 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(o;e). 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(o;e). 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>

Answer 1

目前你有繪圖和選擇，因為 Fabric 使其關聯 canvas 默認可選。

此行為是通過更改調用new fabric.Canvas()返回的 object 上的 boolean .selection屬性來控制的。

因此，您所要做的就是設置兩個按鈕（選擇/繪圖），將canvas.selection設置為所需的 state 並在執行任何繪圖之前從 mouseMove 處理程序返回，以防selection==true 。

這是一個例子：

 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(o;e). 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(o;e). 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>