forked from protonphoton/LJ
[fix] www: rework the simulator page
This commit is contained in:
parent
371003fce2
commit
5e26faa798
@ -517,70 +517,39 @@
|
|||||||
var zoom = 0.5;
|
var zoom = 0.5;
|
||||||
//ctx.save
|
//ctx.save
|
||||||
|
|
||||||
|
// Draws every segment received, except black colored target ones
|
||||||
// Todo : laser point will have black points to go from a polyline to another. Need to discard those black points.
|
|
||||||
function draw() {
|
function draw() {
|
||||||
|
|
||||||
|
|
||||||
// Clear Canvas At The Start Of Every Frame
|
|
||||||
//ctx.restore
|
|
||||||
|
|
||||||
if (pl2.length > 0)
|
if (pl2.length > 0)
|
||||||
{
|
{
|
||||||
|
|
||||||
// Begin a new path
|
|
||||||
// 0.7 reduces max coordinates in a more browser compatible resolution.
|
|
||||||
ctx.clearRect(0,0,400,400);
|
ctx.clearRect(0,0,400,400);
|
||||||
ctx.beginPath();
|
lastpoint = {
|
||||||
|
x:pl2[0],
|
||||||
ctx.moveTo(pl2[0]*zoom, pl2[1]*zoom);
|
y:pl2[1],
|
||||||
lastpoint.color = pl2[2];
|
color:pl2[2]
|
||||||
|
}
|
||||||
// Draw n Lines
|
for (var i = 0; i <= pl2.length; i+=3)
|
||||||
for (var i = 0; i < pl2.length/3; i++)
|
{
|
||||||
{
|
point = {
|
||||||
|
x:pl2[i],
|
||||||
// New point has the same color -> add a new line to the new point
|
y:pl2[i+1],
|
||||||
if (pl2[2+(i*3)] === lastpoint.color)
|
color:pl2[i+2]
|
||||||
{
|
|
||||||
ctx.lineTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
|
|
||||||
}
|
|
||||||
|
|
||||||
// New point has different color -> stroke with previous color
|
|
||||||
if (pl2[2+(i*3)] != lastpoint.color)
|
|
||||||
{
|
|
||||||
ctx.strokeStyle = "#"+(lastpoint.color + Math.pow(16, 6)).toString(16).slice(-6);
|
|
||||||
ctx.stroke();
|
|
||||||
ctx.closePath()
|
|
||||||
//ctx.restore
|
|
||||||
ctx.beginPath();
|
|
||||||
//ctx.clearRect(0,0,400,400);
|
|
||||||
|
|
||||||
ctx.moveTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Last point -> stroke with current color
|
|
||||||
if (i === (pl2.length/3)-1 )
|
|
||||||
{
|
|
||||||
ctx.moveTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
|
|
||||||
ctx.strokeStyle = "#"+((pl2[2+(i*3)]) + Math.pow(16, 6)).toString(16).slice(-6);
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
ctx.closePath()
|
|
||||||
//ctx.restore
|
|
||||||
//ctx.clearRect(0,0,400,400);
|
|
||||||
}
|
|
||||||
|
|
||||||
// store point for comparison
|
|
||||||
lastpoint.x = pl2[i*3];
|
|
||||||
lastpoint.y = pl2[1+(i*3)];
|
|
||||||
lastpoint.color = pl2[2+(i*3)];
|
|
||||||
}
|
}
|
||||||
|
// console.log(lastpoint,point)
|
||||||
|
// if the target is black, skip drawing
|
||||||
|
if( point.color != 0){
|
||||||
|
ctx.beginPath()
|
||||||
|
ctx.strokeStyle = "#"+(point.color + Math.pow(16, 6)).toString(16).slice(-6);
|
||||||
|
ctx.moveTo(lastpoint.x * zoom, lastpoint.y * zoom);
|
||||||
|
ctx.lineTo(point.x * zoom, point.y * zoom);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.closePath()
|
||||||
|
}
|
||||||
|
lastpoint = point
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// Call Draw Function Again To Create Animation
|
// Call Draw Function Again To Create Animation
|
||||||
window.requestAnimationFrame(draw);
|
window.requestAnimationFrame(draw);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize The Draw Function
|
// Initialize The Draw Function
|
||||||
draw();
|
draw();
|
||||||
|
Loading…
Reference in New Issue
Block a user