問題描述

我正在嘗試創(chuàng)建一個(gè)函數(shù)，該函數(shù)將返回我想在行尾繪制的箭頭(等腰三角形)的 3 點(diǎn)坐標(biāo).

I am trying to create a function that will return the 3 points coordinates of arrow head (isoscele triangle) that I want to draw at the end of a line.

挑戰(zhàn)在于線的方向(角度)可以在象限中的 0 到 360 度之間變化.

The challenge is in the orientation (angle) of the line that can vary between 0 and 360 degree in the quadrant.

我有以下價(jià)值觀:

//start coordinates of the line
var x0 = 100;
var y0 = 100;

//end coordinates of the line
var x1 = 200;
var y1 = 200;

//height of the triangle
var h = 10;
//width of the base of the triangle
var w = 30 ;

到目前為止，這是我的函數(shù)，它返回三角形底邊的兩點(diǎn)坐標(biāo):

This is my function until now that returns the two point coordinates of the base of the triangle:

var drawHead = function(x0, y0, x1, y1, h, w){
    var L = Math.sqrt(Math.pow((x0 - x1),2)+Math.pow((y0 - y1),2));

    //first base point coordinates
    var base_x0 = x1 + (w/2) * (y1 - y0) / L;
    var base_y0 = y1 + (w/2) * (x0 - x1) / L;

    //second base point coordinates
    var base_x1 = x1 - (w/2) * (y1 - y0) / L;
    var base_y1 = y1 - (w/2) * (x0 - x1) / L;

    //now I have to find the last point coordinates ie the top of the arrow head
}

如何根據(jù)線的角度確定三角形頂部的坐標(biāo)?

How can I determine the coordinates of the top of the triangle considering the angle of the line?

推薦答案

箭頭的頭部與箭頭的主體在同一條線上.因此，(x1, y1) 和 (head_x, head_y) 之間的線段的斜率將與 (x0, y0) 和 (x1, y1) 之間的線段的斜率相同.假設(shè) dx = head_x - x1 和 dy = head_y - y1 和斜率 = (y1 - y0)/(x1 - x0).因此，dy/dx = 斜率.我們也知道 dx^2 + dy^2 = h^2.我們可以根據(jù)斜率和 h 求解 dx.那么，dy = dx * 斜率.一旦你有了 dx 和 dy，你就可以將它們添加到 x1 和 y1 來獲得頭點(diǎn).一些偽代碼:

The head of the arrow will lie along the same line as the body of the arrow. Therefore, the slope of the line segment between (x1, y1) and (head_x, head_y) will be the same as the slope of the line segment between(x0, y0) and (x1, y1). Let's say that dx = head_x - x1 and dy = head_y - y1 and slope = (y1 - y0) / (x1 - x0). Therefore, dy / dx = slope. We also know that dx^2 + dy^2 = h^2. We can solve for dx in terms of slope and h. Then, dy = dx * slope. Once you have dx and dy, you can just add those to x1 and y1 to get the head point. Some pseudocode:

if x1 == x0: #avoid division by 0
    dx = 0
    dy = h
    if y1 < y0:
        dy = -h #make sure arrow head points the right way
    else:
        dy = h
else:
    if x1 < x0: #make sure arrow head points the right way
        h = -h
    slope = (y1 - y0) / (x1 - x0)
    dx = h / sqrt(1 + slope^2)
    dy = dx * slope
head_x = x1 + dx
head_y = y1 + dy

這篇關(guān)于查找坐標(biāo)以在線的末端繪制箭頭(等腰三角形)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！