Работа с изображениями в JS
Суть: Делаю каркас человека, в котором есть элементы, сделанные картинками.
Элементы - это: две ноги, две руки, тело, шея, голова. Сами картинки белые, но при отображении на странице, элементы должны быть покрашены в цвет, от зеленого до красного, в зависимости от указанных параметров... При наведении курсора на элемент ( Учитывая коллизии, а не просто прямоугольник ), элемент должен обводиться по контуру. Как такое реализовать наилучшим образом, используя JS ( Jquery имеется. )? |
|
Лучше всего тут подойдет SVG
Цитата:
|
Не, ну раз уж на то пошла, то и на дивах здесь можно, если сильно захотеть :)
|
Цитата:
|
<!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>
|
Ну круто. А ничего, что картинки они растровые и в случае канваса нужно всего пару байт сменить, что бы изменить цвет.
|
Nekromancer, спорить не буду, пока автор топика не покажет свою графику
|
на канве делал подобное . пикселы были в контуре и во вне прозрачные но разных цветов*(грубо говоря группы ) . проходил по массиву и перекрашивал группы в необходимый цвет
|
Спасибо большое всем за дельные советы. Вариант с SVG кажется мне наиболее подходящим.
На сколько я понял, SVG картинку можно сделать в специальном редакторе типа Ai, а при использовании canvas вручную все просчитывать? Или не правильно понял? А по поводу поддержки браузерами, что предпочтительнее? |
| Часовой пояс GMT +3, время: 04:33. |