[英]How to stop drawing with Fabric.js
我復制了一個代碼,使用fabric.js繪制了隨鼠標移動的矩形。 但是我需要當用戶選擇該選項時,繪圖停止。
我用了這個小提琴http://jsfiddle.net/a7mad24/aPLq5/
var canvas = new fabric.Canvas('c', { selection: false });
var rect, isDown, origX, origY;
canvas.on('mouse:down', function (o) {
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
var pointer = canvas.getPointer(o.e);
rect = new fabric.Rect({
left: origX,
top: origY,
originX: 'left',
originY: 'top',
width: pointer.x - origX,
height: pointer.y - origY,
angle: 0,
fill: 'rgba(255,0,0,0.5)',
transparentCorners: false
});
canvas.add(rect);
});
canvas.on('mouse:move', function (o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
if (origX > pointer.x) {
rect.set({ left: Math.abs(pointer.x) });
}
if (origY > pointer.y) {
rect.set({ top: Math.abs(pointer.y) });
}
rect.set({ width: Math.abs(origX - pointer.x) });
rect.set({ height: Math.abs(origY - pointer.y) });
canvas.renderAll();
});
canvas.on('mouse:up', function (o) {
isDown = false;
});
您是說要啟用/禁用用戶輸入的復選框? 請嘗試下面的代碼片段,以了解我的意思。
var canvas = new fabric.Canvas('c', { selection: false }); var rect, isDown, origX, origY; canvas.on('mouse:down', function(o) { isDown = true; var pointer = canvas.getPointer(oe); origX = pointer.x; origY = pointer.y; var pointer = canvas.getPointer(oe); rect = new fabric.Rect({ left: origX, top: origY, originX: 'left', originY: 'top', width: pointer.x-origX, height: pointer.y-origY, angle: 0, fill: 'rgba(255,0,0,0.5)', transparentCorners: false }); canvas.add(rect); }); canvas.on('mouse:move', function(o){ if (!isDown) return; var pointer = canvas.getPointer(oe); if(origX>pointer.x){ rect.set({ left: Math.abs(pointer.x) }); } if(origY>pointer.y){ rect.set({ top: Math.abs(pointer.y) }); } rect.set({ width: Math.abs(origX - pointer.x) }); rect.set({ height: Math.abs(origY - pointer.y) }); canvas.renderAll(); }); canvas.on('mouse:up', function(o){ isDown = false; });
.container { position: relative; pointer-events: auto; } #checkBox:checked ~ .container { pointer-events: none; }
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> Disable: <input id="checkBox" type="checkbox"> <div class="container disabled"> <canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas> </div>
您可以使用canvas.on()
和canvas.off()
添加事件偵聽器。
這是更新的jsFiddle 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.