Отрисовка фигуры
Стоит следующая задача. Отрисовка фигуры которая будет просчитывать свои размеры по данным введенным из html формы.
Вот так выглядит фигура  Посоветуйте скрипты которые можно взять за основу. |
Canvas вам в помощь! Ну и геометрия...
|
На 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>
|
Да ты просто красавчик) В нормальных браузер во всех последних сборках работает)
|
[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>
|
Да вообще не понятно можно ли вставлять SVG прямо в HTML. Опыт показывает что вроде (почти всегда) работает, но откуда следует что это правильно? Везде пишут что SVG в отдельном файле и вставлять надо тэгом object (про iframe не буду). Поэтому написал что прикол.
Опыт показывает, что также можно файл svg подключать тэгом img, или даже код svg непосредственно в HTML, но какая дока так делать разрешает? |
|
Цитата:
Буду знать. Просто в нескольких разных учебниках по SVG в один голос говорится, что есть только три способа - object, embed и iframe Ни про img ни про вставку непосредственно в HTML раньше ничего не видел. |
А неча всякие левые учебники читать.) Вообще веб развивается так быстро, что полноценные учебники устаревают в момент выхода.(в плане технологий, сами практики живут:) ) В данном вопросе лучше ориентироваться на разработчиков браузеров. (например mdn).
|
| Часовой пояс GMT +3, время: 04:57. |