Решение для настройки цвета значков в апплете

внешний интерфейс Ресурсы изображений Icon товар

задний план

С развитием бизнеса компании, текущие продукты действительно все больше и больше тела (санг) размещены (синь) используются (бинг) домохозяйства (куан). , я случайно увидел, что некая сеть предоставляет набор библиотек иконок, пользователи могут выбирать самостоятельно, а когда они могут настраивать цвета, я чувствую, что дела идут не очень хорошо~

В то время, когда мозги были горячими, а стол битым, нам тоже нужно было обеспечить такую ​​функцию, и она была мощнее их...

Я как разработчик молча оставил эту картинку~

Мы знаем, что апплет не поддерживает подобноеttf woffДля этого типа шрифта трудно напрямую импортировать и компилировать его ~

Это говорит нам о том, что мы не можем напрямую скачивать шрифты типа H5 и потом внедрять их в стиль.Этот путь не пройдет, мы можем только найти новое решение~

Что ж, я больше не скрываю, я дам вам решение в Amway 2~

решение

Вариант первый

Использование апплета не поддерживаетttfшрифт, но поддерживаетbase64характеристики, мы можем использоватьttfперекодирование шрифтаbase64, затем пройтиiconfontОсобенности, установив размер и цвет шрифта для достижения цели.

Его конкретная реализация выглядит следующим образом:

  • 1. Мы можем сначала перейти к библиотеке иконок, предоставленной Али.Официальный сайтКачаем нужные нам иконки.Вообщем достаточно.Вот у меня есть 3 рандомные для пробы.Нажмитескачать кодЗагрузите код локально~

  • 2. Разархивируем только что скачанный нами пакет, там будут следующие файлы, а для нас толькоiconfont.cssа такжеiconfont.ttfЭти два файла,

  • 3. Мы должныiconfont.ttfперекодировать этот файл, чтобы преобразовать его вbase64формат, простоэтот сайтЭта функция предусмотрена (переход: этот сайт может быть немного медленным, если возможно, агент ускорит), выполните шаги на рисунке ниже, чтобы загрузить отдельноttfфайл, выберите конфигурацию и нажмите Преобразовать.

  • 4. Преобразование завершено как показано на рисунке ниже.Не много ерунды,просто скачиваем и распаковываем.Нам нужна внутренняя частьstylesheet.cssэтот файл

  • 5. Мы создаем новый файл, который называется папкой статических ресурсов в апплете.iconfont.wxssфайл стиля, распакуйте вышеуказанныйstylesheet.cssСкопируйте все содержимое вiconfont.wxssКроме того, помните, что мы сказали вышеiconfont.css? Вот где пригодится, включаемiconfont.cssЭтот файл стиля будет следующим стилем, то есть я используюкрасная меткаскопируйте содержимое вiconfont.wxssВ файле обратите внимание, что вышеперечисленное копировать не нужно! !

На данный момент подготовительная работа завершена, в это время вашiconfont.wxssдолжно выглядеть так

iconfont.wxss

@font-face {
    font-family: 'iconfont';
    src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-map:before { content: "\e6a2"; }

.icon-success:before { content: "\e6b3"; }

.icon-atm:before { content: "\e6bd"; }

  • 6. Далее импортируем наш файл шрифта вapp.wxssglobal , так что вы можете вызывать его где угодно, просто добавьтеclassНет ничего плохого в том, чтобы написать это правильно.

    <!--index.wxml-->
<view class="container">
    <view class='block'>
        <text class='iconfont icon-map'></text>
        <text>地图</text>
    </view>
    <view class='block'>
        <text class='iconfont icon-success'></text>
        <text>成功</text>
    </view>
    <view class='block'>
        <text class='iconfont icon-atm'></text>
        <text>atm</text>
    </view>
</view>

    Как удачно!

    Какой? Если вы хотите изменить цвет, для меня это не составит труда, просто измените соответствующийcolorВот и все~

    <!--index.wxml-->
<view class="container">
    <view class='block'>
        <text class='iconfont icon-map' style='color : red'></text>
        <text>地图</text>
    </view>
    <view class='block'>
        <text class='iconfont icon-success' style='color : green'></text>
        <text>成功</text>
    </view>
    <view class='block'>
        <text class='iconfont icon-atm' style='color : blue'></text>
        <text>atm</text>
    </view>
</view>

Хм, можешь ненадолго засунуть свою талию~

Подождите, разве я не сказал два варианта, почему я пришел сюда с бедрами на бедрах? !

Вариант 2

Мы только что представили схему 1, которая действительно является вариантом, нам нужно только согласовать стиль, имя класса, и бэкенд вернет нам цвет~

Однако у этой схемы есть недостатки и она недостаточно гибкая.Если мы хотим обновить нашу библиотеку иконок, то нам придется снова пройти описанный выше процесс.Если позже будет больше типов библиотек иконок, то наши перекодированные файлы станут больше. , что фатально для небольших программ, потому что все мы знаем, что все мы думаем о том, как использовать минимум кода, чтобы максимизировать ценность!

Поэтому эта схема имеет определенные ограничения, поэтому был разработан второй набор схем~

Второй набор идей заключается в использованииsvgВекторная графика обладает характеристиками отсутствия искажений и может быть заполнена цветами самостоятельно.fillатрибут, пользователь может настроить цвет заливки, но он не поддерживается в апплетеsvgметка, мы используем палитру цветов, чтобы заполнить цвет, выбранный пользователем, дляsvg, после перекодирования изменит цветsvgПревратиться вbase64Код отправляется в апплет, и апплет можно использовать непосредственно вimageна этикеткеsrcатрибут~

Давайте попробуем вместе~

  • 1. Давайте сначала перейдем к библиотеке иконок, предоставленной Али.Официальный сайтСкачиваем нужную нам иконку, на этот раз немного отличается от первого раза, на этот раз нам предстоит выбрать материал для скачивания, выбираемsvg~

  • 2. Скачать хорошоsvgИсходный код размещен непосредственно в нашей библиотеке иконок. После выбора иконки мы можем использовать селектор цвета, чтобыjsустановить соответствующийsvgЗнаковыйfillатрибут, динамически заливайте значок разными цветами, что почти похоже на следующий эффект~

  • 3. Далее вы можете изменить цветsvgпройти черезsvgПеременаbase64Плагин преобразует его вbase64Кодить, ради удобства, мне просто будет лень,онлайн-конверсия, соответствующийbase64Кодировка следующая:
<!--map-->
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzIuMDBweCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9InJlZCIgZD0iTTUxMy41Nzc4MDcgMTAxOC40ODg0MjVhMjQuNTcyMjI0IDI0LjU3MjIyNCAwIDAgMS0yMC4xOTMwNjYtMTAuNTY4NTQ0TDE5Mi4wMDIwNDggNTczLjM1NDI4YTI0LjY4MDc1NiAyNC42ODA3NTYgMCAwIDEtMC45Mzc4NzktMS40NTgwMTIgMzczLjg4MTk2NSAzNzMuODgxOTY1IDAgMCAxLTM0LjA3Njk1Mi03NS4zNjYxNTFjLTEyLjA3Nzc1MS0zNy4zMTE0MDUtMTguMTk4NTM4LTc2LjE5NjUyMi0xOC4xOTg1MzctMTE1LjU4OTQ4NiAwLTIwNi42NjQwODYgMTY4LjEzMzIzMy0zNzQuNzk4MzQzIDM3NC43OTgzNDItMzc0Ljc5ODM0MyA0Ny45NDM0MyAwIDk2LjAzODM5NiAxMS41NzkxMTkgMTQyLjk0NzcwMiAzNC40MTU4NTcgNDIuNzAzMTg1IDIwLjc4ODk2OCA4My43NjYxMDYgNTEuMDQyNzMxIDExOC43NTEyNDQgODcuNDg4OTU0IDM0LjA4NzE5IDM1LjUxMTQxNSA2Mi40MzE0MDggNzYuODYyMDQ3IDgxLjk2NzE0IDExOS41ODI2MzggMjAuMzYyMDA3IDQ0LjUyNDY3NyAzMS4xMjIwMTggOTAuNjEyODI3IDMxLjEyMDk5NCAxMzMuMjgwMTc3IDAgMzkuNDAyMTc5LTYuMTIxODEgNzguMjg2MjcyLTE4LjE5NDQ0MiAxMTUuNTczMTA0LTguMzM3NDk4IDI1LjcyODE5LTE5Ljg1OTI4IDUxLjM4NDcwOS0zMy4zMjQzOTYgNzQuMjAwOTY5LTAuMzA0MDk0IDAuNTE2MDM4LTAuNjI3NjQyIDEuMDIwODE0LTAuOTY4NTk1IDEuNTE0MzI3TDUzMy43NzA4NzQgMTAwNy45MTc4MzNhMjQuNTc2MzE5IDI0LjU3NjMxOSAwIDAgMS0yMC4xOTMwNjcgMTAuNTcwNTkyek0yMzIuODkwOTA4IDU0Ni4wNzI4NTZsMjgwLjY4MzgyOCA0MDQuNzE4MzE5TDc5NC45NzgzNTQgNTQ0Ljk0OTY1NGMxMS40Njk1NjMtMTkuNTcwNTQ0IDIxLjI5ODg2My00MS41NDYxOTUgMjguNDQ3NjMtNjMuNjA3ODUyIDEwLjQ4NDU4Ni0zMi4zODM0NDUgMTUuODAyNjQ2LTY2LjE3NTc1NiAxNS44MDI2NDYtMTAwLjQzMDg2NCAwLjAwNDA5Ni03Mi4xODE4NjgtMzcuMTUzNzI3LTE1My45ODcyMzMtOTkuMzk2NzM5LTIxOC44Mjg4NjdDNjc0LjY4NjE2MyA5NC4yMTM4MzIgNTkyLjIyMzQ2MyA1NS4yODk4MDggNTEzLjU4ODA0NiA1NS4yODk4MDhjLTE3OS41NjQ5MTMgMC0zMjUuNjUxODQ3IDE0Ni4wODY5MzQtMzI1LjY1MTg0NyAzMjUuNjUxODQ3IDAgMzQuMjQ1ODkyIDUuMzE3MDM2IDY4LjAzOTIyOCAxNS44MDQ2OTQgMTAwLjQzOTA1NGEzMjQuNTgxODg3IDMyNC41ODE4ODcgMCAwIDAgMjkuMTUwMDE1IDY0LjY5MjE0N3ogbTU4Mi44MDI2OTQgMTIuMTI0ODVoMC4wMTAyMzktMC4wMTAyMzl6IG0tMzAyLjc2MDg0MiAxOC42NDI5MDRjLTk2Ljg2MTYgMC0xNzUuNjYzOTEtNzguODAzMzM0LTE3NS42NjM5MS0xNzUuNjY0OTM0czc4LjgwMjMxLTE3NS42NjM5MSAxNzUuNjYzOTEtMTc1LjY2MzkwOWM5Ni44NjI2MjMgMCAxNzUuNjYzOTEgNzguODAyMzEgMTc1LjY2MzkwOSAxNzUuNjYzOTA5cy03OC44MDEyODYgMTc1LjY2NDkzNC0xNzUuNjYzOTA5IDE3NS42NjQ5MzR6IG0wLTMwMi4xODIzNDhjLTY5Ljc2MjQyNyAwLTEyNi41MTc0MTQgNTYuNzU2MDExLTEyNi41MTc0MTUgMTI2LjUxNzQxNFM0NDMuMTcxMzU3IDUyNy42OTQxMTQgNTEyLjkzMjc2IDUyNy42OTQxMTQgNjM5LjQ1MDE3NCA0NzAuOTM4MTAzIDYzOS40NTAxNzQgNDAxLjE3NTY3NnMtNTYuNzU0OTg3LTEyNi41MTc0MTQtMTI2LjUxNzQxNC0xMjYuNTE3NDE0eiIgIC8+PC9zdmc+

<!--success-->
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzEuOTdweCIgdmlld0JveD0iMCAwIDEwMjUgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9ImdyZWVuIiBkPSJNNTExLjY3OTUyNCAxMDIzLjE1OTM5Yy02OC42NTg2NzggMC0xMzUuMzk5NjE5LTEzLjU2NDQzMy0xOTguMzY5NTkxLTQwLjMxNjUwOS02MC43NTIyMzYtMjUuODA5MDc3LTExNS4zNzM0NDYtNjIuNzEyOTc2LTE2Mi4zNDYyMzMtMTA5LjY4NTc2My00Ni45NzE3NjMtNDYuOTcxNzYzLTgzLjg3NTY2Mi0xMDEuNTkyOTc0LTEwOS42ODU3NjMtMTYyLjM0NjIzMy0yNi43NTEwNTItNjIuOTY5OTcxLTQwLjMxNTQ4NS0xMjkuNzEwOTEyLTQwLjMxNTQ4NS0xOTguMzY4NTY3czEzLjU2NDQzMy0xMzUuMzk5NjE5IDQwLjMxNTQ4NS0xOTguMzY5NTkxYzI1LjgxMDEwMS02MC43NTIyMzYgNjIuNzE0LTExNS4zNzM0NDYgMTA5LjY4NTc2My0xNjIuMzQ2MjMzIDQ2Ljk3Mjc4Ny00Ni45NzE3NjMgMTAxLjU5Mzk5Ny04My44NzU2NjIgMTYyLjM0NjIzMy0xMDkuNjg1NzYzQzM3Ni4yNzk5MDUgMTUuMjg5NjggNDQzLjAyMDg0NiAxLjcyNTI0NyA1MTEuNjc5NTI0IDEuNzI1MjQ3UzY0Ny4wNzgxMTkgMTUuMjg5NjggNzEwLjA0ODA5MSA0Mi4wNDA3MzFjNjAuNzUyMjM2IDI1LjgxMDEwMSAxMTUuMzc0NDcgNjIuNzE0IDE2Mi4zNDYyMzMgMTA5LjY4NTc2MyA0Ni45NzI3ODcgNDYuOTcyNzg3IDgzLjg3NjY4NiAxMDEuNTkzOTk3IDEwOS42ODY3ODcgMTYyLjM0NjIzMyAyNi43NTIwNzYgNjIuOTY5OTcxIDQwLjMxNjUwOSAxMjkuNzEwOTEyIDQwLjMxNjUwOSAxOTguMzY5NTkxcy0xMy41NjQ0MzMgMTM1LjM5ODU5NS00MC4zMTY1MDkgMTk4LjM2ODU2N2MtMjUuODEwMTAxIDYwLjc1MzI2LTYyLjcxMjk3NiAxMTUuMzc0NDctMTA5LjY4NTc2MyAxNjIuMzQ2MjMzLTQ2Ljk3MTc2MyA0Ni45NzI3ODctMTAxLjU5Mzk5NyA4My44NzY2ODYtMTYyLjM0NjIzMyAxMDkuNjg1NzYzQzY0Ny4wNzkxNDMgMTAwOS41OTQ5NTcgNTgwLjMzNzE3OCAxMDIzLjE1OTM5IDUxMS42Nzk1MjQgMTAyMy4xNTkzOXpNNTExLjY3OTUyNCA1MC44NzE3NDJjLTYyLjAxODc4MiAwLTEyMi4yOTM4ODcgMTIuMjQ3NzE2LTE3OS4xNTIyODcgMzYuNDAzMjE5LTU0LjkyMzI1NyAyMy4zMzMzMjMtMTA0LjMxNzUzMiA1Ni43MDk5MzYtMTQ2LjgxMDgyMSA5OS4yMDQyNDlzLTc1Ljg3MDkyNiA5MS44ODg1ODgtOTkuMjA0MjQ5IDE0Ni44MTA4MjFjLTI0LjE1NTUwMyA1Ni44NTg0LTM2LjQwMzIxOSAxMTcuMTMzNTA1LTM2LjQwMzIxOSAxNzkuMTUyMjg3IDAgNjIuMDE3NzU4IDEyLjI0NzcxNiAxMjIuMjkyODYzIDM2LjQwMzIxOSAxNzkuMTUyMjg3IDIzLjMzMzMyMyA1NC45MjMyNTcgNTYuNzA5OTM2IDEwNC4zMTc1MzIgOTkuMjA0MjQ5IDE0Ni44MTE4NDUgNDIuNDkzMjg5IDQyLjQ5MzI4OSA5MS44ODg1ODggNzUuODcwOTI2IDE0Ni44MTA4MjEgOTkuMjA0MjQ5IDU2Ljg1ODQgMjQuMTU1NTAzIDExNy4xMzM1MDUgMzYuNDAzMjE5IDE3OS4xNTIyODcgMzYuNDAzMjE5IDYyLjAxNzc1OCAwIDEyMi4yOTM4ODctMTIuMjQ3NzE2IDE3OS4xNTMzMTEtMzYuNDAzMjE5IDU0LjkyMzI1Ny0yMy4zMzMzMjMgMTA0LjMxNzUzMi01Ni43MTA5NiAxNDYuODEwODIxLTk5LjIwNDI0OSA0Mi40OTQzMTMtNDIuNDk0MzEzIDc1Ljg3MTk1LTkxLjg4ODU4OCA5OS4yMDUyNzMtMTQ2LjgxMTg0NSAyNC4xNTU1MDMtNTYuODU4NCAzNi40MDMyMTktMTE3LjEzMzUwNSAzNi40MDMyMTktMTc5LjE1MjI4N3MtMTIuMjQ3NzE2LTEyMi4yOTM4ODctMzYuNDA0MjQzLTE3OS4xNTIyODdjLTIzLjMzMzMyMy01NC45MjMyNTctNTYuNzEwOTYtMTA0LjMxNzUzMi05OS4yMDQyNDktMTQ2LjgxMDgyMS00Mi40OTQzMTMtNDIuNDkzMjg5LTkxLjg4ODU4OC03NS44NzA5MjYtMTQ2LjgxMTg0NS05OS4yMDQyNDlDNjMzLjk3MjM4NyA2My4xMTk0NTkgNTczLjY5NzI4MiA1MC44NzE3NDIgNTExLjY3OTUyNCA1MC44NzE3NDJ6TTQ1MS43ODAxODUgNjg5Ljg0ODg4MWMtNi4yMjMxNzUgMC0xMi40NTI0OTMtMi4yNTU2MTktMTcuMzY1MDk1LTYuNzk0NTAzTDI1My4xOTU1NzggNTE1LjY1ODM0MmMtMTAuMzg0MjQ1LTkuNTkyNzgyLTExLjAyNzI0NS0yNS43ODc1NzYtMS40MzQ0NjMtMzYuMTcxODIxIDkuNTkyNzgyLTEwLjM4NjI5MyAyNS43ODY1NTItMTEuMDI2MjIxIDM2LjE3MTgyMS0xLjQzNDQ2M2wxNjMuMTQ2OTEyIDE1MC43MDM2MzMgMjg5Ljc1MzQwNC0yODkuNzU0NDI4YzkuOTk3MjE2LTkuOTk2MTkyIDI2LjIwMzI3My05Ljk5NjE5MiAzNi4xOTk0NjYgMCA5Ljk5NjE5MiA5Ljk5NjE5MiA5Ljk5NjE5MiAyNi4yMDMyNzMgMCAzNi4xOTk0NjZMNDY5Ljg4MzUwMSA2ODIuMzUxOTkzQzQ2NC44OTYxNTYgNjg3LjMzOTMzOCA0NTguMzQyMjY2IDY4OS44NDg4ODEgNDUxLjc4MDE4NSA2ODkuODQ4ODgxeiIgLz48L3N2Zz4=

<!--atm-->
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzEuOTdweCIgdmlld0JveD0iMCAwIDEwMjUgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9ImJsdWUiIGQ9Ik01MTEuNzA4MTkzIDk4NS40NTk5MzJjLTI0My40MzQ4NzkgMC00NDIuNjA4MjItMTkxLjc5NzI3MS00NDIuNjA4MjItNDMwLjMxNDQyOSAwLTExNC4zNTQ2OCA0NS43NDIwNzctMjE5LjA3OTcxOSAxMjIuOTMzODE1LTI5Ny40OTkwOTYgMC4zNzA2NDYtMC4zNzY3OSAwLjAzOTkzMi0yLjgyMjg1Mi0wLjAyODY2OS00LjYzNTEyOS0wLjA4Mzk1OS0yLjE5ODI4MiAwLjA0MTk3OS0zLjg4NDYyMSAwLjA0MTk3OS01LjIzMzA3OEwxOTIuMDQ3MDk5IDc1LjY1Mzg2M2MwLTEyLjI5NDgxNSA3LjM3NzA5NC0yMi4xMzAyNTcgMTkuNjcxOTA5LTI0LjU4OTYzIDAgMCAwIDAgMi40NTkzNzMgMCAyLjQ1OTM3MyAwIDIuNDU5MzczIDAgMi40NTkzNzMgMHMwIDAgMi40NTkzNzMgMGM0LjkxNzcyMSAwIDkuODM1NDQyIDAgMTQuNzUzMTY0IDIuNDU5MzczbDE0Mi42MTgwMTEgODguNTIyMDU0IDIuNDU5MzczIDIuNDU5MzczYzQxLjgwMjE2Ni0xMi4yOTQ4MTUgODYuMDYyNjgxLTE5LjY3MTkwOSAxMzIuNzgyNTY4LTE5LjY3MTkwOSAyNDMuNDM0ODc5IDAgNDQyLjYwODIyIDE5MS43OTcyNzEgNDQyLjYwODIyIDQzMC4zMTQ0MjlTNzU1LjE0MzA3MiA5ODUuNDU5OTMyIDUxMS43MDgxOTMgOTg1LjQ1OTkzMnpNNTExLjcwODE5MyAxNzQuMDExMzU5Yy00NC4yNjA1MTUgMC04OC41MjIwNTQgNy4zNzcwOTQtMTI3Ljg2NDg0NyAyMi4xMzAyNTdsMCAwYy0xMC4zNzcwNzggNS40MTAyMS0yNC41ODk2MyA0LjkxNzcyMS0zNC40MjUwNzItMi40NTkzNzNMMjQxLjIyNTMzNSAxMjkuNzQ5ODJsMCAxMTguMDI5NDA1YzAgOS43MDIzMzcgMy4wNDA5MzkgMjEuMDI1NDg1LTAuNjA0MDkyIDI5LjczMjYwNi0wLjA1MDE3IDAuMTE5Nzk1LTAuMzEzMzA5IDAuNDkyNDg5LTAuNTEwOTE5IDAuNjk5MzE0LTAuMDUxMTk0IDAuMDUzMjQyLTAuMTE0Njc1IDAuMTA4NTMyLTAuMTg0Mjk5IDAuMTc2MTA4LTc0LjIyNDUxOSA3MC44NTQ5MTItMTIxLjY0Njc5MiAxNjcuOTM2NjQ3LTEyMS42NDY3OTIgMjc2Ljc1OTI3NSAwIDIxMS40NjgxNTYgMTc3LjA0MzA4MyAzODEuMTM1MTY5IDM5My40Mjk5ODQgMzgxLjEzNTE2OVM5MDUuMTM4MTc3IDc2Ni42MTQ2ODMgOTA1LjEzODE3NyA1NTUuMTQ2NTI4QzkwNS4xMzgxNzcgMzQzLjY3NzM0OCA3MjguMDk1MDkzIDE3NC4wMTEzNTkgNTExLjcwODE5MyAxNzQuMDExMzU5ek01MzYuMjk4ODQ3IDU0Ni4zMDAxNThjLTE0LjEzNzgwOSAwLTI1LjU5NzEzMy0xMS40NTkzMjUtMjUuNTk3MTMzLTI1LjU5NzEzM2wwLTc2LjczNzEzM2MwLTE0LjEzNjc4NSAxMS40NTkzMjUtMjUuNTk3MTMzIDI1LjU5NzEzMy0yNS41OTcxMzNzMjUuNTk3MTMzIDExLjQ2MDM0OCAyNS41OTcxMzMgMjUuNTk3MTMzbDAgNzYuNzM3MTMzQzU2MS44OTU5OCA1MzQuODQwODM0IDU1MC40MzU2MzEgNTQ2LjMwMDE1OCA1MzYuMjk4ODQ3IDU0Ni4zMDAxNTh6TTcyMy42Njk4NjEgNTQ2LjMwMDE1OGMtMTQuMTM3ODA5IDAtMjUuNTk3MTMzLTExLjQ1OTMyNS0yNS41OTcxMzMtMjUuNTk3MTMzbDAtNzYuNzM3MTMzYzAtMTQuMTM2Nzg1IDExLjQ1OTMyNS0yNS41OTcxMzMgMjUuNTk3MTMzLTI1LjU5NzEzM3MyNS41OTcxMzMgMTEuNDYwMzQ4IDI1LjU5NzEzMyAyNS41OTcxMzNsMCA3Ni43MzcxMzNDNzQ5LjI2Njk5NCA1MzQuODQwODM0IDczNy44MDY2NDYgNTQ2LjMwMDE1OCA3MjMuNjY5ODYxIDU0Ni4zMDAxNTh6IiAvPjwvc3ZnPg==
  • 4. Затем нам нужно только поставить соответствующийbase64Код отправляется в апплет, и апплет размещается непосредственно наimageв компонентеsrcАтрибутов достаточно, для стилей их можно изменять напрямуюimageстиль управленияiconстиль, эффект выглядит следующим образом:

хорошо~ задача вполне успешно выполнена~

На этот раз продукт никогда не усложнит мне жизнь~

Эпилог

До сих пор у нас естьgetОн реализован в двух небольших программахiconРешение пользовательского цвета, сравнение показало, что первое решение характеризуется относительной простотой реализации, и шаги все еще в порядке, но масштабируемость не является сильной, и каждое изменение необходимо делать снова и больше. Иконок, апплет занимает большое пространство и имеет определенные ограничения.По сравнению с первым решением второе решение немного более громоздкое в процессе реализации, но эффект налицо.Недостатки первой схемы, масштабируемость очень хорошо, я рекомендую это, и это также схема, которую мы используем ~

Конечно, это только одна из моих идей реализации.Если у вас есть лучшее решение в этом отношении, не забудьте вовремя процитировать меня, мне не терпится узнать~

Категории