在Html5画布上以浮点坐标绘制图像 [英] Drawing Images on Html5 Canvas at floating point coordinates

问题描述

你知道在画布上绘制时使用圆角坐标更快。浮动坐标也可能在画布上导致意外的间隙。例如，您正在将google地图图块绘制到画布上，如果起始坐标是整数，则256x256图块会很好地工作。
如果没有，为了避免一个像素未涂漆的线，你应该舍去坐标。

As you know using rounded coordinates while drawing on canvas is faster. Also floating coordinates may cause unintended gaps on canvas. For example, you are drawing google map tiles to canvas, 256x256 tiles work well, if the starting coordinates are integer. If not, to avoid one pixel unpainted lines, you should round the coordinates.

这里是确定。

但是，如果你应该使用缩放，在canvas上进行转换，你如何能够围绕坐标？

But, what if you should use scaling, transformation over canvas, how can you round the coordinates?

例如

 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

图像将绘制为浮动坐标。

The image will be drawn into floating coordinates. How can I round that coordinates?

推荐答案

使用浮点坐标绘制图像的原因很慢的原因不是因为使用整数作为坐标和变换更快，但是由于坐标的分数分量，图像将被重新采样到不同的像素位置。

The reason that drawing images with floating point coordinates is slow is not because using integers for the coordinates and transformations is faster, but that because of the fraction component of the coordinate the images will be resampled to different pixel positions.

这种重采样不需要发生在图像绘制在整数坐标（具有100％缩放），并且可能是图像绘制代码的快速路径。如果您正在进行任何缩放，旋转或非整数转换，则可以使用较慢的图像重新采样程序。

This resampling does not need to happen for images drawn at integer coordinates (with 100% scaling) and is likely a fast path for the image drawing code. If you are doing any scaling, rotation or non-integer translation, the slower image resampling routine may be used.

使用浮点坐标处理图像之间的间隙的一种方法是使图像稍大以覆盖间隙，或者将具有圆形坐标的所有可见瓦片绘制成隐藏的未旋转的画布，然后将其绘制，旋转和缩放到可见的一个。

One way of dealing with gaps between images with floating point coordinates is to make the images slightly larger to cover the gaps, or, render all the visible tiles with rounded coordinates into an hidden un-rotated canvas and then draw that, rotated and scaled, into the visible one.

这篇关于在Html5画布上以浮点坐标绘制图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！