Рендеринг ближайшего соседа на холсте - PullRequest
Новая
       7

Рендеринг ближайшего соседа на холсте

10 голосов
/ 22 июля 2010

У меня есть спрайт, который оживляет с помощью листа спрайта.Ему всего 16х16, но я хочу увеличить его до 64х64 во всем его пиксельном совершенстве!

alt text

Результаты ужасны, конечно, браузер не сглаживает его.: /

Спасибо!

РЕДАКТИРОВАТЬ: нет необходимости CSS, вот моя функция рисования. 

function drawSprite(offsetx:number,offsety:number,posx:number,posy:number){
    ctx.drawImage(img, offsetx*32, offsety*32, 32, 16, posx*32, posy*8, 128, 32);
}

Видеть это работает здесь (codepen)

Ответы [ 2 ]

9 голосов
/ 24 августа 2011

В случае, если кто-то когда-нибудь снова наткнется на это (например, я), Webkit поддерживает значение -webkit-optimize-contrast для image-rendering, которое (в настоящее время) является реализацией апскейлинга ближайшего соседа. Может применяться как к изображениям, так и к полотнам.

Вот пример того, как это происходит. 

.nn128 {
    width: 128px;
    height: 128px;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

<canvas class="nn128" width="16" height="16"></canvas>
<img src="path/to/small/image.png" alt="Small image" class="nn128">

При такой настройке Webkit Safari и Gecko / Firefox увеличат пространство холста 16x16 и маленькое изображение до 128x128 с помощью алгоритма ближайшего соседа.

ОБНОВЛЕНИЕ В ответе изначально говорилось, что браузеры Webkit поддерживают это; фактически с 2011-12-24 он работает с Safari в Mac OS и Chrome в Mac OS, но не с Chrome one Windows (Safari в Windows не был проверен), как указано в выпуск 106662 Chromium багтрекер . Лексически Chrome в Windows будет принимать значение -webkit-optimize-contrast в таблице стилей CSS, но это не будет иметь никакого эффекта. Я ожидаю, что когда-нибудь он сработает, и этот метод будет правильным способом увеличения масштаба ближайшего соседа, но сейчас использование этого метода означает, что пользователям Windows Chrome придется жить с размытостью.

1 голос
/ 22 июля 2010

В Firefox вы можете использовать это: 

canvas {
  image-rendering: -moz-crisp-edges;
}

Но, насколько я знаю, для любого другого браузера вам не повезло. Возможно, одним из способов решения этой проблемы является увеличение размера спрайта до 64x64 в Photoshop (или где-либо еще), а затем использование его в уменьшенном виде на холсте. Таким образом, по крайней мере, изображение не станет размытым при увеличении. Тем не менее, он точно не даст вам чистую моду7, как доброту ближайшего соседа.

Вы можете написать свой собственный масштабный код, используя объект imageData. Это приведет к значительному снижению производительности, но для изображения 16x16 это может быть не столь значительным.

...