绘制对象后，有没有办法在织物 js 中向该对象添加文本

Posted 2023-03-25

【中文标题】绘制对象后，有没有办法在织物 js 中向该对象添加文本

【英文标题】：After draw a object is there a way to added a text to that object in fabric js

【发布时间】：2019-01-17 07:37:30

【问题描述】：

在我的应用程序中，我打算使用fabric js 来绘制对象。在这里，我正在使用鼠标绘制矩形。在我画完一个矩形后，我想添加一个文本（名称变量）。文本必须在矩形的顶部。而且我只需要绘制一个矩形。之后绘图情绪应该停止并应该激活选择功能。这可能与织物 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>

【问题讨论】：

是的，有可能。你为此做了什么？任何想法如何实现这一目标？您希望拥有什么样的形状？

我尝试使用“fabric.IText”。但它不能正常工作。我打算只有矩形形状。

【参考方案1】：

onmouseup你可以创建一个文本对象并与矩形对象组成一个组。然后添加到画布。

演示

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>