How make harmony with css?
krumza

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!

All 7 Comments
Gio

Hi krumza

I'm not sure what you're trying to achieve there - do you want to add divs that will move with the camera to match the position of a SceneObject?

I would recommend using wade.worldPositionToScreen to convert a position from the Wade world to screen coordinates. These screen cordinates will be easier to deal with when you're using CSS, and you won't have to deal with the camera position and manually transform coordinates.

Similarly, to calculate the size of your divs, you can use wade.worldDirectionToScreen.

Note that you have to pass a layerId to these functions, because different layers may have different scale and translate properties.

Let me know if you still have trouble with that and I can have a closer look at the code.

krumza

Hi Gio again. I wanted to do either a grid or a scale like a ruler

but I tried on another computer and everything works fine lol

why???

you can see it here if you want

what the hell? 

Gio

Hmmm it works for me too, I don't know why it wouldn't work on a different machine. Without knowing what is different about that machine I canno really tell you why. Is its browser set to some weird zoom level? I can't think of anything else that would break it.

krumza

there is installed windows, browser chrome, even the monitor resolution is identical.

The only thing is that the text sprites are made for corporate technical fonts

 

 

 

 

 

 

 

 

 

 

but how can they affect?

browser scale does not affect the grid, I checked

can the pixel size be different on the device? I can on the corporate computer to make a gif with this glitch only on Monday.

by the way, I can arrange this grid in the form of a separate script, in the settings to configure how it will look like either as stripes on the top and bottom, or a grid on the entire canvas,

I just do not know how to do this on the canvas, well, more accurately I know, but in my opinion it is harder

krumza

This happens cause version of chrome browser, on the trouble pc's is not latest, as example version 59 of chrome is create desynchronisation. Why? Different pixel size or what

Gio

I am still not sure why this happens or what you mean exactly by desynchronisation, but I seem to remember that there was a problem in old versions of Chrome with the background-position style property.

It's been a while, but if I remember correctly you could get around it by using background-position-x and background-position-y separately.

I am not sure that this is related to your problem, but it could be?

krumza

what how it look in action^

Post a reply
Add Attachment
Submit Reply
Login to Reply