[英]fabric.js | Check if mouse is down error
我收到以下錯誤:
未捕獲的TypeError:無法讀取null的屬性'setFill'
我正在使用fabric.js,錯誤發生在“options.target.setFill()...”行:
var mDown = false;
canvas.on('mouse:down', function(options) {
mDown = true;
});
canvas.on('mouse:up', function(options) {
mDown = false;
});
canvas.on('mouse:move', function(options) {
if (mDown == true) {
options.target.setFill('red');
canvas.renderAll();
}
});
沒有if條件,“mouse:move”事件有效。
您不能單擊對象。 僅在單擊對象時設置目標。 下面我添加一個檢查,看看是否設置了目標。 沒有那個檢查我得到你解釋的相同的錯誤。
您還可以更新代碼,以便不偵聽單擊事件的畫布,而是將事件附加到對象本身。
var canvas = new fabric.Canvas("c"); var mDown = false; canvas.on('mouse:down', function(options) { mDown = true; }); canvas.on('mouse:up', function(options) { mDown = false; }); canvas.on('mouse:move', function(options) { if (mDown == true && options.target) { options.target.setFill('red'); canvas.renderAll(); } });
canvas { border: 1px solid black; }
<canvas id="c" width="400" height="300"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>
我認為你需要的是object:moving
而不是mouse:move
事件,因為mouse:move
當你將鼠標指針移動到畫布時觸發移動,因為在畫布中沒有選擇任何對象,你得到null。
看看下面的代碼。 我創建了一個三角形,每次移動它都會改變它的顏色。 希望你有一個想法。
var canvas = new fabric.Canvas('c'); var mDown = false; var triangle = new fabric.Triangle({ width: 20, height: 30, fill: 'blue', left: 50, top: 50 }); canvas.add(triangle); canvas.on('mouse:up', function(options) { mDown = false; triangle.set('fill', 'blue'); }); canvas.on('mouse:down', function(options) { mDown = true; //triangle.set('fill', 'blue'); }); canvas.on('object:moving', function(options) { if (mDown == true) triangle.set('fill', 'red'); //triangle.set('fill', 'red'); //canvas.add(triangle); });
canvas { border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script> <canvas id="c" width="400" height="300"></canvas>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.