你是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>
当从选择绘制类型下拉列表中选择文本时,我必须从第二个下拉列表中选择文本作为注释。 现在我的问题是我想从下拉列表中选择矩形然后一切正常但如果我先选择文本并尝试从下拉注释中应用文本然后有例外,之后如果我想绘制矩形,则不绘制。有谁可以帮助我?
答案 0 :(得分:0)
<强>代码:
<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>