03.07.2013, 15:09
|
|
Интересующийся
|
|
Регистрация: 26.12.2012
Сообщений: 11
|
|
|
Работа с изображениями в JS
Суть: Делаю каркас человека, в котором есть элементы, сделанные картинками.
Элементы - это: две ноги, две руки, тело, шея, голова.
Сами картинки белые, но при отображении на странице, элементы должны быть покрашены в цвет, от зеленого до красного, в зависимости от указанных параметров...
При наведении курсора на элемент ( Учитывая коллизии, а не просто прямоугольник ), элемент должен обводиться по контуру.
Как такое реализовать наилучшим образом, используя JS ( Jquery имеется. )?
|
|
03.07.2013, 15:13
|
 |
Профессор
|
|
Регистрация: 06.05.2009
Сообщений: 1,163
|
|
|
__________________
Нужно равняться на лучших, а не оправдываться за счёт худших.
|
|
03.07.2013, 15:22
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Лучше всего тут подойдет SVG
|
Сообщение от Flaker
|
|
Jquery имеется.
|
Да ладно? Где взял? ДЕЛИСЬ!!! |
|
03.07.2013, 15:32
|
|
Профессор
|
|
Регистрация: 06.05.2009
Сообщений: 1,163
|
|
Не, ну раз уж на то пошла, то и на дивах здесь можно, если сильно захотеть 
__________________
Нужно равняться на лучших, а не оправдываться за счёт худших.
|
|
03.07.2013, 16:01
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от Nekromancer
|
|
Не, ну раз уж на то пошла, то и на дивах здесь можно, если сильно захотеть
|
А на svg можно сделать если совсем чуть-чуть захотеть. |
|
03.07.2013, 16:25
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
<!DOCTYPE html>
<svg id="image" width="640" height="320" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<style>
.human *:hover{
stroke: #ff0000;
}
</style>
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g class="human">
<circle id="svg_1" r="37.735924" cy="76" cx="291" stroke-width="5" stroke="#000000" fill="#ffffff"/>
<ellipse ry="56" rx="22" id="svg_3" cy="177" cx="293" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff"/>
<ellipse rx="4" id="svg_13" cy="128" cx="251" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff"/>
<ellipse transform="rotate(-28.4429 235 156)" ry="5" rx="38" id="svg_14" cy="156" cx="235" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff"/>
<ellipse transform="rotate(67.249 327 275)" ry="4" rx="44" id="svg_15" cy="275" cx="327" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff"/>
<ellipse id="svg_16" transform="rotate(36.5289 346 159.5)" ry="5" rx="38" cy="159.5" cx="346.000008" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff"/>
<ellipse id="svg_17" transform="rotate(110.353 260 275.5)" ry="4" rx="44" cy="275.5" cx="260" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff"/>
</g>
</svg>
<div>
<label>R:<input type="range" id="r" min="0" max="255" value="255" /></label>
<label>G:<input type="range" id="g" min="0" max="255" value="255" /></label>
<label>B:<input type="range" id="b" min="0" max="255" value="255" /></label>
<script>
var onchange = function() {
var channels = sliders.map(function(slider){
return slider.value;
});
var color = 'rgb(' + channels + ')';
var parts = image.querySelectorAll('.human *');
for (var i = 0, part; part = parts[i]; i++) {
part.style.fill = color;
}
};
var sliders = [r,g,b];
sliders.forEach(function(slider){
slider.onchange = onchange;
});
</script>
</div>
|
|
03.07.2013, 16:40
|
|
Профессор
|
|
Регистрация: 06.05.2009
Сообщений: 1,163
|
|
|
Ну круто. А ничего, что картинки они растровые и в случае канваса нужно всего пару байт сменить, что бы изменить цвет.
__________________
Нужно равняться на лучших, а не оправдываться за счёт худших.
|
|
03.07.2013, 16:53
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Nekromancer, спорить не буду, пока автор топика не покажет свою графику
|
|
03.07.2013, 16:54
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
на канве делал подобное . пикселы были в контуре и во вне прозрачные но разных цветов*(грубо говоря группы ) . проходил по массиву и перекрашивал группы в необходимый цвет
|
|
03.07.2013, 23:58
|
|
Интересующийся
|
|
Регистрация: 26.12.2012
Сообщений: 11
|
|
|
Спасибо большое всем за дельные советы. Вариант с SVG кажется мне наиболее подходящим.
На сколько я понял, SVG картинку можно сделать в специальном редакторе типа Ai, а при использовании canvas вручную все просчитывать? Или не правильно понял?
А по поводу поддержки браузерами, что предпочтительнее?
|
|
|
|
