Образец материала — официальное соглашение
Цвет материала хранится как данные, а не как картинка. Образец — это эти данные в нарисованном виде: цветная форма, которая представляет материал в списке, на карточке, в слоте стеллажа, рядом с его названием. Эта страница — официальное соглашение TigerSystem о том, как его создавать, чтобы один и тот же материал выглядел одинаково везде — в Tiger Studio, в мобильном приложении, в вебе, в вашей собственной интеграции.
«Материал», а не «катушка» — это сделано намеренно. TigerTag идентифицирует
катушку филамента, но также аксессуар, запасную часть, смолу — и типы
продуктов, которые протокол ещё получит. Соглашение написано относительно
id_type в целом: ничто ниже не читает тип продукта, поэтому образец
создаётся одинаково, каким бы ни был материал.
Оно нормативно. Двухцветный филамент, который в одном приложении показан мягким разделением, а в другом — резкой границей или полным градиентом, — это ошибка того приложения, которое отступило от этой страницы, а не вопрос вкуса. Если вы не можете воспроизвести правило точно (например, на платформе без конического градиента), реализуйте ближайший эквивалент, описанный в разделе Платформы без CSS, и скажите об этом; не изобретайте другую картинку.
- Версия соглашения: 1.2 — двухцветный — это мягкое разделение под 135° (сплошные цвета, 20 % смешанного шва), а аспект Tricolor — это конический градиент (если он не Rainbow одновременно) (1.1 рисовала двухцветный как резкое диагональное разделение, а трёхцветный как камамбер; 1.0 делила двухцветный вертикально)
- Эталонный рендерер:
material-swatch-playground.html— откройте в любом браузере, без сервера и зависимостей. Каждый случай, каждая форма рамки, живые выборщики цвета и точный CSS, который он создаёт.
Четыре формы, и только четыре
Заголовок раздела «Четыре формы, и только четыре»| Форма | Когда | Геометрия |
|---|---|---|
| Мягкое разделение | Два или три цвета с резкими границами — двухцветный, либо три цвета без аспекта Tricolor | N равных полос вдоль оси 135°, первый цвет вверху слева; каждый цвет остаётся сплошным, смешивается только шов шириной 20 % диагонали (SPLIT_BLEND) с центром на каждой границе |
| Градиент | Rainbow и объявленный в каталоге тип gradient |
Плавный линейный градиент под 135°, равномерно расположенные опорные точки — направлен вправо-вниз, поэтому первый цвет оказывается вверху слева |
| Камамбер (круговая диаграмма) | Четыре и более цвета с резкими границами — любой список из N ≥ 4 | N равных конических секторов, первый цвет начинается в 12 часов, обход по часовой стрелке |
| Конический градиент | Аспект Tricolor (id 24), не Rainbow одновременно, и объявленный в каталоге conic_gradient |
Плавный конический градиент от 12 часов по часовой стрелке, замыкающийся на первом цвете — цветовой круг |
Проще говоря: два или три резких цвета дают мягкое разделение, четыре и более дают камамбер, плавные цвета дают градиент, а аспект Tricolor раскручивается в конический градиент — и во всей системе ровно один угол, 135°, общий для мягкого разделения и градиента.
Двухцветный и трёхцветный — это мягкое разделение: ось градиента, чёткость разделения.
Та же ось и порядок, что у градиента (первый цвет вверху слева), но каждый цвет
держится сплошным на своей полосе, и на каждой границе смешивается только шов
в 20 %. При seg = 100 / N и h = SPLIT_BLEND / 2 = 10 цвет i держится
от i·seg + h (0 для первого) до (i+1)·seg − h (100 для последнего).
Реализуйте это один раз, в функции, которая разбивает список цветов (N ≤ 3 →
мягкое разделение, N ≥ 4 → круговая диаграмма), чтобы это получил каждый
вызывающий; никогда не рисуйте зеркально.
Почему мягкое разделение для двух или трёх цветов: резкая граница всё равно читалась как два или три отдельных объекта — на миниатюре и ещё сильнее на цветной рамке вокруг фото продукта, где фото скрывало центр и оставляло разрозненные цветные полосы. Полный градиент это исправил, но размыл цвета, так что ни один не читался как истинный. Мягкое разделение сохраняет каждый цвет сплошным и смешивает только шов: один многотонный материал, истинные цвета, в любой форме рамки. 20 % выбраны на глаз по всем поверхностям (более широкий шов оставляет среднему цвету трёхцветного почти без сплошной полосы). Почему круговая диаграмма начиная с четырёх цветов: четыре и более полосы вдоль одной диагонали становятся слишком тонкими для чтения, тогда как границы секторов остаются угловыми и узнаваемыми — отсчитываясь от центра рамки, так что N секторов остаются читаемыми при любом соотношении сторон рамки. Почему 135°: это единственный угол системы, общий для мягкого разделения и каждого градиента. Почему конический градиент для аспекта Tricolor: три полосы вдоль одной диагонали оставляют среднему цвету тонкую полоску; цветовой круг придаёт всем трём одинаковый вес и сразу читается как «три цвета» при любом размере.
Откуда берутся данные
Заголовок раздела «Откуда берутся данные»Рендерер питают два слоя, и это не одно и то же.
Чип — не более трёх цветов
Заголовок раздела «Чип — не более трёх цветов»TigerTag несёт три цветовых слота и аспект. Больше ничего: типа градиента на чипе нет и никогда не было.
| Поле | Тип | Значение |
|---|---|---|
color_r / color_g / color_b |
int 0-255 |
Слот 1 |
color_r2 / color_g2 / color_b2 |
int 0-255 |
Слот 2 |
color_r3 / color_g3 / color_b3 |
int 0-255 |
Слот 3 |
color_a |
int 0-255 |
Альфа — игнорируется при отрисовке; никогда не смешивайте цвет материала |
id_aspect1 / id_aspect2 |
int |
Любой слот может нести цветовой аспект |
Три id аспектов меняют форму (их справочная таблица также несёт
авторитетный color_count):
| id | метка | color_count |
Форма |
|---|---|---|---|
252 |
Bicolor | 2 | Мягкое разделение, 135° |
24 |
Tricolor | 3 | Конический градиент |
145 |
Rainbow | 3 | Градиент, 135° |
Любой другой аспект (Silk, Matt, Glitter, …) имеет color_count ≤ 1 и не
влияет на форму. Сопоставляйте по id, а не по метке — метки являются
отображаемыми строками и могут переводиться.
Никогда не считайте слоты, чтобы угадать число цветов. Документ чипа всегда несёт все три слота: отсутствующие компоненты хранятся как
0, поэтому слоты 2 и 3 читаются как чисто чёрные у одноцветного материала. Число цветов берётся из аспекта, а не из слотов.
Каталог — более богатое описание только для облака
Заголовок раздела «Каталог — более богатое описание только для облака»Продукт из официального каталога может описывать свой цвет точнее, чем чип. Эти два поля существуют только в облачных/продуктовых данных — на чип они никогда не записываются:
| Поле | Тип | Значение |
|---|---|---|
online_color_list |
string[] |
Упорядоченные цвета, RRGGBB или RRGGBBAA, # необязателен. Порядок значим: индекс 0 — первый сектор / первая опорная точка. |
online_color_type |
string |
Инструкция отрисовки: mono, multi, gradient, conic_gradient. Любое другое значение или его отсутствие трактуется как multi. |
Когда присутствуют оба слоя, побеждает каталог — это более точное описание того же продукта.
Лестница решений
Заголовок раздела «Лестница решений»Проверяйте в этом порядке, побеждает первое совпадение. Порядок кодирует приоритет: каталог главнее чипа, явный тип цвета главнее догадки, а аспект говорит, только когда нет онлайн-списка цветов.
Пусть LIST = online_color_list после нормализации, TYPE =
online_color_type, SLOTS = ненулевые слоты чипа.
| # | Условие | Результат |
|---|---|---|
| 1 | LIST ≥ 2 и TYPE == "conic_gradient" |
Плавный конический градиент, замыкающийся на первом цвете |
| 2 | LIST ≥ 2 и TYPE == "gradient" |
Градиент — даже при двух или трёх цветах; каталог запросил плавный градиент, поэтому он не становится мягким разделением |
| 3 | LIST ≥ 3, аспект Tricolor, не Rainbow |
Конический градиент из LIST |
| 3b | LIST ≥ 2 |
Мягкое разделение LIST при 2 или 3 цветах, камамбер из LIST.length секторов при 4 и более |
| 4 | LIST == 1 |
Сплошной цвет — главнее цвета чипа |
| 5 | аспект Rainbow и Tricolor | Градиент, 3 опорные точки |
| 6 | аспект Rainbow и Bicolor | Градиент, 2 опорные точки |
| 7 | аспект Rainbow | Градиент по SLOTS; 1 слот → сплошной; 0 слотов → 6 цветов по умолчанию |
| 8 | аспект Tricolor | Конический градиент по SLOTS (слот 3 отсутствует → мягкое разделение из 2 цветов по слотам 1 и 2, слот 1 не повторяется) |
| 9 | аспект Bicolor | Мягкое разделение, 135°, по слотам 1 и 2 |
| 10 | иначе | Сплошной слот 1; совсем ничего → #1c2030 |
Значения по умолчанию, когда аспект не несёт пригодного цвета:
| Случай | Значения по умолчанию |
|---|---|
| Rainbow, цветов нет | #ff0000 #ff8800 #ffff00 #00cc00 #0000ff #8b00ff |
| Rainbow + Tricolor | #ff4d4d #ffd93d #4da3ff |
| Rainbow + Bicolor | #ff7a00 #8a2be2 |
| Tricolor | #cccccc #888888 (слот 3 отсутствует → мягкое разделение из 2 цветов, слот 1 не повторяется) |
| Bicolor | #cccccc #ffffff |
| Ничего | #1c2030 |
Нормализация
Заголовок раздела «Нормализация»Применяется к каждой записи online_color_list до вычисления лестницы:
- Обрезать пробелы, убрать ведущий
#. - Если 8 символов (
RRGGBBAA), оставить первые 6 — альфа отбрасывается, никогда не смешивается. - Принимать только
^[0-9a-fA-F]{6}$. Всё остальное удаляется из списка, а не заменяется значением по умолчанию — некорректная запись никогда не должна молча становиться чёрной. - Вернуть
#на выводе.
Удаление происходит до запуска лестницы, поэтому ["ff0000", "oops"] — это
список из одного цвета (правило 4), а не круговая диаграмма из двух
секторов.
Слоты чипа преобразуются в # и по две шестнадцатеричные цифры на компонент,
только когда все три компонента — числа.
Точные выражения
Заголовок раздела «Точные выражения»Пусть c1…cN — нормализованные цвета, step = 360 / N, seg = 100 / N и
SPLIT_BLEND = 20:
/* Soft split — 2 or 3 hard colours: rule 3 with 2-3 colours, rules 8-9. Each colour solid over its band, a 20 % blended seam at each boundary. */linear-gradient(135deg, c1 0% 40%, c2 60% 100%) /* N = 2 */linear-gradient(135deg, c1 0% 23.33%, c2 43.33% 56.67%, c3 76.67% 100%) /* N = 3 */
/* Ramp — rainbow and a declared gradient: rules 2, 5-7 */linear-gradient(135deg, c1, c2, …)
/* Camembert — four or more hard colours: rule 3 with ≥ 4 colours */conic-gradient(c1 0deg <step>deg, c2 <step>deg <2·step>deg, …)
/* Catalogue-declared conic gradient — rule 1 (first colour repeated to close) */conic-gradient(from 0deg, c1, c2, …, c1)
/* Mono — rules 4, 10 */# RRGGBBТестовые векторы
Заголовок раздела «Тестовые векторы»Любая реализация обязана воспроизводить их точно.
| Вход | Ожидаемое |
|---|---|
{online_color_list:["FF5722"]} |
#FF5722 |
{online_color_list:["000000FF"]} |
#000000 |
{online_color_list:["e02424","2463e0"]} |
linear-gradient(135deg, #e02424 0% 40%, #2463e0 60% 100%) |
{online_color_list:["e02424","2463e0","22a06b"]} |
linear-gradient(135deg, #e02424 0% 23.33%, #2463e0 43.33% 56.67%, #22a06b 76.67% 100%) |
{online_color_list:["e02424","2463e0","22a06b","f0a020"]} |
conic-gradient(#e02424 0deg 90deg, #2463e0 90deg 180deg, #22a06b 180deg 270deg, #f0a020 270deg 360deg) |
{online_color_list:["e02424","2463e0"],online_color_type:"gradient"} |
linear-gradient(135deg, #e02424, #2463e0) |
{color_r:224,color_g:36,color_b:36,color_r2:36,color_g2:99,color_b2:224,id_aspect2:252} |
linear-gradient(135deg, #e02424 0% 40%, #2463e0 60% 100%) |
{id_aspect1:145} |
linear-gradient(135deg, #ff0000, #ff8800, #ffff00, #00cc00, #0000ff, #8b00ff) |
{} |
#1c2030 |
Водяной знак TigerTag
Заголовок раздела «Водяной знак TigerTag»Любая поверхность, рисующая цвет материала без фото продукта, несёт сверху логотип TigerTag в виде водяного знака.
| Правило | Значение |
|---|---|
| Положение | Правый верхний угол плитки |
| Непрозрачность | 1 — всегда, на любой поверхности |
| Размер | Процент от плитки, никогда не фиксированный размер в пикселях, чтобы масштабироваться вместе с поверхностью |
| Вариант | Тёмный фон → простой БЕЛЫЙ логотип. Светлый фон → контурный ЧЁРНЫЙ логотип. |
Два файла логотипа не являются перекрашиваемыми вариантами друг друга — каждый поставляется со своей зашитой заливкой, и правило определяет, какой именно файл использовать. Никогда не применяйте CSS-фильтр, цвет маски или непрозрачность, чтобы один заменял другой: контурный рисунок — это другой рисунок, а не инвертированный белый.
Выбор варианта — возьмите относительную яркость первого цвета созданного выражения:
luminance = (0.299·R + 0.587·G + 0.114·B) / 255 // dark when < 0.5Если вы извлекаете этот цвет, сопоставляя первый шестнадцатеричный # в
строке CSS, сопоставляйте сначала 8 цифр, затем 6, затем 4, затем 3. Иначе
#RRGGBBAA совпадёт по первым шести цифрам, не пройдёт границу слова после
них, и всё совпадение будет потеряно — что прочитается как «светлый» и
поставит чёрный логотип на чёрную катушку. Отбросьте альфу и разверните
сокращённую запись до вычислений.
Платформы без CSS
Заголовок раздела «Платформы без CSS»Flutter, SwiftUI, Android или любой рендерер на canvas реализует те же три формы. Углы всегда отсчитываются как в CSS: 0° указывает вверх, углы растут по часовой стрелке.
- Камамбер — конический (sweep) градиент с центром на плитке, начинающийся
в 12 часов, по часовой стрелке, с резкими остановками на каждых
k · 360/Nградусов. Flutter:SweepGradientсtransform: GradientRotation(-pi/2). Не приближайте его секторами круговой диаграммы, нарисованными контурами, если плитка не квадратная — границы секторов должны следовать за рамкой. Только для четырёх и более резких цветов. - Мягкое разделение — линейный градиент от левого верхнего угла к
правому нижнему с описанными выше остановками: каждый цвет удерживается
сплошным, на каждой границе смешивается шов в 20 %. Используется для двух
или трёх резких цветов (двухцветный, трёхцветный). Flutter:
LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight)с удвоеннымиcolorsиstops[0, .4, .6, 1](N = 2) или[0, .2333, .4333, .5667, .7667, 1](N = 3). - Градиент — та же ось, равномерно расположенные остановки, без удержания.
Используется для rainbow и для объявленного в каталоге типа
gradient. Flutter:Alignment.topLeft → Alignment.bottomRight.
Изменение соглашения
Заголовок раздела «Изменение соглашения»Эта страница — источник. Изменение здесь — это изменение каждой поверхности TigerSystem: сначала поправьте её, поднимите версию соглашения, затем приведите реализации в соответствие и сверьте их с эталонным рендерером.
См. также: Чип TigerTag, Формат .ttag, Обзор для разработчиков