我制作了一个小型演示来举例说明我遇到的问题。关于其使用的演练:
1 - 单击屏幕四次以创建网格。
2 - 单击底部的按钮,为创建的网格提供透视效果。
3 - 再次点击屏幕画一个圆圈。
我的问题是我不知道应该在Circle节点上应用什么转换,以便在用户点击的确切位置具有与网格相同的视觉效果。
此时的演示只绘制一个没有变换的圆圈。
所需的输出如下(我在这里使用Ellipse而不是Circle作弊 - 这不是我的解决方案,因为用户输入了网格的四个坐标):
这是演示代码。
Main.java
package application;
import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Scene;
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
try {
FXMLLoader loader = new FXMLLoader();
loader.setLocation(getClass().getResource("View.fxml"));
Scene scene = new Scene(loader.load(), 600, 600);
primaryStage.setScene(scene);
primaryStage.setTitle("Perspective Transformation");
primaryStage.show();
} catch (IOException e) {
e.printStackTrace();
}
}
}
View.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>
<VBox fx:id="vBox" maxHeight="600.0" maxWidth="600.0" minHeight="600.0" minWidth="600.0" prefHeight="600.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.Controller">
<children>
<AnchorPane fx:id="anchorPane" maxHeight="575.0" minHeight="575.0" prefHeight="575.0" prefWidth="600.0" />
<Button fx:id="button" alignment="CENTER" mnemonicParsing="false" prefHeight="25.0" prefWidth="600.0" text="Perspective Transformation" />
</children>
</VBox>
Controller.java
package application;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.effect.PerspectiveTransform;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
public class Controller {
@FXML
VBox vBox;
@FXML
AnchorPane anchorPane;
@FXML
Button button;
Line line_1, line_2, line_3, line_4, middle_1, middle_2;
private int numberOfClicks = 0;
private int W = 10;
//Store coordinates of the corresponding clicks
private double cx1, cy1,
cx2, cy2,
cx3, cy3,
cx4, cy4,
cx5, cy5;
@FXML
private void initialize() {
button.setDisable(true);
button.setOnAction((event) -> {
//Create a standard grid
Line standard_1 = new Line(0, 0, 0, 600);
Line standard_2 = new Line(0, 600, 600, 600);
Line standard_3 = new Line(600, 600, 600, 0);
Line standard_4 = new Line(600, 0, 0, 0);
//Middle ones
Line standard_5 = new Line(300, 0, 300, 600);
Line standard_6 = new Line(0, 300, 600, 300);
standard_1.setStrokeWidth(W);
standard_2.setStrokeWidth(W);
standard_3.setStrokeWidth(W);
standard_4.setStrokeWidth(W);
standard_5.setStrokeWidth(W);
standard_6.setStrokeWidth(W);
anchorPane.getChildren().clear();
Pane perspectivePane = new Pane();
perspectivePane.getChildren().addAll(standard_1, standard_2, standard_3,
standard_4, standard_5, standard_6);
PerspectiveTransform pt = new PerspectiveTransform();
pt.setUlx(cx1);
pt.setUly(cy1);
pt.setUrx(cx2);
pt.setUry(cy2);
pt.setLrx(cx3);
pt.setLry(cy3);
pt.setLlx(cx4);
pt.setLly(cy4);
perspectivePane.setEffect(pt);
anchorPane.getChildren().add(perspectivePane);
});
anchorPane.addEventHandler(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) {
numberOfClicks++;
if(numberOfClicks == 1){
cx1 = event.getX();
cy1 = event.getY();
}
else if(numberOfClicks == 2){
cx2 = event.getX();
cy2 = event.getY();
line_1 = new Line(cx1, cy1, cx2, cy2);
line_1.setStrokeWidth(W);
anchorPane.getChildren().add(line_1);
}
else if(numberOfClicks == 3){
cx3 = event.getX();
cy3 = event.getY();
line_2 = new Line(cx2, cy2, cx3, cy3);
line_2.setStrokeWidth(W);
anchorPane.getChildren().add(line_2);
}
else if(numberOfClicks == 4){
cx4 = event.getX();
cy4 = event.getY();
line_3 = new Line(cx3, cy3, cx4, cy4);
line_4 = new Line(cx4, cy4, cx1, cy1);
line_3.setStrokeWidth(W);
line_4.setStrokeWidth(W);
middle_1 = new Line((cx1+cx2)/2, (cy1+cy2)/2, (cx3+cx4)/2, (cy3+cy4)/2);
middle_2 = new Line((cx2+cx3)/2, (cy2+cy3)/2, (cx4+cx1)/2, (cy4+cy1)/2);
middle_1.setStrokeWidth(W);
middle_2.setStrokeWidth(W);
anchorPane.getChildren().addAll(line_3, line_4, middle_1, middle_2);
button.setDisable(false);
}
else if(numberOfClicks == 5){
cx5 = event.getX();
cy5 = event.getY();
Circle circle = new Circle();
circle.setCenterX(cx5);
circle.setCenterY(cy5);
circle.setRadius(30);
circle.setFill(Color.TRANSPARENT);
circle.setStroke(Color.BLACK);
circle.setStrokeWidth(W);
//PerspectiveTransform pt = new PerspectiveTransform();
//What transformation should I apply to the circle?
//circle.setEffect(pt);
anchorPane.getChildren().add(circle);
}
else {
anchorPane.getChildren().clear();
numberOfClicks = 0;
}
}
});
}
}
答案 0 :(得分:2)
我不确定这是否是您想要的,但我用Group
来完成此任务。我按照here的代码进行了操作。测试此更新。如果有效,我会在明天尝试解释。
import java.net.URL;
import java.util.ArrayList;
import java.util.List;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.Group;
import javafx.scene.control.Button;
import javafx.scene.effect.PerspectiveTransform;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
/**
*
* @author blj0011
*/
public class FXMLDocumentController implements Initializable
{
@FXML
VBox vBox;
@FXML
AnchorPane anchorPane;
@FXML
Button button;
Group group = new Group();
Group group2 = new Group();
PerspectiveTransform pt = new PerspectiveTransform();
Line line_1, line_2, line_3, line_4, middle_1, middle_2;
private int numberOfClicks = 0;
private int W = 10;
//Store coordinates of the corresponding clicks
private double cx1, cy1,
cx2, cy2,
cx3, cy3,
cx4, cy4,
cx5, cy5;
@Override
public void initialize(URL location, ResourceBundle resources)
{
button.setDisable(true);
anchorPane.getChildren().addAll(group);
button.setOnAction((event) -> {
pt.setUlx(cx1);
pt.setUly(cy1);
pt.setUrx(cx2);
pt.setUry(cy2);
pt.setLrx(cx3);
pt.setLry(cy3);
pt.setLlx(cx4);
pt.setLly(cy4);
group.setEffect(pt);
});
anchorPane.addEventHandler(MouseEvent.MOUSE_CLICKED, (MouseEvent event) -> {
numberOfClicks++;
switch (numberOfClicks) {
case 1:
cx1 = event.getX();
cy1 = event.getY();
System.out.println(cx1 + " : " + cy1);
break;
case 2:
cx2 = event.getX();
cy2 = event.getY();
line_1 = new Line(cx1, cy1, cx2, cy2);
line_1.setStrokeWidth(W);
group.getChildren().add(line_1);
break;
case 3:
cx3 = event.getX();
cy3 = event.getY();
line_2 = new Line(cx2, cy2, cx3, cy3);
line_2.setStrokeWidth(W);
group.getChildren().add(line_2);
break;
case 4:
cx4 = event.getX();
cy4 = event.getY();
line_3 = new Line(cx3, cy3, cx4, cy4);
line_4 = new Line(cx4, cy4, cx1, cy1);
line_3.setStrokeWidth(W);
line_4.setStrokeWidth(W);
middle_1 = new Line((cx1 + cx2) / 2, (cy1 + cy2) / 2, (cx3 + cx4) / 2, (cy3 + cy4) / 2);
middle_2 = new Line((cx2 + cx3) / 2, (cy2 + cy3) / 2, (cx4 + cx1) / 2, (cy4 + cy1) / 2);
middle_1.setStrokeWidth(W);
middle_2.setStrokeWidth(W);
group.getChildren().addAll(line_3, line_4, middle_1, middle_2);
button.setDisable(false);
break;
case 5:
List<Double> centerOfTransform = findCenterOfTransForm(pt);
cx5 = event.getX();
cy5 = event.getY();
List<Double> list = new ArrayList();
list.add(cx5);
list.add(cy5);
List<Double> changeInCenterXAndCenterY = findChangeInCenterXAndY(centerOfTransform, list);
PerspectiveTransform ptCircle = new PerspectiveTransform();
ptCircle.setUlx(cx1 + changeInCenterXAndCenterY.get(0));
ptCircle.setUly(cy1 + changeInCenterXAndCenterY.get(1));
ptCircle.setUrx(cx2 + changeInCenterXAndCenterY.get(0));
ptCircle.setUry(cy2 + changeInCenterXAndCenterY.get(1));
ptCircle.setLrx(cx3 + changeInCenterXAndCenterY.get(0));
ptCircle.setLry(cy3 + changeInCenterXAndCenterY.get(1));
ptCircle.setLlx(cx4 + changeInCenterXAndCenterY.get(0));
ptCircle.setLly(cy4 + changeInCenterXAndCenterY.get(1));
System.out.println("cx5: " + cx5 + " cy5: " + cy5);
Circle circle = new Circle();
circle.setRadius(30);
circle.setFill(Color.TRANSPARENT);
circle.setStroke(Color.BLACK);
circle.setStrokeWidth(W);
circle.setCenterX(cx5);
circle.setCenterY(cy5);
circle.setEffect(ptCircle);
anchorPane.getChildren().add(circle);
System.out.println("centerx: " + circle.getTranslateX()+ " centery: " + circle.getTranslateY());
break;
default:
group.getChildren().clear();
numberOfClicks = 0;
break;
}
});
}
List<Double> findCenterOfTransForm(PerspectiveTransform pt)
{
List<Double> tempList = new ArrayList();
tempList.add((pt.getUlx() + pt.getUrx() + pt.getLrx() + pt.getLlx()) / 4);
tempList.add((pt.getUly() + pt.getUry() + pt.getLry() + pt.getLly()) / 4);
return tempList;
}
List<Double> findChangeInCenterXAndY(List<Double> originalXAndY, List<Double> newXAndY)
{
List<Double> tempList = new ArrayList();
tempList.add(newXAndY.get(0) - originalXAndY.get(0));
tempList.add(newXAndY.get(1) - originalXAndY.get(1));
return tempList;
}
}