如何在运行时使用 fabric.js 设置对象（矩形、圆形、手绘等）类型

Question

我是fabric.js 的初学者。我有一个画布，我正在为画布提供背景。我想在图像上绘制以下类型的对象，如下所示。

1. 文字
2. 圈子
3. 矩形
4. 手绘

我正在通过下拉菜单选择这些类型的对象。这是jsfiddle。

这是我的代码：

<table>
  <tr>
    <td>
      <select id="ddlSelectionType" onchange="">
        <option value="1">Rectangle</option>
        <option value="0">Text</option>
        <option value="2">Circle</option>
        <option value="3">Free Hand Mode</option>
      </select>
    </td>
    <td>
    </td>
  </tr>
  <tr id="trComments">
    <td>
      select comments
      <select id="ddlCommnets">
        <option value="0">No Commnets</option>
        <option value="1">Abc </option>
        <option value="2">XYZ </option>
        <option value="3">Lmnop</option>
        <option value="4">WFSSS</option>
      </select>
    </td>
    <td>
      <input id="btnApplyComments" type="button" value="Apply Comments" onclick="createText()" />
    </td>
  </tr>
  <tr>
    <td>
    select font color  <input id="btnColor" type="color" name="favcolor" value="#0C32FF">
    </td>
    <td>
     select font size  <input id="bntfontsize" type="number" name="favcolor" value="20" min="10" max="30">
    </td>
  </tr>
  <tr>
    <td>
      <div id="divJsonText">
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="setJson" onclick="setfabricTextToJson()" />
    </td>
    <td>
      <input type="button" value="getJson" onclick="getfabricJsonToText()" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value=" Delete selected object(s) " id="delete" />
    </td>
    <td>
      <input type="button" value="Reset" onclick="reset()" />
    </td>
  </tr>
</table>
<canvas id="wmcCanvas" width="600" height="800">
  Your browser does not support the canvas element.
</canvas>

当从选择绘制类型下拉列表中选择文本时，我必须从第二个下拉列表中选择文本作为 cmets。

如果我从下拉列表中选择矩形，则一切正常，但如果我先选择文本并尝试从下拉 cmets 应用文本，则会出现异常，然后如果我想绘制矩形，则它不会被绘制。

Answer 1

<script>
var canvas = new fabric.Canvas('canvas', { selection: false });
var rect, isDown, origX, origY, obj=new Array(),wdt,hgt,col='red',per=0;
canvas.setHeight(250);
canvas.setWidth(1068.5);
canvas.selection = false;
canvas1.on('mouse:down', function(o){
    isDown1 = true;
    var pointer1 = canvas1.getPointer(o.e);
    origX1 = pointer1.x;
    origY1 = pointer1.y;
    var pointer1 = canvas1.getPointer(o.e);
    rect1 = new fabric.Rect({
        left: origX1,
        top: origY1,
        originX: 'left',
        originY: 'top',
        width: pointer1.x-origX1,
        height: pointer1.y-origY1,
        angle: 0,
        fill:col1,
        transparentCorners: false,
        opacity:.8
    });
    canvas1.add(rect1);

});
canvas1.on('mouse:move', function(o){
    if (!isDown1) return;
    var pointer1 = canvas1.getPointer(o.e);

    if(origX1>pointer1.x){
        rect1.set({ left: Math.abs(pointer1.x) });
    }
    if(origY1>pointer1.y){
        rect1.set({ top: Math.abs(pointer1.y) });
    }

    wdt1=Math.abs(origX1 - pointer1.x);
    hgt1=Math.abs(origY1 - pointer1.y);

    rect1.set({ width: Math.abs(origX1 - pointer1.x) });
    rect1.set({ height: Math.abs(origY1 - pointer1.y) });


    canvas1.renderAll();
});

    canvas1.on('mouse:up', function(o){
      isDown1 = false;
        newobj1=new Array(origX1,origY1,wdt1,hgt1,col1);
        //alert(newobj1);
        obj1.push(newobj1);
        json_obj1 = JSON.stringify(obj1);

    });
</script>

Answer 2

1. 在 css 中使用设置的图像背景绘制 div 并将 !important 设置为背景
2. 现在重叠在里面
3. 编写代码制作矩形

代码：

<div class="backgroumdImageCss">
   <canvas></canvas>
</div>
<script>
var canvas = new fabric.Canvas('canvas', { selection: false });
canvas.setHeight(250);
canvas.setWidth(1068.5);          
        rect = new fabric.Rect({
        left:25,
        top: 35,
        originX: 'left',
        originY: 'top',
        width:150,
        height:520,
        angle: 0,
        fill:red,
        transparentCorners: false
        });
        canvas.add(rect);
    }
</script>