Рисование изображений на Html5 Canvas в координатах с плавающей точкой

Question

Как вы знаете, использование округленных координат при рисовании на холсте происходит быстрее. Также плавающие координаты могут вызвать непреднамеренные пробелы на холсте. Например, вы рисуете плитки карты Google на холсте, плитки 256x256 работают хорошо, если начальные координаты целые. Если нет, чтобы избежать одного пикселя неокрашенных линий, вы должны округлить координаты.

Здесь все в порядке.

Но что, если вы должны использовать масштабирование, преобразование поверх холста, как вы можете округлить координаты?

, например

 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

Изображение будет отображаться в плавающих координатах. Как я могу округлить эти координаты?

Answer 1

Причина, по которой рисование изображений с координатами с плавающей запятой происходит медленно, заключается не в том, что использование целых чисел для координат и преобразований происходит быстрее, а в том, что из-за компонента дроби в координатах изображения будут пересчитываться в разные позиции пикселей.

Эта повторная выборка не обязательна для изображений, нарисованных в целочисленных координатах (со 100% масштабированием), и, скорее всего, это быстрый путь для кода рисования изображения.Если вы выполняете масштабирование, вращение или нецелочисленный перевод, можно использовать более медленную процедуру повторной выборки изображений.

Один из способов устранения пробелов между изображениями с координатами с плавающей запятой состоит в том, чтобы сделать изображения немного больше, чтобы покрыть их.пропуски, или, визуализируйте все видимые плитки с округленными координатами в скрытый не повернутый холст, а затем нарисуйте его, повернутый и масштабированный, в видимый.