Question

我正在使用多个分层画布和fabric.js画布，如下所示：

<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>

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

似乎有些fabric.js相关，因为当我没有初始化fabric.js画布时， imageSmoothingEnabled 是假的，但是一旦我初始化它，所有这些都被设置为true。

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

我使用此代码关闭标准画布的图像平滑（以及初始化后的fabric.js）：

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

我也用它来为fabric.js画布设置图像平滑：

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

为什么会这样？如何禁用图像平滑效果好？

Answer 1

经过几个小时的测试和调试后，问题就解决了，显然每个画布调整大小后需要再次设置imageSmoothingEnabled属性，所以这与fabric.js完全无关，更改织物时。 js画布尺寸通过setDimensions，库应该再次设置imageSmoothingEnabled，我会提出补丁。

Answer 2

是的，看看FabricJS来源说你是对的......

看起来FabricJS强制imageSmoothingEnabled在canvas类的初始创建期间为true - 即使您在选项中将imageSmoothingEnabled设置为false。要重置imageSmoothingEnabled的FabricJS API方法是私有的，因此您无法使用API将其设置为false。

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

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

如何强制imageSmoothingEnabled为false

2 个答案: