Все знают, что вчера вечером Xiaomi официально выпустила новый логотип на весеннем запуске нового продукта. Согласно официальному представлению, новый логотип был создан совместно известным японским международным дизайнером Кенией Хара, который объединяет видение бренда Xiaomi с мышлением восточной философии и предлагает новую концепцию дизайна, основанную на «отношениях между технологиями и жизнью».
Вскоре сегодня утром появилась статья, в которой говорилось, что официальный сайт Xiaomi также изменил логотип. Однако изменение нового логотипа на официальном сайте кажется не таким большим, как изменение в интерпретации дизайнера. Просто изменил радиус границы CSS с исходных 5 пикселей на 19 пикселей. Некоторые пользователи сети высмеяли, что г-н Лэй потратил два миллиона напрасно.
Прочитав эту статью, я не мог не задуматься, подумал, что прямоугольник со скругленными углами, нарисованный border-radius, должен отличаться от нового логотипа. Поскольку если значение border-radius равно 19px, это означает, что радиус окружности четырех углов прямоугольника равен 19px, принцип следующий:
Таким образом, прямоугольник со скругленными углами, выполненный с радиусом границы, имеет очевидные углы на стыке закругленной кривой и прямой линии, в то время как прямоугольник со скругленными углами нового логотипа Xiaomi представляет собой прямоугольник со скругленными углами с непрерывной кривизной, а линии более гладкие. картинка ниже.
Таким образом, простое изменение радиуса границы определенно не восстановит прямоугольник с закругленными углами этого нового логотипа. В конце концов, большой босс Хара Кения также дал непонятную формулу: если вы хотите идеально восстановить прямоугольник с закругленными углами нового логотипа Xiaomi на веб-странице, вам обычно нужно использовать Canvas или SVG.
Но на самом деле есть интересный метод, просто ввести интересный новый API, с помощью которого можно с помощью CSS восстановить этот прямоугольник со скругленными углами. Это «Painting API», который в настоящее время находится на стадии черновика и имеет мощные функции, о которых стоит знать.
CSS Paint API позволяет вызывать функцию paint() и определять Paint Worklet через JavaScript. Думайте об этом как о фрагменте кода, который позволяет вам программно рисовать все, что вам нравится. Поскольку это JavaScript, вы можете сделать его динамическим. Сам API очень похож на API HTML5.
Для ознакомления с конкретным API вы можете увидеть эту статью Da Mo Lao Wet:zhuanlan.zhihu.com/p/39931190
Согласно формуле, данной боссом Юань Яньцзай, с помощью Paint API новый логотип Xiaomi также может быть идеально восстановлен с помощью CSS.Подробности см. в статье босса на Zhihu:
Этот API предоставляет возможности CSS более низкого уровня.Гибко используя этот API, вы можете нарисовать любой узор, который вам нравится, с помощью CSS~