java - 如何在JavaFX中实现箭头形状？

Question

我正在编写一个需要绘制有向图的 JavaFX 应用程序。我想通过形状来实现这一点，因为我希望可以拖动顶点。我使用圆形来表示顶点，但是当我尝试找到一个形状来表示有向边时遇到问题。
有向边应该看起来像一个箭头，我的想法是用一条线和一个三角形来表示它。所以我扩展了 javafx.scene.shape.Line 类:

class Arrow extends Line {
    Polygon triangle;

    Arrow(double startX, double startY, double endX, double endY) {
        super(startX, startY, endX, endY);
        double dx = endX - startX;
        double dy = endY - startY;
        double angle = Math.atan2(dy, dx);
        triangle = new Polygon(endX, endY, endX - 8, endY + 4, endX - 8, endY - 4);
        triangle.setRotate(Math.toDegrees(angle));
        triangle.rotateProperty().bind()
            triangle.rotateProperty().bind(Bindings.createDoubleBinding(() -> { 
            double x = this.getEndX() - this.getStartX();
            double y = this.getEndY() - this.getStartY();
            double a = Math.atan2(y, x);
            return Math.toDegrees(a);
        }));
    }
}

由于顶点可以拖动，当然边缘也应该同时移动，这意味着箭头内的三角形应该根据线条的属性移动和旋转。但我还没有找到一种方法将多边形的位置属性与线的 endXProperty 和 endYProperty 绑定(bind)。
所以我想问一下如何实现这个目标？或者有没有更好的方法来通过形状实现可移动箭头(有向边缘)？

Answer 1

我正在寻找一个像你的箭头一样的箭头，它在数学上是正确的，但需要一些编程内容，我创建了 dx 和 dy 作为属性，并为它们添加了一个监听器，并为三角形创建了一个“旋转”。它工作完美，但你可以绑定(bind)其他属性，如填充、颜色等。

import javafx.beans.binding.DoubleBinding;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Line;
import javafx.scene.shape.Polygon;
import javafx.scene.transform.Rotate;

public class Arrow extends Line {

private Polygon triangle;
private Pane Parent;


public Arrow(Pane Parent) {
    this.Parent = Parent;
    Parent.getChildren().addAll(this);
    canvas();
}

private DoubleBinding dx;
private DoubleBinding dy;

private void canvas(){
    dx = endXProperty().add(startXProperty().negate());
    dy = endYProperty().add(startYProperty().negate());
    triangle = new Polygon(getEndX(), getEndY(), getEndX() - 16, getEndY() + 8, getEndX() - 16, getEndY() - 8);
    var rotate = new Rotate(0,0,0,1,Rotate.Z_AXIS);
    triangle.getTransforms().add(rotate);
    dx.addListener((observable, oldValue, newValue) -> {
        rotate.setAngle(getAngle(dy.doubleValue(), newValue.doubleValue()));
    });
    dy.addListener((observable, oldValue, newValue) -> {
        rotate.setAngle(getAngle(newValue.doubleValue(), dx.doubleValue()));
    });
    triangle.layoutXProperty().bind(endXProperty());
    triangle.layoutYProperty().bind(endYProperty());
    Parent.getChildren().add(triangle);
}

private double getAngle(double dy ,double dx){
    return Math.toDegrees(Math.atan2(dy, dx));
}

}