Javascript Fabric js-如果鼠标位于DIV中，则启动自由绘图

有一项任务是使用Fabric Js库（自由绘图）执行函数。 是否可以使其在更改布尔变量

canvas.isDrawingMode=false//true

-如果

true

，则始终绘制，无论是否按住鼠标左键，如果

false

-则不绘制

var canvas=newfabric.canvas（'sheet'）；
canvas.isDrawingMode=true；
canvas.freeDrawingBrush.width=2；
canvas.freedrawingprush.color=“#ff0000”；
canvas.setHeight（window.innerHeight）；
canvas.setWidth（window.innerWidth）；
$（窗口）.mouseup（函数（）{
canvas.clear（）；
});

#床单{
背景颜色：黄色；
}
一种解决方案是调用fabric的内部
\u onMouseDownInDrawingMode（）
/
\u onMouseUpInDrawingMode（）
on
mouse:over
/
mouse:out
事件。但是，由于当鼠标进入现有fabric.js对象（例如路径的一部分）时，不会调用
mouse:over
事件，因此我们需要稍微修改
fabric.Canvas.prototype.\u onmouseinter（）

这里有一个完整的解决方案：


fabric.Canvas.prototype.\u onMouseCenter=（函数（原始）{
返回函数（e）{
if（此.isDrawingMode）{
//重置缓存指针，否则将从最后离开画布的点光标开始创建新路径
这是。_resetTransformEventData（）；
此模式为鼠标向下绘制模式（e）；
}
}
返回原始值。应用（此，参数）
})（fabric.Canvas.prototype.\u onMouseCenter）
var canvas=newfabric.canvas（'sheet'）；
canvas.on（'mouse:out'，函数（e）{
if（此.isDrawingMode）{
此模式为鼠标向上缩进模式（e）
}
});
canvas.isDrawingMode=true；
canvas.freeDrawingBrush.width=2；
canvas.freedrawingprush.color=“#ff0000”；
canvas.setHeight（window.innerHeight）；
canvas.setWidth（window.innerWidth）

#床单{
背景颜色：黄色；
}