На чем нарисовать такую планетарную систему и как это сделать посовременнее? - HTML и CSS

Krasi · 24.04.2022, 16:59

Я начал рисовать планетарную систему, причем хочу, чтобы элементы в ней можно было бы перемещать, а сами они еще и имели связи друг с другом в виде стрелочек с направлением.

Пока дошел до этого. Но посмотрите, пожалуйста, код. Я сделал "орбиты" как элементы Canvas. затем margin-top: -xxx px подтянул следующий div. В этом диве как раз на jquery сделал draggable-объекты (типа планетки). Мне без разницы, как им задать положение, но почему-то первым в голову пришла идея поставить position:absolute и задать top и left отступы. Проблема в том, что у меня это адаптивному дизайну ну никак не поддается - изменяется разрешение экрана - все едет. В принципе то, что на рисунке показано - мне для начала этого хватит. Вот только что я не учитываю и как мне это сделать? Также сейчас стоит вопрос - а как лучше делать направленные стрелочки между draggable-объектами? Я так понимаю, что без jquery тут не обойтись, или какие более современные либы стоит заюзать, смогут ли они это делать? Отмечу еще факт, что мне надо будет потом по клику на любой draggable-объект еще прописать, чтобы модальное окно с описанием открывалось, а внутри кружочков я хочу на заднем плане помещать изображение. Насколько я понимаю, может поэтому лучше их делать дивами, но может я ошибаюсь. Если делать чисто на свойстве position: absolute все, есть тоже проблемка - траектории планет то я нарисую, а вот как мне быть с разрешением экрана, когда круги не влезают? На мобилке я этот раздел просто скрою media и заменю на список, ок, а вот при малом разрешении экрана = ?
http://tfeya.ru/main.php
Вот тут код с планетами
Снимок экрана 2022-04-24 в 16.52.20.jpg
А это картинка, которая в целом годна, но на определенном разрешении.
Вот код c JQuery и draggable + Canvas-траектории планет:

Код:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .draggable { width: 180px; height: 180px; padding: 0.5em; border-radius: 50%; position: absolute;
      display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    justify-content:center;
  }
  #draggable1 {
      top: 450px;
      left: 50px;
  }
    #draggable2 {
      top: 250px;
      left: 680px;
  }
  #draggable3 {
      top: 40px;
      left: 720px;
  }
    #draggable4 {
      top: 250px;
      left: 310px;
  }
  #draggable5 {
      top: 480px;
      left: 410px;
  }
    #draggable6 {
      top: 50px;
      left: 450px;
  }
   #draggable7 {
      top: 50px;
      left: 50px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( ".draggable" ).draggable();
  } );
  </script>
</head>
<body>

<canvas id="canvas" width="2000" height="1000" style="background: #f4f4f4;">
    
    
</canvas>
<script>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

canvas.style.width = "100%";

ctx.arc(1000, 500, 400, 0, getRadians(360));
ctx.stroke();

ctx.arc(1000, 500, 200, 0, getRadians(360));
ctx.stroke();

function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}
</script>



<div style="position: relative; height: 100%; margin-top: -700px;">
    
<div id="draggable1" class="ui-widget-content draggable">
    <center>
  <h1>Ученики</h1>
  <p>Хотят уметь</p>
  </center>
</div>

<div id="draggable2" class="ui-widget-content draggable">
    <center>
  <h1>Стартаперы</h1>
  <p>Ищут разработчиков / сооснователей</p>
  </center>
</div>

<div id="draggable3" class="ui-widget-content draggable">
    <center>
  <h1>Контенщик</h1>
  <p>Хочет создавать контент в Интернете</p>
  </center>
</div>

<div id="draggable4" class="ui-widget-content draggable">
    <center>
  <h1>Разработчики</h1>
  <p>t = $</p>
  </center>
</div>

<div id="draggable5" class="ui-widget-content draggable">
    <center>
  <h1>Сенсеи</h1>
  <p>Хотят научить и наставлять</p>
  </center>
</div>

<div id="draggable6" class="ui-widget-content draggable">
    <center>
  <h1>Разработчики</h1>
  <p>t = $</p>
  </center>
</div>

<div id="draggable7" class="ui-widget-content draggable">
    <center>
  <h1>Держатели лабораторий</h1>
  <p>Владеют оборудованием и ресурсами</p>
  </center>
</div>

</div>
 
    </body>
</html>

Вообще на Muse я делал это так:
Снимок экрана 2022-04-24 в 17.09.40.jpg
Есть свои особенности, и я хочу сейчас нормально перерисовать это.

24.04.2022, 16:59	#1
Krasi Форумчанин Регистрация: 12.02.2010 Сообщений: 787	На чем нарисовать такую планетарную систему и как это сделать посовременнее? Я начал рисовать планетарную систему, причем хочу, чтобы элементы в ней можно было бы перемещать, а сами они еще и имели связи друг с другом в виде стрелочек с направлением. Пока дошел до этого. Но посмотрите, пожалуйста, код. Я сделал "орбиты" как элементы Canvas. затем margin-top: -xxx px подтянул следующий div. В этом диве как раз на jquery сделал draggable-объекты (типа планетки). Мне без разницы, как им задать положение, но почему-то первым в голову пришла идея поставить position:absolute и задать top и left отступы. Проблема в том, что у меня это адаптивному дизайну ну никак не поддается - изменяется разрешение экрана - все едет. В принципе то, что на рисунке показано - мне для начала этого хватит. Вот только что я не учитываю и как мне это сделать? Также сейчас стоит вопрос - а как лучше делать направленные стрелочки между draggable-объектами? Я так понимаю, что без jquery тут не обойтись, или какие более современные либы стоит заюзать, смогут ли они это делать? Отмечу еще факт, что мне надо будет потом по клику на любой draggable-объект еще прописать, чтобы модальное окно с описанием открывалось, а внутри кружочков я хочу на заднем плане помещать изображение. Насколько я понимаю, может поэтому лучше их делать дивами, но может я ошибаюсь. Если делать чисто на свойстве position: absolute все, есть тоже проблемка - траектории планет то я нарисую, а вот как мне быть с разрешением экрана, когда круги не влезают? На мобилке я этот раздел просто скрою media и заменю на список, ок, а вот при малом разрешении экрана = ? http://tfeya.ru/main.php Вот тут код с планетами Снимок экрана 2022-04-24 в 16.52.20.jpg А это картинка, которая в целом годна, но на определенном разрешении. Вот код c JQuery и draggable + Canvas-траектории планет: Код: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> .draggable { width: 180px; height: 180px; padding: 0.5em; border-radius: 50%; position: absolute; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; justify-content:center; } #draggable1 { top: 450px; left: 50px; } #draggable2 { top: 250px; left: 680px; } #draggable3 { top: 40px; left: 720px; } #draggable4 { top: 250px; left: 310px; } #draggable5 { top: 480px; left: 410px; } #draggable6 { top: 50px; left: 450px; } #draggable7 { top: 50px; left: 50px; } </style> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script> $( function() { $( ".draggable" ).draggable(); } ); </script> </head> <body> <canvas id="canvas" width="2000" height="1000" style="background: #f4f4f4;"> </canvas> <script> let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); canvas.style.width = "100%"; ctx.arc(1000, 500, 400, 0, getRadians(360)); ctx.stroke(); ctx.arc(1000, 500, 200, 0, getRadians(360)); ctx.stroke(); function getRadians(degrees) { return (Math.PI / 180) * degrees; } </script> <div style="position: relative; height: 100%; margin-top: -700px;"> <div id="draggable1" class="ui-widget-content draggable"> <center> <h1>Ученики</h1> <p>Хотят уметь</p> </center> </div> <div id="draggable2" class="ui-widget-content draggable"> <center> <h1>Стартаперы</h1> <p>Ищут разработчиков / сооснователей</p> </center> </div> <div id="draggable3" class="ui-widget-content draggable"> <center> <h1>Контенщик</h1> <p>Хочет создавать контент в Интернете</p> </center> </div> <div id="draggable4" class="ui-widget-content draggable"> <center> <h1>Разработчики</h1> <p>t = $</p> </center> </div> <div id="draggable5" class="ui-widget-content draggable"> <center> <h1>Сенсеи</h1> <p>Хотят научить и наставлять</p> </center> </div> <div id="draggable6" class="ui-widget-content draggable"> <center> <h1>Разработчики</h1> <p>t = $</p> </center> </div> <div id="draggable7" class="ui-widget-content draggable"> <center> <h1>Держатели лабораторий</h1> <p>Владеют оборудованием и ресурсами</p> </center> </div> </div> </body> </html> Вообще на Muse я делал это так: Снимок экрана 2022-04-24 в 17.09.40.jpg Есть свои особенности, и я хочу сейчас нормально перерисовать это. Мой сайт Последний раз редактировалось Krasi; 24.04.2022 в 17:11.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как реализовать такую систему оплаты?	electronictw	Фриланс	4	29.07.2013 23:14
Как реализовать такую систему?	electronictw	PHP	13	29.07.2013 00:34
Как сделать такую программу?	afirat	Паскаль, Turbo Pascal, PascalABC.NET	0	09.12.2012 17:27
Нарисовать декартову систему координат и построить у=arcsin(x)	Рафиль	Паскаль, Turbo Pascal, PascalABC.NET	0	21.12.2011 20:43
как сделать такую программу?!!!!	ITdocer	Паскаль, Turbo Pascal, PascalABC.NET	0	19.10.2011 16:27