line and touch

luantiang · November 22, 2018, 6:28am

Hello all,

Can “touch” function work on “line” display object (aka “display.newLine()” )? Please see the stripped down code (for troubleshooting) below. I am not sure if I have missed out anything, but there is no “print” on the Corona Simulator’s console, no matter, how much I tried “to touch” on the "line.

-- text display object local text = display.newText( "text", 20, 20 ) -- table touch listener function -- stripped down for troubleshooting local function touch( self, event ) print( event.phase, event.target.id, self.id ) text.text = tostring( event.phase ) .. " | " .. tostring( self.id ) if event.phase == "began" then print( event.phase, event.target.id, self.id ) elseif event.phase == "moved" then print( event.phase, event.target.id, self.id ) elseif event.phase == "ended" then print( event.phase, event.target.id, self.id ) end return true end -- create new line display object and attach listener local line = display.newLine( 50, 50, 300, 300 ) line.strokeWidth = 50 line.touch = touch line.id = "line03" line:addEventListener( "touch" )

Any suggestion or alternative solution? I need the ability to touch the line, in order to show additional information on the line itself.

Please help to advise. Thanks.

Regards, Luan

nick_sherman · November 22, 2018, 7:33am

You forgot to add the function that will be called.

line:addEventListener(“touch”,touch)

XeduR · November 22, 2018, 9:22am

For the touch event listener, you’d need to write it as “line:addEventListener(“touch”,line)”. You already tell what function should run in the case of touch with “line.touch = touch”.

Secondly, the main reason as to why this won’t work is because you are working with display.newLine. You can’t realistically touch a line and I think that Corona ignores touch events on lines, even if you add stroke width of 50 to them. If you change that display.newLine to display.newRect, you’ll manage to touch it (including the stroke area).

ldurniat · November 22, 2018, 9:49pm

Hi @luantiang,

From documentation

Currently, display.newLine() objects do not support touch/tap events.

Seedisplay.newLine() for more information.

Use rectangle instead as @XeduR @Spyric suggest.

Have a nice day:)

ldurniat

luantiang · November 23, 2018, 12:09am

Hello all,

Many thanks for your prompt response. For all the documentation I have gone through on this, I had certainly missed the most important one, as highlighted by ldurniat.

https://docs.coronalabs.com/api/library/display/newLine.html

However, a display.newRect() cannot replace display.newLine() in what I am trying to do. Please see below attached diagram. This is dynamically generated from a a subset (depending on query) of a database. The nodes show the entities and the links (represented by lines connected to two nodes) show the relation between the entities.

I wanted to “touch” on a link (or line) to show the relation and other actions (that can be performed) on the relation. I do not want to show all the relations, as they are likely to clutter the entire screen, when there are a high number of nodes (represented by circle). A node, however, can have more than one links with more than one other node, in a more complex relationship. Further, I wanted to “touch” a node to move it, to show other data on the entity, and other actions (that can be performed) on the entity.

Since display.newLine() display object currently does NOT support touch/tap events, I suppose I would have to explore other workaround.

In any case, many thanks for your help and suggestions.

Regards, Luan

XeduR · November 23, 2018, 8:31am

So pointing all of the issues and fixes wasn’t a good enough answer

Now, you are wrong about not being able to use rectangles since lines with a width equal to or larger than 1 pixel are really just rectangles.

You can turn lines into rectangles in Corona by simply:

Calculating the distance between a line’s point A and point B. It’s as simple as distanceX = x1 - x2 and distanceY = y1 - y2. Then you use Pythagoras theorem. The width of the rectangle is the same as the distance.
The height of the rectangle is the same as the stroke width you apply to your line.
The x and y coordinates of the rectangle are the average of x1+x2 and y1+y2.
The rotation of the rectangle is the angle between a line’s point A and point B. Use https://docs.coronalabs.com/api/library/math/atan2.html to solve it.

That’s it.

Now, based on your image, any user would have difficulty touching lines as thin as those if they didn’t have a mouse. To mitigate this, you could create (additional) invisible rects that are larger than the lines to act as touch sensors for the lines, so that users can touch them with ease.

luantiang · November 23, 2018, 11:09pm

Hello XeduR,

Noted. This could be one of the possible workarounds.

Thank you again.

Regards, Luan

nick_sherman · November 22, 2018, 7:33am

You forgot to add the function that will be called.

line:addEventListener(“touch”,touch)

XeduR · November 22, 2018, 9:22am

For the touch event listener, you’d need to write it as “line:addEventListener(“touch”,line)”. You already tell what function should run in the case of touch with “line.touch = touch”.

Secondly, the main reason as to why this won’t work is because you are working with display.newLine. You can’t realistically touch a line and I think that Corona ignores touch events on lines, even if you add stroke width of 50 to them. If you change that display.newLine to display.newRect, you’ll manage to touch it (including the stroke area).

ldurniat · November 22, 2018, 9:49pm

Hi @luantiang,

From documentation

Currently, display.newLine() objects do not support touch/tap events.

Seedisplay.newLine() for more information.

Use rectangle instead as @XeduR @Spyric suggest.

Have a nice day:)

ldurniat

luantiang · November 23, 2018, 12:09am

Hello all,

Many thanks for your prompt response. For all the documentation I have gone through on this, I had certainly missed the most important one, as highlighted by ldurniat.

https://docs.coronalabs.com/api/library/display/newLine.html

However, a display.newRect() cannot replace display.newLine() in what I am trying to do. Please see below attached diagram. This is dynamically generated from a a subset (depending on query) of a database. The nodes show the entities and the links (represented by lines connected to two nodes) show the relation between the entities.

I wanted to “touch” on a link (or line) to show the relation and other actions (that can be performed) on the relation. I do not want to show all the relations, as they are likely to clutter the entire screen, when there are a high number of nodes (represented by circle). A node, however, can have more than one links with more than one other node, in a more complex relationship. Further, I wanted to “touch” a node to move it, to show other data on the entity, and other actions (that can be performed) on the entity.

Since display.newLine() display object currently does NOT support touch/tap events, I suppose I would have to explore other workaround.

In any case, many thanks for your help and suggestions.

Regards, Luan

XeduR · November 23, 2018, 8:31am

So pointing all of the issues and fixes wasn’t a good enough answer

Now, you are wrong about not being able to use rectangles since lines with a width equal to or larger than 1 pixel are really just rectangles.

You can turn lines into rectangles in Corona by simply:

Calculating the distance between a line’s point A and point B. It’s as simple as distanceX = x1 - x2 and distanceY = y1 - y2. Then you use Pythagoras theorem. The width of the rectangle is the same as the distance.
The height of the rectangle is the same as the stroke width you apply to your line.
The x and y coordinates of the rectangle are the average of x1+x2 and y1+y2.
The rotation of the rectangle is the angle between a line’s point A and point B. Use https://docs.coronalabs.com/api/library/math/atan2.html to solve it.

That’s it.

Now, based on your image, any user would have difficulty touching lines as thin as those if they didn’t have a mouse. To mitigate this, you could create (additional) invisible rects that are larger than the lines to act as touch sensors for the lines, so that users can touch them with ease.

luantiang · November 23, 2018, 11:09pm

Hello XeduR,

Noted. This could be one of the possible workarounds.

Thank you again.

Regards, Luan