如何强制 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 return true，即使之前它被设置为 false。

它似乎有点 fabric.js 相关，因为 imageSmoothingEnabled 在我不初始化 fabric.js canvas 时是错误的，但是一旦我初始化它，所有的都设置为true。

在 Google Chrome 下始终启用平滑，但在 Firefox 下，当我移动 fabric.js canvas 视口（平移）或移动对象。

我使用此代码关闭标准 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

是的，看看 FabricJS 源代码就知道你是对的...

看起来 FabricJS 在 canvas class 的初始创建期间强制 imageSmoothingEnabled 为真——即使您在选项中将 imageSmoothingEnabled 设置为假。 FabricJS API 重置 imageSmoothingEnabled 的方法是私有的，因此您不能使用 API 将其设置为 false。

因此您需要等到 FabricJS 创建 canvas 元素，然后使用多个跨浏览器属性变体手动将其 context.imageSmoothingEnabled 重置为 false：

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

Answer 2

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

如何强制 imageSmoothingEnabled 为 false

How to force imageSmoothingEnabled to be false

html

javascript

canvas

html5-canvas

fabricjs