Корпус с регулируемыми свойствами с SVG и JS

Question

Мне нужно создать человеческое тело из линий. Я должен использовать SVG, HTML и JavaScript, и мне интересно, какие элементы следует использовать, имея в виду, что мне приходится динамически изменять размер головы, рук, талии, ног, и это не должно испортить структуру и долю все тело. Он также должен быть пропорционален размеру окна. Спасибо

Answer 1

Вы упомянули HTML, JavaScript, SVG.

HTML: будет использоваться только для создания тегов и сделать тело читаемыми в браузере, и больше, как только писать изображения и другие теги, JavaScript: будет использоваться, чтобы убедиться в вашей последней вещи , размер окна с использованием:

window.width; window.height; 

Помните, что вы также можете использовать jQuery! Это просто и легко! И будет работать быстро и эффективно для вашей работы.

jQuery API - это основа JavaScript, вы можете узнать об этом здесь: http://api.jquery.com, и я всегда буду использовать jQuery для кликов и других событий, таких как изменение размера окна, положение окна и другие, такие как наведение, наведение мышью! Чтобы вы могли просматривать содержимое скелета для этого раздела.

Окно вещь, что вы упомянули «Это изменило бы его размер» будет выглядеть следующим образом: с помощью JQuery:

if($(window).width() < 960) { 
    // zoom out the image 
} else { 
    // zoom in the image or whatever. 
} 

Что SVG будет делать, то, что это не вызывает проблем в масштабированием изображение. Нормальное изображение будет пикселироваться при увеличении. Но SVG не будет работать в скелете, SVG - хорошая идея для представления изображения.

Используйте это тоже (может быть, как предложение только):

Однако, вам также потребуется еще несколько ресурсов тоже. Некоторые вроде Ajax! Загрузка метаданных изображения. Я имею в виду, что вы не можете загрузить весь график и его данные в один запрос. Я предпочитаю использовать Ajax, чтобы загрузить определенные метаданные с сервера, предположим, как:

Когда пользователь нажимает на голову, что DIV должен иметь идентификатор головы, как <div id="head"...

Для этого события сделать Ajax вызов, как:

$("#head").click(function() { 
    $.ajax({ 
     url: "url_to_load_data", 
     data: "body_element=head", 
     success: function (result) { 
     $("#underhead").html(result); // write the result! 
     } 
    }) 
}) 

Это загрузит данные. Это предложение было сделано только для ускорения загрузки сайта!