I want to restrict drawing area of a canvas by a button click. I am drawing a rect by fabric js. I want to enable drawing mode in that rect only. If mouse moves out of rectangle, drawing stops.
Here is my code of drawing rect:
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
top : 100,
left : 100,
width : 60,
height : 70,
fill : 'red'
});
canvas.add(rect);
canvas.on('mouse:down', function (option) {
console.log(option);
if (typeof option.target != "undefined") {
return;
} else {
var startY = option.e.offsetY,
startX = option.e.offsetX;
console.log(startX, startY);
var rect2 = new fabric.Rect({
top : startY,
left : startX,
width : 0,
height : 0,
fill : 'transparent',
stroke: 'red',
strokewidth: 4
});
canvas.add(rect2);
console.log("added");
canvas.on('mouse:move', function (option) {
var e = option.e;
rect2.set('width', e.offsetX - startX);
rect2.set('height', e.offsetY - startY);
rect2.setCoords();
});
}
});
canvas.on('mouse:up', function () {
canvas.off('mouse:move');
});
Aucun commentaire:
Enregistrer un commentaire