погрешность цвета canvas
Создана прямая в canvas с цветом rgb(15,100,100). Необходимо вычислить первую составляющую rgb, т.е. -15 .
Вычислил, но canvas размазывает это значение с 12 до 22 в зависимости от определённого пикселя на прямой. Необходимо сократить общую погрешность одного цвета до 5 (т.е. если значение 3, то погрешность 0-5, если значение 17, то погрешность 15-20), чтобы из 255 можно было бы извлечь 50 значений. Если погрешность уберётся вообще то это идеал (т.е. 15 так и останется 15). Есть ли такая возможность? И не опасно ли определять объекты, нарисованные в canvas по цвету в разных браузерах? насколько знаю rgb везде приветствуется... Могу, конечно, помимо R, использовать и G и B, этой совокупности хватит под задачу, но с одним R будет проще, да и знать хочу не могу) |
Очевидно что дело в сглаживании. Рисуйте прямую потолще и в центре пиксели будут именно нужного цвета. Либо отключите сглаживание canvas.
|
Aetae,
Да именно в сглаживании. Я хочу знать как уменьшить сглаживание или полностью его отключить. Пересмотрел все свойства и методы canvas но, ни прямого, ни косвенного способа повлиять на сглаживание не нашёл. Так же в поисковиках ответа не нашёл. Заливал одну толстую линию несколько раз сверху, но на границе всё равно погрешность до 7 шагов доходит. Суть в том что если пользователь нажмёт не в центр, а на край линии, то он получит не то значение что требуется. При использовании тач дисплеев промахнуться проще простого! У меня сложилось такое впечатление, что до полного раскрытия потенциала canvas, ещё не один год пройдёт. Слишком мало свойств и методов, для простоты работы. |
image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; Но не факт что по может. Ультимативное решение рисовать вручную прямыми линиями по координатам вида (х+0.5,y+0.5).) |
Aetae,
в теории image-rendering идеальный вариант, но на практике не повлёк никаких изменений, я так понимаю такой способ новаторский для многих браузеров. Пошёл обходным путём, как писал ранее, задействовав второй элемент RGB, т.е. G. Тем самым возвёл в квадрат количество вариантов, будет мало возведу в куб) . Буду ждать полной совместимости с браузерами image-rendering |
Нет у канваса никакого сглаживания вообще.
Не путайте с интерполяцией которой можно управлять единственно через ctx.imageSmoothingEnabled Если вы заметили сглаживание нарисованной линии то проверьте shadow в своих кодах либо в кодах либы которая услужливо сглаживает. И последний, неколебимый вариант - браузер гадит. Тут либо искать браузерный контекст, либо забить. Забить так: в пиксельных операциях всегда применяется порог - threshold - с помощью которого и определяется что красное, что черное, что белое и так далее. Цитата:
|
kostyanet,
если я в canvas рисую линию любой толщиной, то по краям, ближайшие к фону пиксели имеют не тот цвет, что я задавал в свойстве. Как сделать монотонной линию на всей занятой ею поверхности? imageSmoothingEnabled = false; mozImageSmoothingEnabled = false; oImageSmoothingEnabled = false; webkitImageSmoothingEnabled = false; Не помогли. Вообще ни каких результатов. В canvas только линии (не пересекаются), нет фона (не заливал), нет shadow, и вообще всего по минимуму. Если знаете просто напишите как решить данную проблему, пожалуйста! |
Я же написал что метод интерполяции и сглаживание не одно и то же.
Еще раз http://stackoverflow.com/questions/4...-anti-aliasing Я даже не пытался найти и процитировать из документации, потому что там голимый баян. Все зависит от браузера. Рисуйте сами, через дату. Однако надо понимать что вы там делаете, а что вы там делаете непонятно. Цитата:
И еще вот какая штука - размер сэмпла. Сколько он у вас применительно к тачу пальцем? Ни за что не поверю что 1Х1 как у мыши. Даже со стилусом 1Х1 не имеет смысла. И последнее. Вертикальные и горизонтальные линии надеюсь без сглаживания получаются? Потому что если и они расплываются, значит у вас позиционирование не попадает в пиксельную сетку. |
Вложений: 1
Из примера выше.
context.moveTo(0,0); context.lineTo(100,75); context.strokeStyle = "#df4b26"; context.lineWidth = 3; Если эквидистанта располагается по центру заданного пути, то ежу ж понятно слева от него 1.5 пиксела, справа от него 1.5 пиксела. Смотрите на иллюстрации. Это в ФШ сделано, но принцип фундаментален. Без сглаживания обводка в 3 пиксела невозможна. Если вы ничтоже сумняще так же поступаете как автор цитаты, то попробуйте для начала задать толщину линии кратную 2. Чтобы и слева и справа было одинаково. Или ищите опции расположения эквидистанты - снаружи, или внутри. Синим на картинке показана та же обводка, но в 4 пиксела. Вертикальные и горизонтальные линии пикселы которых уложены в сетку никогда не сглаживаются. У вас так? |
Насчет многократной отрисовки. Все должно сработать если работает как положено. Это значит линия должна быть нарисована на фоне и повтор отрисовки приведет к повторному умножению значений пикселов фона на пикселы альфы, которые уже были умножены прежде.
Если многократная обводка по одному пути ничего не меняет, значит альфа существует отдельно, а цвет рисунка - отдельно. И там никаких изменений быть не должно, за исключением что ширина лини может оказаться больше чем задано. |
Часовой пояс GMT +3, время: 20:06. |