Reputation: 203
I am having application in which on two clicks on canvas it draws a rectangle on mouse:down
event. But I want to clear this event for object selected and object scaling because when I click hover the object it starts drawing a new rectangle.
I have tried to clear mouse down event using canvas._eventListeners("mouse:down")=[]
for object selection but after object selection cleared canvas didn't response for any events.
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 canvas - Image color picker | Script Tutorials</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="column1">
<canvas id="panel" width="700" height="350"></canvas>
</div>
<div style="clear:both;"></div>
</div>
</body>
<script>
(function() {
var canvas = new fabric.Canvas('panel');
var clicks=0;
var x1=0;var y1=0;
canvas.on('mouse:down', function(e){
if (clicks == 0) {
var pointer=canvas.getPointer(event.e);
console.log(pointer);
x1 = pointer.x;
y1 =pointer.y;
console.log("Pointer Start " +x1 ,y1);
clicks++;
}
else
{
var pointer2=canvas.getPointer();
console.log(pointer2);
var endx=pointer2.x;
var endy=pointer2.y;
console.log("Pointer2 End " +endx ,endy);
console.log("x and y"+x1,y1);
var newwidth=pointer2.x- x1;
var newheight=pointer2.y - y1;
var rect=new fabric.Rect({
left:x1,
top: y1,
originX :'left',
originY :'top',
width:newwidth,
height:newheight,
selectable: true,
evented:false,
fill:'red',
opacity :0.3
});
canvas.add(rect);
canvas.renderAll();
clicks=0;
}
});
fabric.Image.fromURL('fedex.jpg', function (img) {
canvas.add(img.set({
width: 700,
height:350,
left: 350,
top: 175,
selectable: false,
}));
});
})();
</script>
Upvotes: 1
Views: 2586
Reputation: 4681
hello you can check the target on mouse:down :
i just added the if statement into your mouse:down event:
canvas.on('mouse:down', function(e){
//check if you clicked on an object that exists canvas
if(e.target != undefined){
if (clicks == 0) {
var pointer=canvas.getPointer(event.e);
console.log(pointer);
x1 = pointer.x;
y1 =pointer.y;
console.log("Pointer Start " +x1 ,y1);
clicks++;
}
else
{
var pointer2=canvas.getPointer();
console.log(pointer2);
var endx=pointer2.x;
var endy=pointer2.y;
console.log("Pointer2 End " +endx ,endy);
console.log("x and y"+x1,y1);
var newwidth=pointer2.x- x1;
var newheight=pointer2.y - y1;
var rect=new fabric.Rect({
left:x1,
top: y1,
originX :'left',
originY :'top',
width:newwidth,
height:newheight,
selectable: true,
evented:false,
fill:'red',
opacity :0.3
});
canvas.add(rect);
canvas.renderAll();
clicks=0;
}
});
fabric.Image.fromURL('fedex.jpg', function (img) {
canvas.add(img.set({
width: 700,
height:350,
left: 350,
top: 175,
selectable: false,
}));
}//end if
});
hope helps, good luck.
Upvotes: 1