Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 16.02.2020, 23:09
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от laimas
Я вижу на одной из них линию шириной в 2px, а на другой четкую в 1px.
Не знаю об этом ли речь, да есть в canvas такая особенность c горизонтальными и вертикальными линиями, когда может образоваться тень на полпикселя, поэтому чтобы получить четкие линии для линий нечетной ширины нужно к целой позиции добавить 0.5, но по крайней мере про это хоть написано здесь. Может кстати тоже артефакты с этим связаны и нужно правильную длину круга, ширину сегментов, позицию подобрать, геморрой короче.

Последний раз редактировалось Rise, 16.02.2020 в 23:13.
Ответить с цитированием
  #12 (permalink)  
Старый 16.02.2020, 23:44
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Rise
Не знаю об этом ли речь, да есть в canvas такая особенность c горизонтальными и вертикальными линиями
Об этом, но еще есть и многие другие факторы которые нужно учитывать. Вообще canvas это ведь базовое, если можно так выразиться, а чтобы что-то получить стоящее нужно повозиться. Это ведь не только canvas страдает этим, взять ту же GD и сравнить с Image Magik, разница большая.

Вот картинки, пока не увеличишь, кажется что на первой 2px, а на второй 1px ширина, а огрехи просто маскируется соседним цветом и плотностью почти такой же как и линии. А рядом, для сравнения, наложил направляющие фотошопа. Если увеличить, то заметен подход в разности отрисовки линий. Плюс цвет локальный и контрастный.

Последний раз редактировалось laimas, 12.10.2020 в 16:58.
Ответить с цитированием
  #13 (permalink)  
Старый 17.02.2020, 21:55
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Живые примеры из постов №№2 и 7 в Chrome 80 отображаются нормально, а вот на присланных скриншотах из постов №№3 и 6 видно неточное сглаживание, очевидно у вас 1 пиксель из программы неожиданно равен пикселю на экране. «Антиалиасинг» можно отключить вообще (если не получилось настроить), тогда в браузере таких проблем не будет (правда это не вариант, если у вас пиксели размером с блюдечко!)

В Chrome 80 пример из поста №2 у меня выглядит так...


Сообщение от laimas
Затем на них рисуется пунктирная линия в 1px шириной в градациях серого, почти близко к белому. Вопрос - одинаково ли должна выглядеть такая линия на этих изображениях? Я вижу на одной из них линию шириной в 2px, а на другой четкую в 1px.
Так вы наверное на разных экранах смотрели на эту полоску. В этом нет ничего странного, в CSS пишем border-width: 1px, а на экране — 4px, так устроены современные экраны (например, Retina), вам не нужно об этом беспокоиться и вглядываться в экран через микроскоп!
try {
    alert(devicePixelRatio >= 1.5 ? "Вот оно, качество!" : devicePixelRatio >= 4 ? "Оргазм от одного взгляда на экран" : "У тебя кошерные пиксели размером с блюдечко")
} catch(error) {
    alert("Ты должен быть доволен тем, что твоё корыто хоть что-то показывает!");
}


Сообщение от Rise
В векторе такая же фигня.
Значит у вас devicePixelRatio === 1

Сообщение от Rise
Кстати, в растре также можно.
Сообщение от Rise
да есть в canvas такая особенность c горизонтальными и вертикальными линиями,
Вам нужно учитывать devicePixelRatio, т. е. используем каждый пиксел, (а не блоки по 2×2px, или по 3×3px или по 4×4px, как один пиксель)
<html>
<head>
    <title>Canvas dashed circle</title>
</head>
<body>

<canvas width="640" height="640"></canvas>

<script>
var canvas = document.querySelector('canvas');
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";
var scale = devicePixelRatio;
canvas.width *= scale;
canvas.height *= scale;
var ctx = document.querySelector('canvas').getContext('2d');

ctx.scale(scale, scale);

ctx.translate(320, 320);
ctx.arc(0, 0, 290, 0, 2 * Math.PI);
ctx.lineWidth = 60;

ctx.strokeStyle = "#ffbb00";
ctx.stroke();

ctx.setLineDash([1, 4]);
ctx.strokeStyle = "#000000";
ctx.stroke();
</script>

</body>
</html>
Ответить с цитированием
  #14 (permalink)  
Старый 17.02.2020, 22:43
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Malleys
Так вы наверное на разных экранах смотрели на эту полоску.
Конечно, у меня их как в магазине на прилавке, в ряд, ходил и смотрел на каждый. Ну что хрень пороть?

Это из редактора приготовления выделений для SVG. Эти линии ограничивают рабочую зону от края изображения равную 2 см. Оригинальное изображение конечно гораздо больше 1000 рх и с разрешением 300dpi. Оригинал при производстве может увеличиваться до 2 м, при этом граница в 2 см постоянная. В редакторе это тоже учитывается, и эти границы в нем сдвигаются к краю. Когда линия границы попадает на четный ряд, то рисуется четкая линия.
Ответить с цитированием
  #15 (permalink)  
Старый 17.02.2020, 23:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Malleys,
пост #13
devicePixelRatio = 1.25
Chrome 80
"артефакт" на 3 часа
Ответить с цитированием
  #16 (permalink)  
Старый 17.02.2020, 23:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от Malleys
«Антиалиасинг» можно отключить
что это и как это отключается?
Ответить с цитированием
  #17 (permalink)  
Старый 18.02.2020, 00:38
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от рони
как это отключается?
Это сглаживание линии на холсте, о котором шла речь в этой теме, его можно отключить, например только в браузере, если его запустить так...
Код:
chrome --no-first-run --no-default-browser-check --temp-profile --disable-2d-canvas-clip-aa --disable-canvas-aa --disable-composited-antialiasing
(Картинка со сглаживаем в Ubuntu (Linux) в Chrome также с артефактом, о котором упоминали ранее в теме, но вот вариант в Chrome без сглаживания)...

Хотя вроде и не видно того артефакта... но и изображение получилось в стиле 80-х или 90-х, а вообще-то полный отстой! Может подойдёт только для вертикальных и горизонтальных линии?

Сообщение от рони
devicePixelRatio = 1.25
Chrome 80
"артефакт" на 3 часа
Я думаю, что это у вас в браузере включен зум на 125%, а так при зуме 100% у вас devicePixelRatio === 1. Даже если было бы 1.25, это всё равно мало, чтобы не было видно таких артефактов. С такими параметрами вам нужно просто смирится, что где-то линии будут с «дефектом» или «разъехалось на два пикселя»!

Сообщение от laimas
Конечно, у меня их как в магазине на прилавке, в ряд, ходил и смотрел на каждый. Ну что хрень пороть?
Достаточно двух мониторов по бокам от основного, разве нет? (Ну или одного!) В одном пишешь код, другом смотришь результат, а третий — для «видео с котиками и прочего, ну ты понял!»

Последний раз редактировалось Malleys, 18.02.2020 в 00:48. Причина: Не заметил, что laimas написал ответ! Добавил ответ.
Ответить с цитированием
  #18 (permalink)  
Старый 18.02.2020, 00:56
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Malleys
Достаточно двух мониторов по бокам от основного ...
Вроде бы человек грамотный, но иногда такую пургу гонит, что уши заворачиваются. Заклинило тебя на JS и CSS что-ли и словно других понятий и не существует. Фотошоп есть? В нем достаточно сравнить, зачем мне для этого куча мониторов ... Открою маленький секрет, в GD тоже можно задать массив для точек, ожидать 1х1, а получится больше, причем тут CSS и мониторы...

Последний раз редактировалось laimas, 18.02.2020 в 00:58.
Ответить с цитированием
  #19 (permalink)  
Старый 18.02.2020, 01:59
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Malleys,
Да, devicePixelRatio равен 1, но так и не понял, как это связано, что один логический (CSS) пиксель равен одному физическому, с тем что образуются артефакты, так как твоя картинка у меня выглядит нормально. Не понятно, что мешает также нормально отрисовать это в canvas пост 7, как это отрисовано в img пост 13.
Ответить с цитированием
  #20 (permalink)  
Старый 18.02.2020, 02:18
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

рони,
Антиалиасинг можно в webgl контексте отключить, а в 2d контексте вроде он как всегда включен, в svg есть атрибут shape-rendering. Я всё пробовал, сглаживание на то и сглаживание, что если его отключить, то полутени исчезнут, и останутся линии-ступеньки, Malleys ляпнул как обычно не подумав.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена background при нажатии JIeuTo Общие вопросы Javascript 5 14.09.2018 18:48
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 09:30
Проблема с обработкой ескольких .hover() anocean jQuery 3 15.06.2012 22:43
Проблема с дизайном после отправки xmlhttprequest, Проблема с дизайном после отправки cyberx AJAX и COMET 3 01.05.2010 17:07
Проблема с CSS COKOJIOB (X)HTML/CSS 5 04.08.2009 14:19