i made this with html,css,js,jq
So here is my scene:
I am getting data from api and api tells me how much office, truck (plate license) and user i have
I have to make a line between the user and it’s office with canvas
And then with the animation i have to move the plate license between the office and user.
How can i make the line between the user and office? I set the body tag position:relative; and canvas and images are position:absolute; so i get the coordinate of office and user and i give the coordinate to canvas to make line
Here is my code:
css:
#companies {
}
.customer {
margin: 0 0 1px 1px;
flex: 1;
width: 50px;
border-radius: 50%;
}
.col-6 {
margin: 0;
padding: 0;
}
img {
width: 100px;
margin: auto;
text-align: center;
}
.customer img {
width: 100%;
}
.company img {
text-align: center;
justify-content: center;
display: flex;
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 3000;
width: 500px;
height: 500px;
}
body{
position:relative;
}
html:
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div style="box-shadow: 0 0 9px 2px #eee;height: 100vh;width: 100%;border: none" class="card p-3">
<p class="text-center pt-3" style="font-family: 'IRANSansWeb(FaNum) UltraLight';font-size: 25px">مشاهده
بار های ارسالی</p>
<div id="companies" style="display: flex;padding: 100px 20px 0 20px">
</div>
<div id="trucks">
<img id="truck1" src="img/plate.png" width="100" style="position:absolute;"
alt="">
</div>
<div id="customers" class="mt-3" style=";padding: 200px 20px 0 20px;display: flex">
</div>
<div id="canvases">
</div>
</div>
</div>
<div class="col-6">
<div id="map" style="width: 100%; height: 100vh; background: #eee; box-shadow: 0 0 9px 2px #eee;"></div>
</div>
</div>
</div>
js:
var myMap = new L.Map('map', {
key: 'web.wB4tHXmSnCW6HSBtvoOefGvDobZ8mDuUId7gNWxk',
maptype: 'dreamy',
poi: true,
traffic: false,
center: [32.661343, 51.680374],
zoom: 14,
zoomControl: false,
});
axios({
method: 'get',
url: 'http://sale.bbi.co.ir/API/Navy',
}).then(function (response) {
// console.debug(response.data.factory)
let factory = response.data.factory;
for (let i = 0; i < factory.length; i++) {
for (let j = 0; j < factory[i].Car_input.length; j++) {
let latitude_longitude = [];
latitude_longitude = factory[i].Car_input[j].Coordinates.split(',');
L.marker([latitude_longitude[0].trim(), latitude_longitude[1].trim()]).addTo(myMap)
}
}
let canvas_number = 0
for (let i = 0; i < 4; i++) {
let image = document.createElement('img')
image.src = 'img/office.svg'
image.width = 100
image.style.left = '0'
image.style.top = '0'
let div = document.createElement('div')
div.style.margin = '0 0 1px 1px'
div.style.width = '100px'
div.style.height = '100px'
div.style.flex = '1'
div.id = 'company' + i
div.appendChild(image)
document.getElementById('companies').appendChild(div);
document.getElementById('customers').innerHTML += `<div id="customer${canvas_number}" class="customer"
style="margin:0 0 1px 1px;flex: 1; width: 50px;">
<img src="img/user.svg" alt="">
</div>
`
let canvas = document.createElement('canvas')
canvas.id = 'canvas' + canvas_number
document.getElementById('canvases').appendChild(canvas)
canvas = document.getElementById('canvas' + i);
if (canvas.getContext) {
let centerXCompany = document.getElementById('company' + i).offsetLeft + document.getElementById('company' + i).offsetWidth / 2;
let centerYCompany = document.getElementById('company' + i).offsetTop + document.getElementById('company' + i).offsetHeight / 2;
let centerXCustomer = document.getElementById('customer' + i).offsetLeft + document.getElementById('customer' + i).offsetWidth / 2;
let centerYCustomer = document.getElementById('customer' + i).offsetTop + document.getElementById('customer' + i).offsetHeight / 2;
// console.debug(document.getElementById('canvas4'))
console.debug('#company' + i + ' x: ' + centerXCompany + ' y: ' + centerYCompany)
console.debug('#customer' + i + ' x: ' + centerXCustomer + ' y: ' + centerYCustomer)
let context = canvas.getContext('2d');
console.debug(centerXCompany, centerYCompany, centerXCustomer, centerYCustomer)
// Reset the current path
context.beginPath();
// Staring point (10,45)
context.strokeStyle = '#f9ab00'
context.moveTo(centerXCompany, centerYCompany);
// End point (180,47)
context.lineTo(centerXCustomer, centerYCustomer);
// Make the line visible
context.stroke();
}
canvas_number++;
}
});
Where is my problem?
When i make the canvas and images statically it works like a charm. but when i used for and get the data from api i can not show the canvases and canvases are hide (IDK Why)
Here is a picture when i use dynamically:
Really appreciate. Thanks in advance