image - 在 Html5 Canvas 上以浮点坐标绘制图像

Question

如您所知，在 Canvas 上绘图时使用圆角坐标会更快。 float 坐标也可能导致 Canvas 上出现意外间隙。例如，您正在将谷歌地图图 block 绘制到 Canvas 上，如果起始坐标是整数，则 256x256 图 block 效果很好。 如果不是，为避免一个像素未绘制的线条，您应该对坐标进行四舍五入。

给，没关系。

但是，如果你应该在 Canvas 上使用缩放、变换，你怎么舍入坐标呢？

例如

 ctx.drawImage(image, round(x), round(y), 256, 256); 

没问题。

但是如果

  ctx.scale(1.0/65536);
  ctx.translate(118079.4);
  ctx.drawImage(image, x, y, 256, 256); // where x and y are integers like 118413

图像将绘制成 float 坐标。我如何舍入该坐标？

Answer 1

使用浮点坐标绘制图像速度慢的原因不是因为使用整数作为坐标和转换更快，而是因为坐标的小数部分图像将被重新采样到不同的像素位置。

对于以整数坐标绘制的图像(缩放比例为 100%)，不需要进行这种重采样，这可能是图像绘制代码的快速路径。如果您正在进行任何缩放、旋转或非整数平移，则可能会使用较慢的图像重采样例程。

处理具有浮点坐标的图像之间的间隙的一种方法是使图像稍微变大以覆盖间隙，或者将所有具有圆角坐标的可见图 block 渲染到隐藏的未旋转 Canvas 中，然后绘制旋转的 Canvas 并缩放为可见的。