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

Question

我正在编写一个JavaFX应用程序，它需要绘制有向图。我想通过形状来实现这一点，因为我希望可以拖动顶点。我用一个圆来表示一个顶点，但是当我试图找到一个形状来表示有向边时，我遇到了一个问题。< br >有向边应该看起来像一个箭头，我的想法是用一条线和一个三角形来表示它。所以我扩展了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);
        }));
    }
}

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

Answer 1

如果您要将ChangeListeners添加到endX和endY Property并在change方法中重新定位三角形，那么您可以使用Line移动三角形。

Answer 2

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

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));
}

}