Tips for Free Hand Lines

Solar2D General Questions/Discussion
#1

Need some advice on how I can tighten up the quality of the free hand line drawing.

This is my current code: -

if event.phase == "began" or event.phase == "moved" then if oldx ==nil then oldx = event.x oldy = event.y DrawHistory[#DrawHistory+1] = display.newGroup() end local line = display.newLine( oldx, oldy, event.x, event.y ) line.strokeWidth = DrawWidth line:setStrokeColor( DrawColour[1],DrawColour[2],DrawColour[3]) DrawHistory[#DrawHistory]:insert(line) oldx = event.x oldy = event.y end

This works, but if the line width is quiet high the effect is not great: -

https://gyazo.com/859f73c96cf9cc9bb7c36d7ef43db1e1

Not sure how to tighten it up.  I have tried reducing the render rate by introducing a tick counter so that it does not render all the time.  This seems to be better.  

What I may try is using rectangles rather than a line?

Any advice would be greatly appreciated…

#2

I think using rects might be the way to go. 

You would need to use some trig to calculate the angle between the previous rect and current touch co-ordinates, rotate the new rect to that angle and then set the new rect’s position so that it fills the space between the previous rect and the touch.

Alternatively, you could use circles of a fixed size and each time the touch moves you fill the space between previous circle and the touch with as many circles as needed to fill the space.

#3

Yep, that was what I did in the end.  If the width was below 8 pixels I used a line, above I used a rectangle.  The other change was implementing a tick count of 3 on the move event.  This forces the render to be a bit more defined.

Not perfect, but good enough for the app I am building.

https://gyazo.com/1fc88c38af9280779e1a4db96bc422f2

#4

I think using rects might be the way to go. 

You would need to use some trig to calculate the angle between the previous rect and current touch co-ordinates, rotate the new rect to that angle and then set the new rect’s position so that it fills the space between the previous rect and the touch.

Alternatively, you could use circles of a fixed size and each time the touch moves you fill the space between previous circle and the touch with as many circles as needed to fill the space.

#5

Yep, that was what I did in the end.  If the width was below 8 pixels I used a line, above I used a rectangle.  The other change was implementing a tick count of 3 on the move event.  This forces the render to be a bit more defined.

Not perfect, but good enough for the app I am building.

https://gyazo.com/1fc88c38af9280779e1a4db96bc422f2