line thickness issue in Tableview

Solar2D Advanced Graphics
#1

The Flash(now Animate) supports a hairline. It is a very thin line.

But Corona doesn’t support it yet. So lines are not pretty. (see included picture)

I painted the same thickness line, but each is seen in different thickness.

How can I get pretty lines?

#2

Hi,

Refer the below link:

https://github.com/coronalabs/framework-widget

or

You can use a scroll view & design custom design for the row.

Probably I prefer this method in order to customise the design & to represent it as the table.

You can lock the scroll horizontally.

-Assif

#3

Thank you. But my point is not design.

When I scroll through the table view, I want the horizontal lines to look the same thickness.

I guess. This is because Corona moves in 0.x units.

Is there a way to solve it?

p.s. It would be better if Corona supports anti-aliasing …

#4

There are a couple of thoughts I’d like to share,

First, you can’t draw a line thinner than one content unit or point To give the illusion of thinner line, you use a lighter color.

Secondly, because screens come in different sizes, it’s almost impossible to have a Corona content area that is pixel perfect. Depending on where the line is drawn you might get a different pixel width because pixels ~= points.

Rob

#5

Thank you, Rob.

How could native ui resolve it?

They shows correct size.

Do you have a config.lua solution for resolving it?

#6

There really isn’t a solution for this or we would have fixed it. Use lighter color lines so the visual isn’t as visible.

Rob

#7

source of the problem:  lines will be rendered with weights in content units, then scaled to device units as needed, and potentially displayed at non-integral device coordinates.  so you can wind up with a 0.75 device pixel line width, displayed at y=10.3, both of which will cause aliasing and a potential misrepresentation of the apparent line width.

there are a couple things you can do to improve (but not entirely correct) the results

  1. render your own dividers, instead of letting tableview do it (use noLines option), but create them as rects instead of lines (because rect dimensions are easier to control than line widths)

  2. decide if you’d rather size your rect (aka adjust its “stroke width”) based on content units or device units.  fe:

    – line is two content units tall: lineThickness = 2 – OR – line is two device units tall: lineThickness = 2 * display.contentScaleY – then… rect = display.newRect(row.width/2, row.height-lineThickness/2, row.width, lineThickness)

you’ll still get antialising at non-integral scroll positions, can’t help that, but if you size the thickness correctly with rects, it should be less noticeable than line stroke weights.

#8

Thank you. I will use lighter color lines. (-:

#9

이미지로 그리는게 (newImageRect) 낫더라고요. 

제가 사용한 라인이미지 첨부했어요.

#10

Please post in English.

#11

Hi,

Refer the below link:

https://github.com/coronalabs/framework-widget

or

You can use a scroll view & design custom design for the row.

Probably I prefer this method in order to customise the design & to represent it as the table.

You can lock the scroll horizontally.

-Assif

#12

Thank you. But my point is not design.

When I scroll through the table view, I want the horizontal lines to look the same thickness.

I guess. This is because Corona moves in 0.x units.

Is there a way to solve it?

p.s. It would be better if Corona supports anti-aliasing …

#13

There are a couple of thoughts I’d like to share,

First, you can’t draw a line thinner than one content unit or point To give the illusion of thinner line, you use a lighter color.

Secondly, because screens come in different sizes, it’s almost impossible to have a Corona content area that is pixel perfect. Depending on where the line is drawn you might get a different pixel width because pixels ~= points.

Rob

#14

Thank you, Rob.

How could native ui resolve it?

They shows correct size.

Do you have a config.lua solution for resolving it?

#15

There really isn’t a solution for this or we would have fixed it. Use lighter color lines so the visual isn’t as visible.

Rob

#16

source of the problem:  lines will be rendered with weights in content units, then scaled to device units as needed, and potentially displayed at non-integral device coordinates.  so you can wind up with a 0.75 device pixel line width, displayed at y=10.3, both of which will cause aliasing and a potential misrepresentation of the apparent line width.

there are a couple things you can do to improve (but not entirely correct) the results

  1. render your own dividers, instead of letting tableview do it (use noLines option), but create them as rects instead of lines (because rect dimensions are easier to control than line widths)

  2. decide if you’d rather size your rect (aka adjust its “stroke width”) based on content units or device units.  fe:

    – line is two content units tall: lineThickness = 2 – OR – line is two device units tall: lineThickness = 2 * display.contentScaleY – then… rect = display.newRect(row.width/2, row.height-lineThickness/2, row.width, lineThickness)

you’ll still get antialising at non-integral scroll positions, can’t help that, but if you size the thickness correctly with rects, it should be less noticeable than line stroke weights.

#17

Thank you. I will use lighter color lines. (-:

#18

이미지로 그리는게 (newImageRect) 낫더라고요. 

제가 사용한 라인이미지 첨부했어요.

#19

Please post in English.