javascript - 绘制对象后，有没有办法在 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(o.e);
    origX = pointer.x;
    origY = pointer.y;
    var pointer = canvas.getPointer(o.e);
    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(o.e);

    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 您可以创建一个文本对象并与矩形对象组成一个组。然后添加到 Canvas 。

演示

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(o.e);
    origX = pointer.x;
    origY = pointer.y;
    var pointer = canvas.getPointer(o.e);
    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(o.e);

    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>