fabric.js |檢查鼠標下差錯

Uncaught TypeError: Cannot read property 'setFill' of null

我使用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條件，「鼠標：移動」事件起作用。

來源

2016-09-10 Snr Naldo

你試圖檢查選項參數的值？通過console.log或其他.. –

它只是記錄「空」 –

這就是你得到這個錯誤的原因。你也可以檢查畫布的價值，如果它仍然有價值？ –

您不能單擊對象。只有當您點擊一個對象時纔會設置目標。下面我添加一個檢查來查看是否設置了目標。沒有檢查，我得到了你解釋過的同樣的錯誤。

您也可以更新代碼，以便不聽畫布上的點擊事件，而是將事件附加到對象本身。

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>

來源

2016-09-10 16:19:31 StefanHayden

檢查一個目標擺脫了錯誤（這不是問題），但是我仍然不知道爲什麼錯誤只是拋出，一旦我把圍繞該行的if循環。如果你可以添加一段顯示你的問題的代碼， –

會很好。 – StefanHayden

我想你需要的是object:moving不是因爲mouse:movemouse:move事件，當您移動鼠標點到畫布上，因爲沒有選擇任何對象在你的畫布，你會得到空被觸發。

請看下面的代碼。我創建了一個三角形，每當我移動它時，它都會改變它的顏色。希望你有一個想法。

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>

來源

2016-09-11 02:01:11

fabric.js |檢查鼠標下差錯

回答

相關問題