如何使用fabric.js在运行时设置对象(矩形,圆形,徒手绘制等)类型

时间:2016-11-14 10:35:46

标签: jquery html canvas geometry fabricjs

你是fabric.js的首发。我有一个画布,我给画布的背景。我想在图像上绘制以下类型的对象,如下所示。
1)文字
2)圆圈
3)矩形
4)FreeHand Drawing
我通过下拉列表选择这些类型的对象。这是jsfiddle

这是我的代码< HTML>

<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>

当从选择绘制类型下拉列表中选择文本时,我必须从第二个下拉列表中选择文本作为注释。 现在我的问题是我想从下拉列表中选择矩形然后一切正常但如果我先选择文本并尝试从下拉注释中应用文本然后有例外,之后如果我想绘制矩形,则不绘制。有谁可以帮助我?

2 个答案:

答案 0 :(得分:0)

  1. 在css中使用设置的图像背景绘制div,并使make!important to background
  2. 现在重叠到其中
  3. 编写代码以制作矩形
  4. <强>代码

    <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>
    

答案 1 :(得分:0)

<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>