javascript - 如何强制 imageSmoothingEnabled 为 false

Question

我正在使用多个分层 Canvas 加上 fabric.js Canvas ，如下所示:

<canvas id="grid" width="1401" height="785"></canvas>
<div class="canvas-container" style="width: 1401px; height: 785px; position: relative; -webkit-user-select: none;">
  <canvas id="fabric_canvas" class="lower-canvas" width="1401" height="785" style="position: absolute; width: 1401px; height: 785px; left: 0px; top: 0px; -webkit-user-select: none;"></canvas>
  <canvas class="upper-canvas " width="1401" height="785" style="position: absolute; width: 1401px; height: 785px; left: 0px; top: 0px; -webkit-user-select: none; cursor: default;"></canvas>
</div>
<canvas id="keys" width="79" height="512"></canvas>
<canvas id="ruler" width="1024" height="50"></canvas>
<canvas class="helper" width="1401" height="785"></canvas>

所有这些 Canvas 上下文都将属性 imageSmoothingEnabled 设置为 false，但由于未知原因，平滑始终为所有 Canvas 启用并且查询 ctx.imageSmoothingEnabled 返回 true 即使之前它被设置为 false。

它似乎与 fabric.js 有点相关，因为当我不初始化 fabric.js Canvas 时 imageSmoothingEnabled 为 false，但一旦我初始化它，所有这些都设置为 true。

在 Google Chrome 下始终启用平滑，但在 Firefox 下，当我移动 fabric.js Canvas 视口(viewport)(平移)或移动对象时，平滑会发生变化(开/关)。

我使用此代码关闭标准 Canvas 的图像平滑(以及初始化后的 fabric.js):

ctx.mozImageSmoothingEnabled    = false;
ctx.oImageSmoothingEnabled      = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled     = false;
ctx.imageSmoothingEnabled       = false;

我还使用它为 fabric.js Canvas 设置图像平滑:

c_fabric = new fabric.Canvas("fabric_canvas", {
    imageSmoothingEnabled: false
});

为什么会这样？如何永久禁用图像平滑？

Answer 1

经过几个小时的测试和调试，问题解决了，显然 imageSmoothingEnabled 属性需要在每次调整 Canvas 大小后重新设置，所以这与 fabric.js 完全无关，尽管当通过setDimensions改变fabric.js Canvas 尺寸，库应该重新设置imageSmoothingEnabled，我会提出一个补丁。