Задать вопрос
@evgek
_global

Как сделать в js движение по траектории с заполенением?

Привет, суть задачи отрисовать движение течения по траектории схемы продукта.
Есть схема установки по которой течет продукт . конечная цель сделать отрисовку движения продукта .

Вот пример "кусочка" схемы:
c2ec1570da1e4bddbfdd0b407027ae9a.png

те. при нажатии на кнопку "Пуск" у нас была анимация движения . с заполнением емкостей было бы вообще шик.
подскажите пожалуйста , какие идеи есть? или сделать SVG проще?

что то на подобии того

6ecde56ba90b41cd89088e10c1bd2a80.png

ПС . гугл дает движение по координатам но задавать каждый отрезок слишком долго т.к. их тысячи.
Или как тогда получить координаты всех пересечений линий в схеме ?

В схеме есть зацикленные участки т.е. где продукт циркулирует . Буду рад любой помощи . покажите где копать
  • Вопрос задан
  • 1867 просмотров
Подписаться 2 Оценить 3 комментария
Пригласить эксперта
Ответы на вопрос 2
studenter
@studenter
когда я вырасту я стану програмистым!
сделай по подобию обычной бекущей строки
на canvas

создаешь связанные массивы точек-обьектов пути

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

и программируешь скорость передачи импульса между узлами-точками
меняя цвет - изображаешь темпиратуру
мерцанием - изображаешь переменный ток
и заполнение емкостей - заполнение двумерного массива точек

используй requestanimationframe
Ответ написан
Комментировать
@evgek Автор вопроса
_global
если от точки до точки то так?

<html>
 <head>
 <script type="text/javascript">
 var x,y,obj,corner,dc;
 function init_move_line(x,y,d,obid,timeout) { 
     var obj=document.getElementById(obid);
     dx = (x-obj.offsetLeft);
     dy = (y-obj.offsetTop);
     var line=Math.sqrt(dx*dx+dy*dy);
     dx=d*dx/line;
     dy=d*dy/line;
     dc=line;
     moveL(obj.offsetLeft,obj.offsetTop,x,y,dx,dy,dc,obid,timeout);
 }
 function moveL(x0,y0,x,y,dx,dy,dc,obid,timeout){
     obj=document.getElementById(obid);
     x0 += dx;
     y0 += dy;
     dc-=Math.sqrt(dx*dx+dy*dy);
     obj.style.left=parseInt(x0)+"px";
     obj.style.top=parseInt(y0)+"px";
     if(dc>0) setTimeout("moveL("+x0+","+y0+","+x+","+y+","+dx+","+dy+","+dc+",'"+obid+"',"+timeout+")" , timeout); 
 }
 </script>
 </head>
 <body>
<button onclick="init_move_line(500,300,2,'move',0)"><img src="/scheme/deem.png" style="vertical-align: middle">Пуск</button>
  <img src='/scheme/sh1.png'/>
  
  
 <div id="move" 
  style="position:absolute;
 height:15px;
 width:15px;
 background-color:#000;
 left:200px;
 top:300px">
 
 
 </div>

 
 </body>
 </html>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы