绘制对象后，有一种方法可以在fabric js中向该对象添加文本

Question

在我的应用程序中，我计划使用Fabric JS绘制对象。 在这里，我使用鼠标绘制矩形。 完成绘制矩形后，我想添加一个文本（名称变量）。 文本必须在矩形的顶部。而且我只需要绘制一个矩形。 在那之后，绘画情绪应该停止并且选择功能应该被激活.fabric js可以做到这一点。

 var canvas = new fabric.Canvas('canvas1', { selection: false }); var Name = "This is a rectangle"; function drawrec() { var rect, isDown, origX, origY; removeEvents(); changeObjectSelection(false); canvas.on('mouse:down', function(o) { isDown = true; var pointer = canvas.getPointer(oe); origX = pointer.x; origY = pointer.y; var pointer = canvas.getPointer(oe); rect = new fabric.Rect({ left: origX, top: origY, originX: 'left', originY: 'top', width: pointer.x - origX, height: pointer.y - origY, angle: 0, selectable:false, fill: '#07ff11a3', stroke: 'black', transparentCorners: false }); canvas.add(rect); }); canvas.on('mouse:move', function(o) { if (!isDown) return; var pointer = canvas.getPointer(oe); if (origX > pointer.x) { rect.set({ left: Math.abs(pointer.x) }); } if (origY > pointer.y) { rect.set({ top: Math.abs(pointer.y) }); } rect.set({ width: Math.abs(origX - pointer.x) }); rect.set({ height: Math.abs(origY - pointer.y) }); canvas.renderAll(); }); canvas.on('mouse:up', function(o) { isDown = false; rect.setCoords(); }); } function enableSelection() { removeEvents(); changeObjectSelection(true); canvas.selection = true; } function changeObjectSelection(value) { canvas.forEachObject(function (obj) { obj.selectable = value; }); canvas.renderAll(); } function removeEvents() { canvas.isDrawingMode = false; canvas.selection = false; canvas.off('mouse:down'); canvas.off('mouse:up'); canvas.off('mouse:move'); } 

 <div class="fullpage"> <div class="section"> <a class="thmb" href="#" onclick="drawrec()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Rectangle</a> <a class="thmb" href="#" onclick="enableSelection()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Selection</a> <div class="canvas-container"> <canvas id="canvas1" style="border: 1px solid;width: 500px;height: 500px"></canvas> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'></script> 

Answer 1

onmouseup可以创建一个文本对象，并使用rect对象组成一个组。 然后添加到画布。

DEMO

 var canvas = new fabric.Canvas('canvas1', { selection: false }); var Name = "This is a rectangle"; function drawrec() { var rect, isDown, origX, origY; removeEvents(); changeObjectSelection(false); canvas.on('mouse:down', function(o) { isDown = true; var pointer = canvas.getPointer(oe); origX = pointer.x; origY = pointer.y; var pointer = canvas.getPointer(oe); rect = new fabric.Rect({ left: origX, top: origY, originX: 'left', originY: 'top', width: pointer.x - origX, height: pointer.y - origY, angle: 0, selectable:false, fill: '#07ff11a3', stroke: 'black', transparentCorners: false }); canvas.add(rect); }); canvas.on('mouse:move', function(o) { if (!isDown) return; var pointer = canvas.getPointer(oe); if (origX > pointer.x) { rect.set({ left: Math.abs(pointer.x) }); } if (origY > pointer.y) { rect.set({ top: Math.abs(pointer.y) }); } rect.set({ width: Math.abs(origX - pointer.x) }); rect.set({ height: Math.abs(origY - pointer.y) }); canvas.renderAll(); }); canvas.on('mouse:up', function(o) { isDown = false; rect.setCoords(); var text = new fabric.Text(Name,{ left:rect.left, top:rect.top, fontSize: 20 }); var group = new fabric.Group([rect,text]); canvas.remove(rect); canvas.add(group); group.addWithUpdate(); enableSelection(); }); } function enableSelection() { removeEvents(); changeObjectSelection(true); canvas.selection = true; } function changeObjectSelection(value) { canvas.forEachObject(function (obj) { obj.selectable = value; }); canvas.renderAll(); } function removeEvents() { canvas.isDrawingMode = false; canvas.selection = false; canvas.off('mouse:down'); canvas.off('mouse:up'); canvas.off('mouse:move'); } 

 <div class="fullpage"> <div class="section"> <a class="thmb" href="#" onclick="drawrec()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Rectangle</a> <a class="thmb" href="#" onclick="enableSelection()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Selection</a> <div class="canvas-container"> <canvas id="canvas1" width= 400 height= 400 style="border: 1px solid;"></canvas> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'></script>