我正在使用多个分层 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
});
为什么会这样? 如何永久禁用图像平滑?
最佳答案
经过几个小时的测试和调试,问题解决了,显然 imageSmoothingEnabled
属性需要在每次调整 Canvas 大小后重新设置,所以这与 fabric.js 完全无关,尽管当通过setDimensions
改变fabric.js Canvas 尺寸,库应该重新设置imageSmoothingEnabled
,我会提出一个补丁。
关于javascript - 如何强制 imageSmoothingEnabled 为 false,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29553012/