Как установить объект (прямоугольник, круг, свободный рисунок и т. Д.) Во время выполнения с использованием fabric.js

Question

привет в стартер до fabric.js. У меня есть холст и im, дающий фон холсту. Я хочу нарисовать следующие типы объектов на изображении, как показано ниже.
1) Текст
2) Круг
3) Прямоугольник
4) Нанесение
FreeHand им выбор этих типов объекта через выпадающее меню. вот 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> 

Когда есть текст, выбранный из выпадающего списка выберите тип дро, то я должен выбрать текст в качестве комментариев от второго выпадающего списка. Теперь моя проблема в том, что я хочу выбрать прямоугольник из выпадающего списка, тогда все будет хорошо, но если я сначала выберу текст и попытаюсь применить текст из выпадающих комментариев, тогда есть исключения, и после этого, если я хочу нарисовать прямоугольник, его не нарисовать. Может кто-нибудь мне помочь? !

Answer 1

1. Draw ДИВ с фоном набор изображений в CSS и сделать важный для фона
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> 

Answer 2

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