04.04.2013, 15:26
|
|
Интересующийся
|
|
Регистрация: 01.04.2013
Сообщений: 20
|
|
|
Отрисовка фигуры
Стоит следующая задача. Отрисовка фигуры которая будет просчитывать свои размеры по данным введенным из html формы.
Вот так выглядит фигура
Посоветуйте скрипты которые можно взять за основу.
Последний раз редактировалось Malsim, 04.04.2013 в 15:32.
|
|
04.04.2013, 15:45
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Canvas вам в помощь! Ну и геометрия...
|
|
08.04.2013, 19:13
|
 |
Профессор
|
|
Регистрация: 28.02.2011
Сообщений: 349
|
|
На SVG
Типа, прикол, за правильность работы во всех браузерах не отвечаю :-)
<html>
<head>
<title>SVG test</title>
</head>
<body>
<div style="width:200px;height:200px" id="d1">
</div>
Height(10-140): <input type="text" id="height">
Width(10-140): <input type="text" id="width">
Depth(10-140): <input type="text" id="depth">
<br>
<input type="button" value="draw" onclick="f();">
<script type="text/javascript">
function f() {
var h = +document.getElementById("height").value;
var w = +document.getElementById("width").value;
var d = +document.getElementById("depth").value;
if( ! ( h>=10 && h <= 140 && w >= 10 && w <= 140 && h >= 10 && h <= 140 ) ) {
document.getElementById("d1").innerHTML = "Wrong values";
return;
}
d *= 0.3;
document.getElementById("d1").innerHTML = '<svg width="200" height="200" viewBox="0 0 200 200">'+
'<polyline stroke="black" stroke-width="2" fill="none" points="10,' +
(190-h)+','+(10+d)+','+(190-h-d)+','+(10+d+w)+','+(190-h-d)+','+(10+d+w)+','+(190-h)+','+(10+d+w)+','+(190-d)+
','+(10+w)+',190,10,190,10,'+(190-h)+','+(10+w)+','+(190-h)+','+(10+w)+','+(190)+'"/> '+
'<line stroke="black" stroke-width="2" x1="'+(10+w)+'" x2="'+(10+w+d)+'" y1="'+(190-h)+'" y2="'+(190-h-d) + '"/></svg>';
}
</script>
</body>
</html>
|
|
08.04.2013, 19:58
|
|
Интересующийся
|
|
Регистрация: 01.04.2013
Сообщений: 20
|
|
|
Да ты просто красавчик) В нормальных браузер во всех последних сборках работает)
|
|
09.04.2013, 00:09
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,584
|
|
[quote=rgl;244881]На SVG
Типа, прикол, за правильность работы во всех браузерах не отвечаю :-)
Гуд, только svg не надо каждый раз отрисовывать заново, в этом же вся суть  :
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<style type="text/css">
body{background:#eef}
polyline{
stroke:black;
stroke-width:4px;
fill:none;
}
</style>
</head>
<body>
<input type="button" value="draw" onclick="f();">
Height: <input type="text" id="height" value="100">
Width: <input type="text" id="width" value="100">
Depth: <input type="text" id="depth" value="100">
<br />
<svg width="0" height="0" id="svg">
<polyline transform="translate(2,2)" id="polyline" points="0,0"/>
</svg>
<script type="text/javascript">
function id(i){return document.getElementById(i)}
function f() {
var svg = id("svg"),
polyline = id("polyline"),
h = +id("height").value,
w = +id("width").value,
d = +id("depth").value * 0.3;
svg.setAttribute('width', w+d + 4 );
svg.setAttribute('height', (h+=d) + 4 );
polyline.setAttribute('points',[0,d, 0,h, w,h, w+d,h-d, w+d,0, d,0, 0,d, w,d, w+d,0, w,d, w,h] )
}
</script>
</body>
</html>
__________________
29375, 35
|
|
09.04.2013, 17:58
|
|
Профессор
|
|
Регистрация: 28.02.2011
Сообщений: 349
|
|
|
Да вообще не понятно можно ли вставлять SVG прямо в HTML. Опыт показывает что вроде (почти всегда) работает, но откуда следует что это правильно? Везде пишут что SVG в отдельном файле и вставлять надо тэгом object (про iframe не буду). Поэтому написал что прикол.
Опыт показывает, что также можно файл svg подключать тэгом img, или даже код svg непосредственно в HTML, но какая дока так делать разрешает?
|
|
09.04.2013, 22:03
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,584
|
|
Ну вообще по идее вся суть в указании для svg своего xmlns, чтобы правильно парсился, т.е. <svg xmlns="http://www.w3.org/2000/svg"></svg>, но браузерам пофиг.)
Дока.
Практика.
__________________
29375, 35
|
|
10.04.2013, 14:12
|
|
Профессор
|
|
Регистрация: 28.02.2011
Сообщений: 349
|
|
Сообщение от Aetae
|
|
Ну вообще по идее вся суть в указании для svg своего xmlns, чтобы правильно парсился, т.е. <svg xmlns="http://www.w3.org/2000/svg"></svg>, но браузерам пофиг.)
|
Мой скоромный опыт показывает, что браузерам пофиг только когда вставляешь код SVG непосредственно в HTML, но если отдельным файлом, то не пофиг, xmlns нужно указывать обязательно.
Буду знать. Просто в нескольких разных учебниках по SVG в один голос говорится, что есть только три способа - object, embed и iframe Ни про img ни про вставку непосредственно в HTML раньше ничего не видел.
Последний раз редактировалось rgl, 10.04.2013 в 14:14.
|
|
10.04.2013, 17:12
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,584
|
|
А неча всякие левые учебники читать.) Вообще веб развивается так быстро, что полноценные учебники устаревают в момент выхода.(в плане технологий, сами практики живут ) В данном вопросе лучше ориентироваться на разработчиков браузеров. (например mdn).
__________________
29375, 35
|
|
|
|
