![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
04.04.2013, 15:26
|
Интересующийся
|
|
Регистрация: 01.04.2013
Сообщений: 20
|
|
Отрисовка фигуры
Стоит следующая задача. Отрисовка фигуры которая будет просчитывать свои размеры по данным введенным из html формы.
Вот так выглядит фигура
![](http://plasmon.rghost.ru/45035267/thumb.png)
Посоветуйте скрипты которые можно взять за основу.
Последний раз редактировалось Malsim, 04.04.2013 в 15:32.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
04.04.2013, 15:45
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
Canvas вам в помощь! Ну и геометрия...
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
08.04.2013, 19:13
|
![Аватар для rgl](https://javascript.ru/forum/image.php?u=12061&dateline=1503935422) |
Профессор
|
|
Регистрация: 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>
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
08.04.2013, 19:58
|
Интересующийся
|
|
Регистрация: 01.04.2013
Сообщений: 20
|
|
Да ты просто красавчик) В нормальных браузер во всех последних сборках работает)
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
09.04.2013, 00:09
|
![Аватар для Aetae](https://javascript.ru/forum/image.php?u=4993&dateline=1299014303) |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,590
|
|
[quote=rgl;244881]На SVG
Типа, прикол, за правильность работы во всех браузерах не отвечаю :-)
Гуд, только svg не надо каждый раз отрисовывать заново, в этом же вся суть ![](https://javascript.ru/forum/images/smilies/smile.gif) :
<!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
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
09.04.2013, 17:58
|
![Аватар для rgl](https://javascript.ru/forum/image.php?u=12061&dateline=1503935422) |
Профессор
|
|
Регистрация: 28.02.2011
Сообщений: 349
|
|
Да вообще не понятно можно ли вставлять SVG прямо в HTML. Опыт показывает что вроде (почти всегда) работает, но откуда следует что это правильно? Везде пишут что SVG в отдельном файле и вставлять надо тэгом object (про iframe не буду). Поэтому написал что прикол.
Опыт показывает, что также можно файл svg подключать тэгом img, или даже код svg непосредственно в HTML, но какая дока так делать разрешает?
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
09.04.2013, 22:03
|
![Аватар для Aetae](https://javascript.ru/forum/image.php?u=4993&dateline=1299014303) |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,590
|
|
Ну вообще по идее вся суть в указании для svg своего xmlns, чтобы правильно парсился, т.е. <svg xmlns="http://www.w3.org/2000/svg"></svg>, но браузерам пофиг.)
Дока.
Практика.
__________________
29375, 35
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
10.04.2013, 14:12
|
![Аватар для rgl](https://javascript.ru/forum/image.php?u=12061&dateline=1503935422) |
Профессор
|
|
Регистрация: 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.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
10.04.2013, 17:12
|
![Аватар для Aetae](https://javascript.ru/forum/image.php?u=4993&dateline=1299014303) |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,590
|
|
А неча всякие левые учебники читать.) Вообще веб развивается так быстро, что полноценные учебники устаревают в момент выхода.(в плане технологий, сами практики живут ![](https://javascript.ru/forum/images/smilies/smile.gif) ) В данном вопросе лучше ориентироваться на разработчиков браузеров. (например mdn).
__________________
29375, 35
|
|
|
|