Draw line (sprite/graphic) perpendicular to another line


#1

Second Update:
I’m using another method which 50/50 works now; basically, I draw the line (sprite) manually by scaling it lengthwise with the correct angle until it overlaps with the selected line, with which it should stop but it doesn’t. I’ve tried adding a body to the selected line but the problem is that it is not accurate to the selected line’s shape which is causing the new line to stop scaling the moment it reaches the invisible parts of the sprite.

First Update:
I have tried to add a perpendicular line using .fromAngle() but it does not seem to be working - there are no errors, but the line is not drawn correctly.

Shown Display:


Expected Result:Capture

These are my codes:

Under create function:
line1 = new Phaser.Line(handle1.x, handle1.y, handle2.x, handle2.y);
line2 = new Phaser.Line(handle2.x, handle2.y, handle3.x, handle3.y);
line3 = new Phaser.Line(handle3.x, handle3.y, handle1.x, handle1.y);
perpendicular = new Phaser.Line(0, 0, 0, 0);
//Note: I also created graphics and enabled input on the lines - not shown here

When line1 graphic clicked:
perpendicular.fromAngle(handle3.x, handle3.y, line2.normalAngle, 100);
perpendicularGraphic = this.game.add.graphics(0,0);
perpendicularGraphic.lineStyle(3, 0x000000);
perpendicularGraphic.moveTo(perpendicular.start.x,perpendicular.start.y);
perpendicularGraphic.lineTo(perpendicular.end.x,perpendicular.end.y);
perpendicularGraphic.endFill();

Hello! I’m new on the forum but based on what I’ve :mag: there hasn’t been anything on what I’m looking for.
I’m creating an interactive where users get to pull any point of a triangle, and they will be allowed to click on one of the lines of the triangle which will draw a perpendicular line (90°) to the point opposite of the line.

PerpendicularLineInTriangle

I have tried using graphics and sprites but both of them do not work perfectly - graphics: allows me to find intersection point of the perpendicular line to the selected line so I can draw the right angle there but phaser graphics cannot be rotated as of what I know | sprites: I can rotate it to the correct angle but I cannot find the exact intersection point of it with the selected line, I can only check for overlapping between sprites

Right now I have been trying to draw the perpendicular line from the point to the selected line instead of the other way round since I do not know where on the selected line the perpendicular line will end. Please let me know if I missed out on something or if you have another method to approaching this! Thank you :sunny:


#2

Hi, this is interesting, but without sharing a bit of code I can’t get it


#3

No reason why this can’t be done with the Graphics API imho. This example is very close to doing what you describe: http://phaser.io/examples/v2/geometry/line-reflection all it would need are the points combined to form a triangle.


#4

!! :open_mouth: @rich Thank you, I have not seen that example before and after looking at it, it really does seem like it will help me get the line to form. I’ll try to work it out and update on how it goes.
@nazimboudeffa Thank you for the reminder, I will be sure to attach my codes in future posts!