Question by DaveCrowdStar · Apr 29, 2016 at 06:31 AM · canvas font scaling pixel single

How to do One Pixel Lines in the Canvas UI

I have a one pixel line between many elements in a scrollview. I use a sprite with a height of 1 and a stretched width.

I was using ScaleWithScreenSize using the iPhone6 as my Reference Resolution and that seemed to work fine. Then when I went to look on the iphone, many of the lines seemed to flicker when scrolling. I guess it has trouble knowing whether to draw the line or not?

How do I maintain the single pixel? I want it to always render this dividing line.

I then thought that I should change my Canvas to be ConstantPixelSize. I figured I would just manually scale things which required scaling, and that way preserve unscaled, single pixel elements. But then I realized that the font did not properly scale, and the font size cannot be a decimal. This means that even if I multiply the rect size to the correct size, the font size will remain large. If I scale the font size, i will always have an integer size.

As an example, I have a ipad pro and an iphone. I want the font to be the same size relative to the screen on both (say 5% of the screen height). I would like my dividing lines to be 1 pixel on both. How can I achieve this? Is it possible?

Add comment · Show 3

DaveCrowdStar · Apr 29, 2016 at 07:04 PM 0

Another possibility would be to scale the fonts differently. Even having them as floats would be nice. Then I could just scale everything proportionately. Ins$$anonymous$$d of setting the Header to be 48 and scaling the canvas, I could set it to anchor at like 5%. The only insurmountable problem with a constant pixel size is the font

mLevelRay · Sep 19, 2016 at 02:17 PM 0

I'm having this same issue. $$anonymous$$y very simple solution was to make them 3px. At 2px there was still a noticeable flicker,but at 3px your guaranteed 2px of line at any given time.

Nickjd331 · Oct 08, 2020 at 09:19 AM 0

I too would like to know the best solution for this. mLevelRay's solution sounds good but could result in mismatched line widths (2 or 3 pixels depending on position), so if there is an even better way I would love to know.

How to do One Pixel Lines in the Canvas UI

0 Replies

Your answer

Follow this Question

Related Questions