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