HI Gio! I need so explain!
Well i create a scale-bar for wade canvas just put 2 divs in canvas
#line {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: white;
height: 100%;
background: repeating-linear-gradient(90deg, rgb(47, 201, 255), transparent 1px, transparent) 50% 0 border-box;
background: repeating-linear-gradient(90deg, rgb(0, 0, 0), transparent 4px, transparent) 50% 0 border-box;
background-size: 15px 15px;
z-index:-6;
background-repeat: repeat-x;
}
#vline {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top:0;
background: repeating-linear-gradient(180deg, rgb(47, 201, 255), transparent 1px, transparent) 50% 0 border-box;
background: repeating-linear-gradient(180deg, rgb(0, 0,0), transparent 4px, transparent) 50% 0 border-box;
background-size: 15px 15px;
z-index:-6;
background-repeat: repeat-y;
}
in
<div id="container" style="border:0; width:800px; height:600px;">
<div id="wade_main_div" width="800" height="600" tabindex="1">
<div id="line"></div>
<div id="vline"></div>
</div>
</div>
then
var vert_line = document.getElementById("line");
var left_line = document.getElementById("vline");
var cellSize = 15;
wade.setMainLoop(scaleBarUpdate);
var scaleBarUpdate = function(){
let np = wade.getCameraPosition();
vert_line.style.backgroundPosition = wade.getContainerWidth()/2 - np.x/np.z+'px 0';
left_line.style.backgroundPosition = '0px ' + (wade.getContainerHeight()/2 - np.y/np.z)+'px';
vert_line.style.backgroundSize = cellSize/np.z+"px "+ 100*cellSize+"px";
left_line.style.backgroundSize = 100*cellSize+"px "+ cellSize/np.z+"px";
};
this works fine until you change the camera z position
then more z, than more speed of canvas figures
that is, there is a desynchronization, the reasons for which I don't understand))
i try use many combinations of z (math.sqrt of sum of z multyple etc) , but desincronization is steel here
help Gio!