@Aleksey111

Скругление углов попиксельно. Как сделать из не менее чем 20 пикселов?

Никак не могу понять, как рассчитать, насколько сдвигать блоки, чтобы была иллюзия скругленности углов. Вот на картинке понятно из 14 частей, а из 20 не могу никак сообразить.
Зачем это надо? такое задание
rounding.jpg
  • Вопрос задан
  • 458 просмотров
Решения вопроса 1
@shushpanio
shushpanio
Возьмем явную закономерность: При увеличении радиуса в 2 раза все остальные условия для расчетов увеличиваются в 2 раза.
Далее введем минимальный шаг радиуса N = 5 пикселей.
Далее представим что ваш рисунок находится на осях Х-У.
Проводим визуальную линию под углом 45 градусов к осям координат.
На пересечении этой прямой с окружностью получаем точку равно удаленную от оси Х и оси У одновременно (Sin=Cos= ([корень_квадратный] 2)/2 = 0,7071067811865475 => точка A
Далее предположим что радиус R=N*x, где х - натуральное число.
Кол-во квадратиков по 1 пикселю (те что находятся максимально близко к точке равноудаленной от осей Х и У) равно значению х (видно из рисунка).
т.е. при радиусе 5 пкс х=1 - квадратиков 1, при радиусе 10 пкс х=2, квадратиков 2 и т.д.
Для каждого х нечетного получаем что кол-во квадратиков нечетное, для х четного - четное.
Вывод равноудаленная точка при х нечетное совпадает со средним в линии квадратиком в 1 пиксель, при х четная - ближайшие квадратики находятся 1-й на клетку ниже, 2-й в клетке справа.
Т.е. для точки Ах при х нечетном получаем координаты первого пикселя для закраски:
Ах_нечетн=[N*x;N*x],
а для Ах_четн таких точек будет уже 2:
Ах_четн_1=[N*x-1;N*x], Ах_четн_2=[N*x;N*x-1].

Следующий шаг: достраиваем все точки по 1 пикселю, по условию что точки делятся оставшиеся на 2 равные части. Последующая группа удаляется соотвественно от Ах_четн_1 и Ах_четн_2 (или от Ах_нечетн) по принципу увеличиваем координату х на 1, уменьшаем координату у на 1 для группы точек привязанных к Ах_четн_1=[N*x-1;N*x]; уменьшаем координату х на 1, увеличиваем координату у на 1 для группы точек привязанных к Ах_четн_2=[N*x;N*x-1] (ну или для 1 и второй группы при точке Ах_нечетн=[N*x;N*x].

Далее понимаем {чита считаем} сколько блоков 1хНесколько пикселей мы еще дорисовываем.

Тут действуют следующие закономерности:
начинается с 1 блока в 2 пикселя с каждой стороны,
Блок в 3 пикселя добавляется при увеличение радиуса в 2 раза,
Блок в 4 пикселя - при увеличении еще в 2 раза.
т.е. закономерность блок длинной 1хC появляется при выполнении условия что радиус Rс=N^C, С - целое.

Оставшиеся блоки считаем по принципу:
для блока 1х2 - кол-во с каждой стороны = (Rокр-Rс(предыдущий меньший))/N. Если Rокр=Rс, то колв-во блоков 1х2 берем из радиуса N-1.
блок 1х3 = (Rокр-Rс(предыдущий меньший))/(2*N)
Если Rокр=Rс, то колв-во блоков 1х2 берем из радиуса N-1 и вычитаем 1 блок.
для 1х4 = (Rокр-Rс(предыдущий меньший))/(2*N).
Если Rокр=Rс, то колв-во блоков 1х2 берем из радиуса N-1 и вычитаем 2 блока.

И т.д.

Знаю что замудренно написал но думаю если переложить это в код будет проще.

P.S. помним что блок длинной 1хC появляется при выполнении условия что радиус Rс=N^C, С - целое. и длиннее значения С блоки быть не могут.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@tommy_13
border-radius: 20px))))
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы