使用fabric.js的画布全屏模式

Canvas fullscreen mode using fabric.js

本文关键字：布全屏 模式 fabric js 使用      更新时间：2023-09-26

我尝试对Fabric.js.的画布对象使用全屏模式（HTML5全屏）

var canvas = fabricCanvas.getSelectionElement();
if(canvas.requestFullScreen) {
    canvas.requestFullScreen();
}
else if(canvas.webkitRequestFullScreen) {
    canvas.webkitRequestFullScreen();
}
else if(canvas.mozRequestFullScreen) {
    canvas.mozRequestFullScreen();
}

问题是，事件不能在全屏模式下工作。我想这是由于在Fabric中使用了两个画布造成的：下部用于绘图，上部用于事件。在切换到全屏模式期间，下部画布变为"上部"。此外，我也尝试过：

var canvas = fabricCanvas.getSelectionElement();

在这种情况下，有事件，但没有可视化。有什么办法解决这个问题吗？

将同时包含select和canvas元素的容器置于全屏状态。我对面料不是很熟悉，你可以试试

var canvas = fabricCanvas.getSelectionElement().parentNode;
if(canvas.requestFullScreen) {
  canvas.requestFullScreen();
}
else if(canvas.webkitRequestFullScreen) {
  canvas.webkitRequestFullScreen();
}
else if(canvas.mozRequestFullScreen) {
  canvas.mozRequestFullScreen();
}

fabric.js中可能有一种比parentNode.更好的方法来获取容器

相关文章：