如何强制imageSmoothingEnabled为false [英] How to force imageSmoothingEnabled to be false

问题描述

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

I am using several layered canvas plus fabric.js canvas like so:

<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，即使它之前设置为false。

All these canvas context have the property imageSmoothingEnabled set to false but for unknown reason, smoothing is always enabled for all the canvas and querying ctx.imageSmoothingEnabled return true even though it was set to false just before.

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

It seem to be somewhat fabric.js related because imageSmoothingEnabled is false when i do not initialize fabric.js canvas but as soon as i initialize it, all of them are set to true.

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

Smoothing is always enabled under Google Chrome but under Firefox, the smoothing vary (on/off) when i move the fabric.js canvas viewport (panning) or moving the objects.

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

I use this code to turn off image smoothing for standard canvas (and also for the fabric.js one after initialization):

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

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

I also use this to set image smoothing off for the fabric.js canvas:

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

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

Why does it happen? How to disable image smoothing for good?

推荐答案

经过几个小时的测试和调试，问题解决了，显然需要在每个画布调整大小后再次设置 imageSmoothingEnabled 属性，因此这与fabric.js完全没有关系，当通过<$ c更改fabric.js画布尺寸时$ c> setDimensions ，库应该再次设置 imageSmoothingEnabled ，我会提出补丁。

After some hours of testing and debugging, the problem was solved, apparently the imageSmoothingEnabled property need to be set again after each canvas resizing so this was not related to fabric.js at all, altough when changing fabric.js canvas dimensions via setDimensions, the library should set again imageSmoothingEnabled, i will propose a patch.

这篇关于如何强制imageSmoothingEnabled为false的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！