Рисование стрелки в конечной точке линии с использованием наклона линии

Question

Я занимаюсь разработкой приложения для белой доски, которое позволяет пользователю рисовать линию с помощью стрелки (некоторые, например, Microsoft Word с функцией стрелки).Я использую графическое свойство вместе с методом lineTo (), чтобы нарисовать линию.Теперь я должен нарисовать угловую стрелку в последней точке линии.Я рисую стрелку, соединяя точки вокруг последних точек.Поскольку линия 360 может проходить через эту точку и каждая линия может иметь различный угол наклона стрелки.Пожалуйста, предложите мне способ расчета этой точки вокруг последней точки.

Answer 1

Я сам что-то делал, и мне нужно, чтобы это выглядело немного лучше, чем просто треугольник, и использовал относительно недорогие вычисления (как можно меньше вызовов других функций, таких как математическая тригонометрия). Вот оно:

public static function DrawArrow(ax:int, ay:int, bx:int, by:int):void
{
    // a is beginning, b is the arrow tip.

    var abx:int, aby:int, ab:int, cx:Number, cy:Number, dx:Number, dy:Number, ex:Number, ey:Number, fx:Number, fy:Number;
    var size:Number = 8, ratio:Number = 2, fullness1:Number = 2, fullness2:Number = 3;  // these can be adjusted as needed

    abx = bx - ax;
    aby = by - ay;
    ab = Math.sqrt(abx * abx + aby * aby);

    cx = bx - size * abx / ab;
    cy = by - size * aby / ab;
    dx = cx + (by - cy) / ratio;
    dy = cy + (cx - bx) / ratio;
    ex = cx - (by - cy) / ratio;
    ey = cy - (cx - bx) / ratio;
    fx = (fullness1 * cx + bx) / fullness2;
    fy = (fullness1 * cy + by) / fullness2;

    // draw lines and apply fill: a -> b -> d -> f -> e -> b
    // replace "sprite" with the name of your sprite
    sprite.graphics.clear();
    sprite.graphics.beginFill(0xffffff);
    sprite.graphics.lineStyle(1, 0xffffff);
    sprite.graphics.moveTo(ax, ay);
    sprite.graphics.lineTo(bx, by);
    sprite.graphics.lineTo(dx, dy);
    sprite.graphics.lineTo(fx, fy);
    sprite.graphics.lineTo(ex, ey);
    sprite.graphics.lineTo(bx, by);
    sprite.graphics.endFill();
}

Вы также можете добавить цвет и толщину линии в список аргументов и, возможно, сделать ее функцией-членом расширенного Sprite, и у вас будет довольно приятная, универсальная функция :) Вы также можете немного поиграть с числами получить разные формы и размеры (небольшие изменения полноты вызывают сумасшедшие изменения во внешнем виде, поэтому будьте осторожны :)). Только будьте осторожны, чтобы не установить соотношение или наполненность2 к нулю!

Answer 2

Если вы сохраните начальную и конечную точки линии, добавление наконечника стрелки должно быть относительно простым.Если вы вычтете координаты конечной точки из координат начальной точки, вы получите вектор направления стрелки (назовем его D).С помощью этого вектора вы можете определить любую точку на линии между двумя точками.

Итак, чтобы нарисовать наконечник стрелки, вам необходимо определить точку (P1) на отрезке, который имеет определенное расстояние (d1) от конечной точки определите линию, которая проходит через нее и перпендикулярна D. И, наконец, получите точку (P2), которая имеет расстояние (d2) от ранее определенной точки.Затем вы можете определить точку, симметричную относительно P2 относительно D.

Таким образом, у вас будет стрелка длиной d1 и основание с 2 * d2.

Некоторые дополнительныеинформация и несколько примеров кода здесь: http://forums.devx.com/archive/index.php/t-74981.html