get coordinates of arrow of a line point
user1050619
Consider I have 2 points.
QPoint(100,100) QPoint(200,200)
Now, I need to draw a pointed arrow at the end of line QPoint(200,200).
How can I get the points of the arrow coordinates since the line is in inclined angle? The arrow should be like given below.
As this is more a general question, Im tagging on pyqt5 and css.
Mark
You need to calculate the slope of your line, which will let you find a point on the line a given distance from your endpoint. You can then build a a new line perpendicular to the original line that goes through the point. The ends of the arrows should lie on that line a given distance from the original. It's easier to show than explain:
function draw(point1, point2, distance, length) {
// slope is dx/dy
let dx = point2[0] - point1[0]
let dy = point2[1] - point1[1]
let v_norm = Math.sqrt(dx ** 2 + dy ** 2)
// point on line at distance
let point_on_line = [point2[0] - distance * dx / v_norm, point2[1] - distance * dy / v_norm]
// endpoints of arrows at length above point (the distance from the original line
let point_below = [point_on_line[0] - length * -dy / v_norm, point_on_line[1] - length * dx / v_norm, ]
let point_above = [point_on_line[0] + length * -dy / v_norm, point_on_line[1] + length * dx / v_norm, ]
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(...point1);
ctx.lineTo(...point2);
ctx.moveTo(...point_above)
ctx.lineTo(...point2)
ctx.lineTo(...point_below)
ctx.stroke();
}
draw([100, 100], [200, 150], 20, 10)
draw([100, 100], [300, 150], 20, 10)
draw([100, 100], [150, 10], 20, 10)
draw([100, 100], [90, 150], 20, 10)
draw([100, 100], [200, 100], 20, 10)
draw([100, 100], [5, 10], 20, 10)<canvas id="canvas" width='500' height='500'></canvas>You can alter the shape of the arrows using distance and length
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Android: How to get object attribute from List<Class> using Retrofit
- Next: Replace ' ' for '-' inside imploded query in Laravel
Related
Related Related
- 1
Finding coordinates of a point on a line
- 2
Get Coordinates around a point
- 3
Get the point coordinates of a CombinedGeometry
- 4
Get Coordinates around a point
- 5
Python - Get the coordinates of densest point
- 6
Animate a point alongside a line from known coordinates
- 7
Find coordinates to draw arrow head (isoscele triangle) at the end of a line
- 8
How to get the world coordinates of a point in a child actor?
- 9
how to get tap point (coordinates) in iOS swift
- 10
Get coordinates from a lambda function point
- 11
How to get the world coordinates of a point in a child actor?
- 12
Get coordinates of intersecting point of two trend lines
- 13
How to get point coordinates in same projection as raster
- 14
How to get arrow heads tip to start/end at specified coordinates in Python?
- 15
How to change the start and end point of Line using Arrow Keys in JavaFx?
- 16
python get arrow keys from command line
- 17
Get starting point and ending point of a line in EaselJS
- 18
Finding the coordinates on the image knowing the center point and slope of a line
- 19
Point picker event_handler drawing line and displaying coordinates in matplotlib
- 20
Get margin line locations (mgp) in user coordinates
- 21
Python - get surrounding area of line (coordinates)
- 22
OpenLayers 2 - How to get coordinates for selected feature (point)
- 23
How to get coordinates of point where drawing arc ended in canvas?
- 24
How to get coordinates about a point in Google Maps API iOS?
- 25
How to get coordinates about a point in Google Maps API iOS?
- 26
Getting the coordinates of the arrow in a Matplotlib annotation
- 27
How to draw arrow head with coordinates?
- 28
How do I get a curve point on a line?
- 29
Arrow pointing to a point on a curve
Comments