我正在尝试监听 FabricJS(版本:1.4.0) Canvas 上的 mouse:over 事件,但它似乎无法按我的预期工作。这是片段
const canvas = new fabric.Canvas('gameCanvas', {selection: false});
const rect = new fabric.Rect({
left: 120,
top: 30,
width: 100,
height: 100,
fill: 'green',
angle: 20,
name: 'Rectangle',
hoverCursor: 'pointer'
});
canvas.add(rect);
canvas.renderAll();
$('.upper-canvas').mouseover(function (e)
{
if(e.target !== null)
{
if(e.target.name === 'Rectangle')
{
e.target.set('fill', 'red');
canvas.renderAll();
console.log('mouse:over', e.target.name);
}
}
});
$('.upper-canvas').mouseout(function (e)
{
if(e.target !== null){
e.target.set('fill', 'green');
canvas.renderAll();
console.log('mouse:out', e.target.name);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>
还添加了 mouse:out 事件和 canvas.renderAll() 函数来重新绘制 Canvas 。
最佳答案
来自1.5.0 changelog :
Add "mouse:over" and "mouse:out" canvas events (and corresponding "mouseover", "mouseout" object events).
1.5.0 之前确实没有此类事件。
关于javascript - FabricJs Canvas 'Mouse:over' 事件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57960473/