使用 fabricjs 缩放后保持像素 'sharp'

Question

我正在使用 fabricjs 显示图像并使用 fabrics 启用缩放

myFabric.zoomToPoint({ x: x, y: y }, newZoom);

问题是，当我放大时，像素变得模糊而不是彼此保持 'sharp'\'separated'。
缩小：

放大：

Answer 1

有一个 imageSmoothingEnabled 选项，您可以在创建结构的 Canvas 时传递：

var canvas = new fabric.Canvas('a', {
  imageSmoothingEnabled: false // here you go
});
fabric.Image.fromURL("https://i.stack.imgur.com/dQRkt.png", function(img) {
  canvas.add(img);
  canvas.zoomToPoint({x: 50, y: 50}, 120);
});

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="a" height="380" width="250"></canvas>

使用 fabricjs 缩放后保持像素 'sharp'

keep pixels 'sharp' after zoom with fabricjs

javascript

canvas

fabricjs