Javascript 在Fabric.js中同时绘制两个对象
我发布的问题是，在给定的示例程序中，当我单击第一个按钮时，我绘制了两个按钮，当我单击第二个按钮时，我绘制了矩形。问题是，当我单击第二个按钮时，线和矩形同时绘制。这是我的代码Javascript 在Fabric.js中同时绘制两个对象,javascript,jquery,html,canvas,fabricjs,Javascript,Jquery,Html,Canvas,Fabricjs,我发布的问题是，在给定的示例程序中，当我单击第一个按钮时，我绘制了两个按钮，当我单击第二个按钮时，我绘制了矩形。问题是，当我单击第二个按钮时，线和矩形同时绘制。这是我的代码 <!DOCTYPE html> <html> <head> <title>Final layout</title> <script type="text/javascript" src="fabric.min.js"></scrip
<!DOCTYPE html>
<html>
<head>
<title>Final layout</title>
<script type="text/javascript" src="fabric.min.js"></script>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
//Start when the document is loaded
$(document).ready(function(){
//Getting the canvas
var canvas1= new fabric.Canvas('canvas');
//Setting the canvas properties
canvas1.setHeight(400);
canvas1.setWidth(1300);
canvas1.setBackgroundColor('lightgrey');
canvas1.renderAll();
//End of canvas1
//Binding the functions to button_1
$('#1').click(function(){
console.log("button 1 clicked");
canvas1.isDrawingMode=true; // **Enables line drawing
canvas1.freeDrawingBrush.width=3;
canvas1.freeDrawingBrush.color='blue';
//Adding code to alter line properties
canvas1.on('path:created',function(e){
var line1= e.path;
line1.lockScalingX;
line1.lockScalingY;
});
});
//Binding the functions to button_2
$('#2').click(function(){
console.log("Button 2 cilcked");
//Declaring the variables
var isMouseDown=false;
var OriginX=new Array();
var OriginY= new Array();
var refRect;
//Setting the mouse events
canvas1.on('mouse:down',function(event){
//Defining the procedure
isMouseDown=true;
OriginX=[];
OriginY=[];
//Getting yhe mouse Co-ordinates
var posX=event.e.clientX;
var posY=event.e.clientY;
OriginX.push(posX);
OriginY.push(posY);
//Creating the rectangle object
var rect=new fabric.Rect({
left:OriginX[0],
top:OriginY[0],
width:0,
height:0,
stroke:'red',
strokeWidth:3,
fill:'white'
});
canvas1.add(rect);
refRect=rect; //**Reference of rectangle object
});
canvas1.on('mouse:move', function(event){
// Defining the procedure
if(!isMouseDown)
{
return;
}
//Getting yhe mouse Co-ordinates
var posX=event.e.clientX;
var posY=event.e.clientY;
refRect.setWidth(Math.abs((posX-refRect.get('left'))));
refRect.setHeight(Math.abs((posY-refRect.get('top'))));
canvas1.renderAll();
});
canvas1.on('mouse:up',function(){
//alert("mouse up!");
isMouseDown=false;
});
});
});
</script>
</head>
<body>
<canvas id="canvas" style="border: 2px solid darkblue"></canvas>
<div style="position: relative; width: 1300px; height:30px; border: 2px solid black; margin-top: 5px">
<input type="button" id="1" value="pencil">
<input type="button" id="2" value="rectangle">
</div>
</body>
最终布局
//加载文档时启动
$（文档）.ready（函数（）{
//获取画布
var canvas1=newfabric.Canvas（'Canvas'）；
//设置画布属性
画布1.设置高度（400）；
画布1.设置宽度（1300）；
画布1.背景色（“浅灰色”）；
canvas1.renderAll（）；
//拉票结束1
//将函数绑定到按钮1
$（'#1'）。单击（函数（）{
控制台日志（“单击按钮1”）；
canvas1.isDrawingMode=true；//**启用线条绘制
画布1.自由画笔。宽度=3；
画布1。自由画笔。颜色='blue'；
//添加代码以更改行属性
canvas1.on（'path:created'，函数（e）{
var line1=e.path；
line1.lockScalingX；
第1行：锁定缩放；
});
});
//将函数绑定到按钮2
$（'#2'）。单击（函数（）{
控制台日志（“按钮2已锁定”）；
//声明变量
var isMouseDown=错误；
var OriginX=新数组（）；
var OriginY=新数组（）；
var指标；
//设置鼠标事件
canvas1.on（'mouse:down'，函数（事件）{
//定义程序
isMouseDown=真；
OriginX=[]；
原始=[]；
//获取鼠标坐标
var posX=事件e.clientX；
var posY=事件e.clientY；
原始推力（posX）；
原始推（posY）；
//创建矩形对象
var rect=new fabric.rect({
左：OriginX[0]，
top:原创[0]，
宽度：0，
高度:0,，
笔划：'红色'，
冲程宽度：3，
填充：“白色”
});
canvas1.add（rect）；
reflect=rect；//**矩形对象的引用
});
canvas1.on（'mouse:move'，函数（事件）{
//定义程序
如果（！isMouseDown）
{
返回；
}
//获取鼠标坐标
var posX=事件e.clientX；
var posY=事件e.clientY；
reflect.setWidth（Math.abs（（posX reflect.get（'left'）））；
reflect.setHeight（Math.abs（（posY reflect.get（'top'）））；
canvas1.renderAll（）；
});
canvas1.on（'mouse:up'，function（））{
//警惕（“鼠标向上！”）；
isMouseDown=错误；
});
});
});
请让我知道这有什么问题，以及我应该尝试一次绘制一个形状。您需要将
isDrawingModeisDrawingMode