javascript - FabricJs Canvas 'Mouse:over' 事件不起作用
问题描述
我正在尝试在 FabricJS( version:1.4.0 ) 画布上监听 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() 函数来重新绘制画布。
解决方案
推荐阅读
- r - 将日期列格式化为r中数据框中的行编号(左侧)列
- asp.net-core - 如何将模型绑定到具有结果过滤功能的下拉列表输入?
- python - 如何加入 pandas 系列数字使其成为一个数字
- r - 用 R 打包公共数据
- java - 无法在 ViewModel 中上下文
- android - 是否可以在不在 Firestore 中添加文档的情况下将子集合添加到集合中?
- excel - 如何将工作簿表添加到另一个工作簿中
- amazon-web-services - AWS Lambda 函数在调用 aws 服务时超时
- sqlite - @capacitor-community/sqlite 中的“加密”、“秘密”和“新秘密”三种模式有什么区别?
- javascript - 初始化 RTCPeerConnection 时如何禁用 Chromium 入站权限请求