Как сделать чтобы на двумерную модельку в белом цвете накладывалась маска выбранного цвета?

@Noob Progaramm · Регистрация: 20.10.2015

Студворк — интернет-сервис помощи студентам

Привет. Кто в теме для вас вопрос: есть идея для одно проекта связанного с мебелью сделать динамическую смену цвета объекта по нажатию на триггер, но не чтобы тупо картинка менялась(тип две одинаковые, но цвета разные), а чтоб на двухмерную модельку в белом цвете накладывалась маска выбранного цвета. В принцыпе в мозгу есть соображения как такое намутить, но весьма примитивные. Нужно понимание какого формата должен быть файлик с шаблоном, чтоб ЖиЭска смогла выделить контуры шаблона автоматом и закрашивать только в их пределах.

В общем, если кто подобным занимался(а я уверен, что не первому мне пришла в голову идея такая), дайте пожалуйста ссылочки на полезное чтиво по этой теме

П.С. К вопросу о том, что мог и сам погуглить: так я гулил, ток из меня гуглер хреновый, потому не нашёл конкретно то, что интересует, всё только гайды как замутить фоторедактор аля инста

@MrOnlineCoder · 24.05.2018, 16:37

Noob Progaramm, самый простой способ, первое что приходит в голову:

Загружаете картинку
Читаете массив пикселей в картинке
При смене цвета, меняете каждый пиксель с определенным цветом на нужный (в цикле)
Перерисовываете холст

@Noob Progaramm · 24.05.2018, 17:17 **[ТС]**

А картинка должна получается быть без фона? В смысле ПНГ-шка с прозрачным фоном. JS же воспринимает прозрачный фон?

@MrOnlineCoder · 24.05.2018, 17:20

Noob Progaramm, прозрачный фон это RGBA(255,255,255,255), т.е. нужно просто проверить, равен ли альфа канал 255.

@j2FunOnly · 25.05.2018, 10:45

Noob Progaramm, например SVG. Берёте картинку, рисуете контур (тем же inkscape) и меняете цвета.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SVG</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <form>
      <div class="colors">
        <label>
          <input type="radio" name="color" value="red" checked>Red
        </label>
        <label>
          <input type="radio" name="color" value="green">Green
        </label>
        <label>
          <input type="radio" name="color" value="blue">Blue
        </label>
      </div>
    </form>
    <div class="main">
      <svg>
        <path class="body red" d="M 291.15625 52.53125 C 235.88077 52.53125 191.0625 100.23662 191.0625 159.0625 C 191.0625 182.36137 198.09007 203.90399 210 221.71875 C 210 221.71875 293.43561 324.19962 147.0625 380.96875 C 114.96317 385.81377 75.54453 423.13072 77.5 480.21875 C 79.466007 537.6144 121.62439 584.15625 176.0625 584.15625 C 218.78536 584.15625 254.42814 556.00174 269.84375 515.5625 C 316.46532 424.56848 393.70225 451.47362 425.875 489.625 C 436.32948 504.29033 471.57975 524.25039 501.03125 523.0625 C 557.3821 520.78966 603.0625 476.68768 603.0625 419.5 C 603.0625 362.31231 566.19774 313.70157 501.78125 315.75 C 412.81127 330.1855 365.09068 259.71142 388.9375 180.875 C 390.57873 173.29667 391.25 166.26137 391.25 159.0625 C 391.25 100.23662 346.43173 52.53125 291.15625 52.53125 z M 290.15625 75.03125 C 334.92405 75.03125 371.21875 112.24142 371.21875 158.125 C 371.21875 204.00858 334.92405 241.21875 290.15625 241.21875 C 245.38846 241.21875 209.09375 204.00858 209.09375 158.125 C 209.09375 112.24142 245.38846 75.03125 290.15625 75.03125 z M 323.25 269 C 367.60055 269 403.5625 306.43006 403.5625 352.59375 C 403.5625 398.75744 367.60055 436.15625 323.25 436.15625 C 278.89946 436.15625 242.9375 398.75744 242.9375 352.59375 C 242.9375 306.43006 278.89946 269 323.25 269 z M 501.78125 336.15625 C 546.83046 336.15625 583.375 373.36395 583.375 419.25 C 583.375 465.13606 546.83046 502.34375 501.78125 502.34375 C 456.73203 502.34375 420.21875 465.13606 420.21875 419.25 C 420.21875 373.36395 456.73203 336.15625 501.78125 336.15625 z M 178.8125 395.25 C 223.44074 395.25 259.59375 432.79183 259.59375 479.09375 C 259.59375 525.39567 223.44074 562.9375 178.8125 562.9375 C 134.18426 562.9375 98 525.39567 98 479.09375 C 98 432.79183 134.18426 395.25 178.8125 395.25 z " />
      </svg>
      <img src="pic.jpg">
    </div>
    <script src="app.js" charset="utf-8"></script>
  </body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.main svg {
  width: 617px;
  height: 642px;
  position: absolute;
}
 
.main .body {
  stroke: none;
}
 
.main .body.red {
  fill: red;
}
 
.main .body.green {
  fill: green;
}
 
.main .body.blue {
  fill: blue;
}

JavaScript
1
2
3
4
5
6
var svgBody = document.querySelector('.main .body'),
  form = document.querySelector('form');
 
form.querySelector('.colors').addEventListener('change', function () {
  svgBody.setAttribute('class', 'body ' + form.color.value);
});

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@Noob Progaramm 1 / 1 / 1 Регистрация: 20.10.2015 Сообщений: 101

	Как сделать чтобы на двумерную модельку в белом цвете накладывалась маска выбранного цвета? 24.05.2018, 16:24. Показов 784. Ответов 4 Метки нет (Все метки) Привет. Кто в теме для вас вопрос: есть идея для одно проекта связанного с мебелью сделать динамическую смену цвета объекта по нажатию на триггер, но не чтобы тупо картинка менялась(тип две одинаковые, но цвета разные), а чтоб на двухмерную модельку в белом цвете накладывалась маска выбранного цвета. В принцыпе в мозгу есть соображения как такое намутить, но весьма примитивные. Нужно понимание какого формата должен быть файлик с шаблоном, чтоб ЖиЭска смогла выделить контуры шаблона автоматом и закрашивать только в их пределах. В общем, если кто подобным занимался(а я уверен, что не первому мне пришла в голову идея такая), дайте пожалуйста ссылочки на полезное чтиво по этой теме П.С. К вопросу о том, что мог и сам погуглить: так я гулил, ток из меня гуглер хреновый, потому не нашёл конкретно то, что интересует, всё только гайды как замутить фоторедактор аля инста 0

@MrOnlineCoder Всегда онлайн 1084 / 788 / 295 Регистрация: 07.04.2013 Сообщений: 2,703
	24.05.2018, 16:37
	Noob Progaramm, самый простой способ, первое что приходит в голову: Загружаете картинку Читаете массив пикселей в картинке При смене цвета, меняете каждый пиксель с определенным цветом на нужный (в цикле) Перерисовываете холст 0

@Noob Progaramm 1 / 1 / 1 Регистрация: 20.10.2015 Сообщений: 101
	24.05.2018, 17:17 [ТС]
	А картинка должна получается быть без фона? В смысле ПНГ-шка с прозрачным фоном. JS же воспринимает прозрачный фон? 0

@MrOnlineCoder Всегда онлайн 1084 / 788 / 295 Регистрация: 07.04.2013 Сообщений: 2,703
	24.05.2018, 17:20
	Noob Progaramm, прозрачный фон это RGBA(255,255,255,255), т.е. нужно просто проверить, равен ли альфа канал 255. 1