DoubleClick object in Fabric.js
HTML
<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
<canvas id="c" width="400" height="400"></canvas>
CSS
canvas{
border-width: 1pz;
border-style: solid;
border-color: #000;
}
JavaScript
var lastTime;
var src = "http://fabricjs.com/lib/pug.jpg";
// canvas
var canvas = new fabric.Canvas('c');
canvas.observe("object:selected", objectSelectedHandler);
canvas.backgroundColor = "#F5F5F5";
// text
var text = new fabric.Text('Text inside canvas', {
left: 200,
top: 50
});
text.hasRotatingPoint = true;
canvas.add(text);
// circle
var circle = new fabric.Circle({
left: 200,
top: 150,
radius: 50,
fill: "#dd0000"
});
circle.hasRotatingPoint = true;
canvas.add(circle);
//image
fabric.util.loadImage(src, function(img) {
var object = new fabric.Image(img);
object.set({
left: 200,
top: 300
});
object.hasRotatingPoint = true;
object.scaleX = object.scaleY = .25;
canvas.add(object);
canvas.renderAll();
});
canvas.renderAll();
function objectSelectedHandler(event) {
var date = new Date();
var now = date.getTime();
if(now - lastTime < 500){
objectDoubleClickHandler(event);
}
lastTime = now;
}
function objectDoubleClickHandler(event){
alert('bm,,m')
}