Доброго дня всем. Прошу подсказать технологию для реализации. Ситуация вот в чем. Стоит задача реализовать схему теплосети с помощью JS. Я попытался сделать на Canvas. Схему отрисовать получилось но последующее задачи выполнить не могу.
1. Необходимо по клике на отрезок выводить информацию о нём (диаметр, длина и т.д.
2. Привязать к определённым отрезкам инпуты.
На данном этапе пока всё. Может кто то сталкивался с данной проблемой либо может подсказать в какую сторону копать.
Привожу ниже код. Если необходимо приложу бд.
<body>
<canvas id="cnv" width="5000" height="5000" style="border:solid 2px;">Ставь нормальный браузер</canvas>
<script type="text/javascript" src='canvas.js'></script>
</body>
$.ajax({//делаем ajax запрос
url: "canvas.php",//указываем адрес
success: function(data) { //в случае удачного запроса выполняем действия
arr = data.split(',');//разбиваем полученную строку на массив
k=0;//обьявляем переменную для определение елемента начальных или коннечных координат
t=0;//обьявляем переменную для определения стартовой точки отрисовки коорлинат
var ctx = document.getElementById('cnv').getContext('2d');//обьявляем переменную для отрисовки схему в canvas
ctx.beginPath();//говорим бразуеру о том что сейчас будем рисовать линии
ctx.translate(0,ctx.canvas.height);
ctx.scale(1,-1);//переворачиваем изображение
ctx.translate(-1000,1800);//смещеие чертежа на указанное кол-во пикселей
for(var i=0; i<arr.length; i++) {//запускаем цикл
sum=i%2;//определяем чётное или нечётное число
if (k == 1 || k == 0){
if (sum==0){//если чётное значить это координата х
x=parseInt(arr[i]);//присваем переменно х значение элемента массива i при это преобразовуя в целые числа
}
else{
y=parseInt(arr[i]);
ctx.moveTo(x,y);//ставим начальную точку от которой будем рисовать линиию
}
}
ctx.lineWidth=5;
if (k == 2 || k == 3){
if (sum==0){
x=parseInt(arr[i]);
}
else{
y=parseInt(arr[i]);
ctx.lineTo(x,y);//ставим конечную точку
t=1;
}
}
k++;
if (k>3)k=0;
}
ctx.stroke();//говорим о том что закончили отрисовывать схему
}
});
код который у меня есть в данный момент.
$i=0;//счётчик для цикла
$db = mysql_connect("localhost","root","");//подключаемся
$a=mysql_select_db("csv_db",$db);//выбираем базу
$result = mysql_query ("SELECT * FROM `table 8`",$db);//делаем запрос
while($row = mysql_fetch_assoc($result)) {//цикл выбора необходимых данных
$result2 = mysql_query ("SELECT * FROM `table 9` where `id`=".$row['NODE1']."",$db);//делаем запрос
$row2 = mysql_fetch_assoc($result2);
$result3 = mysql_query ("SELECT * FROM `table 9` where `id`=".$row['NODE2']."",$db);//делаем запрос
$row3 = mysql_fetch_assoc($result3);
$start[]=$row2['X'];//добавляем значение х в массив
$start[]=$row2['Y'];//добавляем значение у в массив
$start[]=$row3['X'];//добавляем значение х в массив
$start[]=$row3['Y'];//добавляем значение у в массив
$i++;
}
$comma_separated = implode(",", $start);//преобразуем массив в строку с розделителем ","
echo $comma_separated;//выводим данные для отправки по ajax
Заранее огромное спасибо.
