Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.05.2015, 17:49
Аватар для Leon-on12
Аспирант
Отправить личное сообщение для Leon-on12 Посмотреть профиль Найти все сообщения от Leon-on12
 
Регистрация: 07.04.2015
Сообщений: 65

Изменения фона с текстурой.(Вопрос подхода, а не кода.)
Есть несколько картинок, в частности 7. Все они представляют из себя элементы дома вырезанные по группам.
Задача раскрашивать разные элементы дома в разные цвета.
Первоначальная идея состояла в том что бы ставить background, собственно говоря вот готовое решение: http://poe.bl.ee/1/dom.html.

Даже с двумя элементами проблема решается, но когда элементов становиться больше 2х, я встаю в тупик. Вот этот дом со всеми вырезанными слоями http://poe.bl.ee/1/dom2.html.

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

Если нет идей по подходу, спрашиваю как сделать див с разным углом наклона каждой из сторон. То есть что бы див был полностью неправильный.

Так же моя проблема решается если есть способ закрасить только полностью прозрачную часть картинки, а полупрозрачную не закрашивать(http://poe.bl.ee/1/101.png). Или же наоборот, закрашивать только видимую часть картинки, а прозрачную не трогать(http://poe.bl.ee/1/100.gif).
Ответить с цитированием
  #2 (permalink)  
Старый 13.05.2015, 18:47
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,576

Как и всегда с картинками - юзать canvas или svg, в зависимости от того что проще для задачи вектор - или растр.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 13.05.2015, 23:03
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Самая мякотка в том, что палитра гифок может быть заменена влет. Я когда делал первую веб-страницу долго не мог найти у тогда еще фронтпейджа, где у него кнопка анимирования палитры. Оказалось браузеры этого не умеют. А вот 3DS и Аниматор той же конторы - умели, но там эти гифки назывались .cell

То есть в теории вы просто берете несколько ячеек из поллитры и меняете их RGB значения - девайсу деваться некуда - перекрасит. На практике х нанэ. Да и вообще гифки - вчеращний день.

На канвасе делайте. Там все просто. Хтмлем - заколебетесь конкретно.

Самое простое в том же канвасе - меняйте просто цвет, а не раскрашивайте. Один хрен юзер ничего не понимает в RGB. Самый лучший базовый цвет для перекраски - зеленый. То есть Hue'м он реально меняется почти по всему гамуту. Яркость и насыщенность точно так же можно менять.
Ответить с цитированием
  #4 (permalink)  
Старый 14.05.2015, 02:46
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,576

kostyanet, ну на самом деле я таким извращением с палитрами gif даже занимался, в тот короткий промежуток времкни когда data:uri уже был, а canvas ещё не было.)
__________________
29375, 35
Ответить с цитированием
  #5 (permalink)  
Старый 14.05.2015, 05:22
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

А, точно, прикол, можно же отпарсить букафки, спасибо, запомню.
Ответить с цитированием
  #6 (permalink)  
Старый 14.05.2015, 05:30
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

ТСу, как дизигнер советую не вставлять движки и гамуты, а скачать фирменные поллитры с красочных сайтов типа тикурилы или пантонов, сгенерить на клиенте по данным и пусть юзер тычет прокручивая квадратики. Посмотрите как сделано в программах и сделайте так же. Я сам до сих пор не понимаю RGB, потому что всю жизнь провел в CMYK, а обычному человеку и то и другое что барану новые ворота.
Ответить с цитированием
  #7 (permalink)  
Старый 14.05.2015, 08:02
Аватар для Leon-on12
Аспирант
Отправить личное сообщение для Leon-on12 Посмотреть профиль Найти все сообщения от Leon-on12
 
Регистрация: 07.04.2015
Сообщений: 65

Поразбираюсь в Вами написанном, но позже. Спасибо всем за помощь. Решил использовать canvas.
2 элемента у меня будут менять друг друга фоном, это оконтовочки окон и сам фасад, а все остальные элементы будут меняться путём рисования в canvas соответствующего многоугольника.
Да я извращенец, но так как js знаю слабо, о способе работы canvas узнал вчера и только три функции .moveTo .lineTo и .fill(), приходиться выкручиваться. Да и нужно это к 11 часам сегоднего числа.

Готовое решение будет лежать скорее всего по тому же адресу. Сможете поржать над тонной кода
ff.beginPath();
		ff.fillStyle = '#00f';
		ff.moveTo(134, 450);
		ff.lineTo(324, 54);
		ff.lineTo(1910, 160);
		ff.lineTo(2700, 470);
		ff.lineTo(2663, 529);
		ff.lineTo(2452, 505);
		ff.lineTo(2458, 506);
		ff.lineTo(2742, 704);
		ff.lineTo(2707, 740);
		ff.lineTo(2209, 402);
		ff.lineTo(1509, 674);
		ff.lineTo(1174, 708);
		ff.lineTo(1170, 693);
		ff.lineTo(1167, 693);
		ff.lineTo(1163, 673);
		ff.lineTo(1157, 673);
		ff.lineTo(1154, 658);
		ff.lineTo(1154, 651);
		ff.lineTo(2092, 360);
		ff.lineTo(1896, 228);
		ff.lineTo(1424, 376);
		ff.lineTo(611, 277);
		ff.lineTo(330, 125);
		ff.lineTo(328, 128);
		ff.lineTo(140, 504);
		ff.lineTo(134, 450);
		ff.fill();


Сообщение от kostyanet
как дизигнер советую не вставлять движки и гамуты, а скачать фирменные поллитры с красочных сайтов типа тикурилы или пантонов
Смысла особого нет, так как это чисто примерка. Всё равно матрица заказщика, фильтр из черно белой gif с opacity 0.5 и глаз человека не имеющего отношение к графике дают о себе знать.
Это внутренний продукт одной конторки, а пикер я украл не плохой, так что я думаю в нём-то они подберут цвет. Тем более это было желание заказщика иметь имнно пикер. И со временем напряженка.

Всем спасибо. Но тему извращений в этой области можно продолжить.
Ответить с цитированием
  #8 (permalink)  
Старый 14.05.2015, 11:41
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,576

Вроде было желание заливать только полностью прозрачное? На canvas это возможно с помощью imageData (массива пикселей) - просто перебрать все и поменять те что с полной прозрачностью.
Также можно каждые группы секторов что должны иметь свой цвет раскрасить на картинке заранее, а потом при переборе менять на нужный.
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт для изменения фона и шапки при переходе на страницу Серега187 Элементы интерфейса 12 09.10.2013 16:39