Отключить интерполяцию при масштабировании <холста>

ПРИМЕЧАНИЕ. Это связано с тем, как существующие элементы холста отображаются при увеличении масштаба, а не в делать с 9X_webpage тем, как линии или графика отображаются 9X_vanilla-javascript на поверхности холста. Другими словами, это все связано с интерполяцией масштабированных элементов и 9X_html5 не имеет ничего общего с сглаживанием графики, нарисованной 9X_.js на холсте. Меня не волнует, как браузер 9X_javascript-library рисует линии; Меня волнует, как браузер 9X_html-tag отображает элемент холста сам при его увеличении.


Есть 9X_html ли свойство холста или параметр браузера, который 9X_canvas я могу изменить программно, чтобы отключить 9X_html5 интерполяцию при масштабировании элементов 9X_divs ? Кроссбраузерность идеальна, но не обязательна; Моя 9X_html5 основная цель - браузеры на основе Webkit. Производительность 9X_canvas очень важна.

This question наиболее похож, но недостаточно 9X_javascript иллюстрирует проблему. Как бы то ни было, я 9X_ecmascript безрезультатно пробовал image-rendering: -webkit-optimize-contrast.

Приложение будет 9X_html представлять собой 8-битную игру в стиле 9X_div ретро, ​​написанную на HTML5 + JS, чтобы 9X_div было понятно, что мне нужно.


Вот пример. (live version)

Предположим, у 9X_webpage меня есть холст 21x21 ...


... в котором есть 9X_js css, увеличивающий элемент в 5 раз (105x105):

canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */

Я 9X_div-layouts рисую на холсте простой символ "X" следующим 9X_divs образом:

$('canvas').each(function () {
    var ctx = this.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(21,21);
    ctx.moveTo(0,21);
    ctx.lineTo(21,0);
    ctx.stroke();
});

Изображение слева - это то, что 9X_div отображает Chromium (14.0). Изображение 9X_javascript-execution справа - это то, что я хочу (нарисовано 9X_div-layouts от руки в иллюстративных целях).

9X_Отключить интерполяцию при масштабировании <холста>_divs 9X_Отключить интерполяцию при масштабировании <холста>_html-tag

145
3

  • В некоторой степени связано, но не идентично: http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasin ...
5
Общее количество ответов: 5

Ответ #1

Ответ на вопрос: Отключить интерполяцию при масштабировании <холста>

Последнее обновление: 12 сентября 2014 г.

Есть ли свойство холста или параметр браузера, который 9X_html5 я могу изменить программно, чтобы отключить 9X_vanillajs интерполяцию при масштабировании элементов?

Ответ: может быть, когда-нибудь. А 9X_span пока вам придется прибегнуть к хитростям, чтобы 9X_vanilla-javascript получить то, что вы хотите.


image-rendering

The working draft of CSS3 outlines a new property, image-rendering, который должен 9X_javascript-execution делать то, что я хочу:

Свойство рендеринга 9X_div изображения дает подсказку пользовательскому 9X_js агенту о том, какие аспекты изображения 9X_javascript наиболее важно сохранить при масштабировании 9X_span изображения, чтобы помочь пользовательскому 9X_js агенту выбрать подходящий алгоритм масштабирования.

В 9X_html-tag спецификации указаны три допустимых значения: auto, crisp-edges и 9X_html pixelated.

пиксельный:

При увеличении масштаба изображения необходимо 9X_webpage использовать алгоритм «ближайшего соседа» или 9X_.js аналогичный, чтобы изображение выглядело 9X_html-tag просто состоящим из очень больших пикселей. При 9X_vanilla-javascript уменьшении аналогично авто.

Стандарт? Кроссбраузерность?

Поскольку это 9X_html5 всего лишь рабочий проект, нет никаких гарантий, что он 9X_canvas станет стандартом. Браузерная поддержка 9X_javascript-library пока в лучшем случае нечеткая.

В сети разработчиков 9X_html-tag Mozilla есть a pretty thorough page dedicated to the current state of the art, который я настоятельно рекомендую 9X_vanilla-javascript прочитать.

Разработчики Webkit изначально 9X_span выбрали tentatively implement this as -webkit-optimize-contrast, но Chromium / Chrome, похоже, не 9X_vanilla-javascript используют версию Webkit, которая это реализует.

Обновление: 12 сентября 2014 г.

Chrome 38 now supports image-rendering: pixelated!

В 9X_ecmascript Firefox есть bug report, открытый для реализации image-rendering: pixelated, но 9X_.js -moz-crisp-edges пока работает.

Решение?

Самым кроссплатформенным 9X_javascript решением, использующим только CSS, на данный 9X_div момент является:

canvas {
  image-rendering: optimizeSpeed;             /* Older versions of FF          */
  image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated;                 /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}

К сожалению, это пока не 9X_vanilla-javascript работает на всех основных платформах HTML5 9X_html-tag (в частности, в Chrome).

Конечно, можно вручную 9X_javascript-library масштабировать изображения с помощью интерполяции 9X_javascript-execution ближайшего соседа на поверхности холста 9X_javascript-library с высоким разрешением в javascript или даже 9X_js предварительно масштабировать изображения 9X_div-layouts на стороне сервера, но в моем случае это 9X_html-tag будет слишком дорого, поэтому это не жизнеспособный 9X_vanilla-javascript вариант.

ImpactJS использует технику предварительного 9X_js масштабирования текстуры, чтобы обойти весь 9X_div этот FUD. Разработчик Impact, Доминик Саблевски, wrote a very in-depth article about this9X_ecmascript конечном итоге он даже процитировал этот 9X_html-tag вопрос в своем исследовании).

См. Simon's answer для решения 9X_ecmascript на основе холста, которое полагается на 9X_js свойство imageSmoothingEnabled (недоступно в старых браузерах, но 9X_div проще, чем предварительное масштабирование, и 9X_javascript-library поддерживается довольно широко).

Живая демонстрация

Если вы 9X_javascript хотите протестировать свойства CSS, описанные 9X_javascript в статье MDN для элементов canvas, я сделал this fiddle, который 9X_.js должен отображать что-то вроде этого, размыто 9X_span или нет, в зависимости от вашего браузера: 9X_Отключить интерполяцию при масштабировании <холста>_js

140
2

  • Я (из настоящего будущего!) Использую Chrome 78. ...

Ответ #2

Ответ на вопрос: Отключить интерполяцию при масштабировании <холста>

Новый ответ 31.07.2012

Это наконец-то в спецификации холста!

В спецификацию 9X_javascript-execution недавно добавлено свойство imageSmoothingEnabled, которое по 9X_vanilla-javascript умолчанию имеет значение true и определяет, будут 9X_.js ли изображения, нарисованные в нецелочисленных 9X_html-tag координатах или нарисованные с масштабированием, использовать 9X_divs более плавный алгоритм. Если для него установлено 9X_html-tag значение false, то используется ближайший сосед, создавая 9X_javascript-library менее гладкое изображение и вместо этого 9X_webpage просто делая пиксели большего размера.

Сглаживание 9X_ecmascript изображений было добавлено в спецификацию 9X_html-tag холста совсем недавно и поддерживается не 9X_html всеми браузерами, но в некоторых браузерах 9X_javascript-library реализованы версии этого свойства с префиксом 9X_javascript-library поставщика. В контексте существует mozImageSmoothingEnabled в Firefox 9X_vanillajs и webkitImageSmoothingEnabled в Chrome и Safari, и установка для них 9X_html-tag значения false остановит сглаживание. К 9X_ecmascript сожалению, на момент написания IE9 и Opera 9X_div не реализовали это свойство, с префиксом 9X_javascript-execution поставщика или иным образом.


Предварительный 9X_div-layouts просмотр: JSFiddle

Результат:

9X_Отключить интерполяцию при масштабировании <холста>_.js

68
4

  • Если вы масштабируете с помощью CSS, решение namuol будет работать. Если вы вручную масштабируете изображение на холсте, решение Саймона работает. Приятно, что ес ...

Ответ #3

Ответ на вопрос: Отключить интерполяцию при масштабировании <холста>

Изменить 31.07.2012 - теперь эта функция включена в спецификацию холста! См. Отдельный ответ здесь:

https://stackoverflow.com/a/11751817/154112

Старый ответ ниже для потомков.


В зависимости 9X_vanillajs от желаемого эффекта у вас есть один вариант:

var can = document.getElementById('b');
var ctx = can.getContext('2d');
ctx.scale(5,5);
$('canvas').each(function () {
    var ctx = this.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(21,21);
    ctx.moveTo(0,21);
    ctx.lineTo(21,0);
    ctx.stroke();
});

http://jsfiddle.net/wa95p/

Что 9X_vanilla-javascript создает это:

9X_Отключить интерполяцию при масштабировании <холста>_vanillajs

Наверное, не то, что вам нужно. Но 9X_webpage если бы вы просто хотели добиться нулевого 9X_html размытия, то это было бы правильным решением, поэтому 9X_javascript-library я предлагаю его на всякий случай.

Более сложный 9X_javascript вариант - использовать манипуляции с пикселями 9X_span и самостоятельно написать алгоритм для работы. Каждый 9X_vanillajs пиксель первого изображения становится блоком 9X_vanillajs пикселей 5x5 на новом изображении. Сделать 9X_vanillajs это с изображениями несложно.

Но сами по 9X_divs себе Canvas и CSS не помогут вам в масштабировании 9X_div-layouts друг друга с тем эффектом, который вам нужен.

11
0

Ответ #4

Ответ на вопрос: Отключить интерполяцию при масштабировании <холста>

В Google Chrome шаблоны изображений холста 9X_webpage не интерполируются.

Вот рабочий пример, отредактированный 9X_ecmascript из ответа намуола http://jsfiddle.net/pGs4f/

ctx.scale(4, 4);
ctx.fillStyle = ctx.createPattern(image, 'repeat');
ctx.fillRect(0, 0, 64, 64);

3
2

  • В качестве примечания, вот хороший тест по шаблонам и изображениям: http://jsperf.com/drawimage-vs-canvasp ...

Ответ #5

Ответ на вопрос: Отключить интерполяцию при масштабировании <холста>

Saviski's workaround Explicated here многообещающе, потому что он 9X_javascript-execution работает на:

  • Chrome 22.0.1229.79 Mac OS X 10.6.8
  • Chrome 22.0.1229.79 m Windows 7
  • Chromium 18.0.1025.168 (сборка разработчика 134367 Linux) Ubuntu 11.10
  • Firefox 3.6.25 Windows 7

Но не работает в следующих случаях, но 9X_webpage того же эффекта можно добиться с помощью 9X_html5 рендеринга изображений CSS:

  • Firefox 15.0.1 Mac OS X 10.6.8 (рендеринг изображений: -moz-crisp-Edge работает в this)
  • Opera 12.02 Mac OS X 10.6.8 (рендеринг изображения: -o-crisp-Edge работает в this)
  • Opera 12.02 Windows 7 (рендеринг изображений: -o-crisp-Edge работает в this)

Проблема заключается 9X_canvas в следующем, потому что ctx.XXXImageSmoothingEnabled 9X_js не работает и рендеринг изображений не работает:

  • Safari 5.1.7 Mac OS X 10.6.8. (рендеринг изображений: -webkit-optimize-Contrast НЕ работает)
  • Safari 5.1.7 Windows 7 (рендеринг изображений: -webkit-optimize-Contrast НЕ работает)
  • IE 9 Windows 7 (-ms-interpolation-mode: ближайший сосед НЕ работает)

1
0