如何禁用Canvas像素平滑

Question

我在Canvas节点中绘制了一些像素，如下所示：

canvas.getGraphicsContext2D().getPixelWriter().setColor(10, 10, Color.RED);

然后我缩放画布。现在像素是blury / smooth（参见第一张图片）。但是我想要实现的内容将在第二张图片中描述。

我该怎么做？

Answer 1

在javafx中渲染图像的一些方法以及javafx中的许多组件都是消除锯齿的，这意味着它们会尝试平滑，请参阅here以查找覆盖图像的其他帖子。

您可以先尝试将像素绘制到图像视图中，然后禁用平滑属性并将图像重新绘制回上下文：

ImageView scaledImageView = new ImageView(image);
scaledImageView.setSmooth(false);

然而，这将需要重新实现您已有的， 并使用调整后的大小将图像绘制回context2d。

此帖here与抗锯齿引起的模糊问题仅相同，仅供参考。

还有一些可以使用的侵入性较小的解决方案，如果缩放/缩放幅度小于2，有时抗锯齿可能会扭曲图像，例如32x32,64x64，这样做是因为：

  

在设备像素级别，整数坐标映射到角落   像素和像素中心之间的裂缝出现在   整数像素位置之间的中点。因为所有的坐标   值用浮点数指定，坐标可以   精确指向这些角（当浮点值有   精确整数值）或像素上的任何位置。例如，a   坐标（0.5,0.5）将指向左上角的中心   舞台上的像素。类似地，在（0,0）处具有尺寸的矩形   10乘10将跨越左上角的左上角   舞台上的像素位于第10个像素的右下角   第10条扫描线。那个里面最后一个像素的像素中心   矩形位于坐标处（9.5,9.5）。

Answer 2

我浏览了describe('test', ()=>{ before(()=>{ cy.get_token('username', 'password').then(youToken => { cy.visit('/', { onBeforeLoad: function (window) { window.localStorage.setItem('token', youToken); } }) }) cy.close_welcome() }) it('test 001', ()=>{ // contain test })}) afterEach(()=>{cy.clearLocalStorage('token')}) 和GraphicsContext2D API，并搜寻了Internet和SE，但找不到任何有帮助的东西。最后，我决定创建一个所需大小最大的画布，然后使用Canvas和canvas.setScaleX(a)，其中canvas.setScaleY(a)。这样，您确实会获得缩放效果，该效果不会以任何方式模糊输出。当然，您的“像素”的大小为0<a<=1×s，其中s是最大缩放系数。我猜唯一的缺点是，它需要多花s的内存来存储。不太理想，但是我可以解决和使用这种解决方法。