使用JavaFX中的MouseEvent和MouseClicked选择并移动画布图像(Select and Move Canvas image with MouseEvent and MouseClicked in JavaFX)
我有一个使用GraphicsContext绘制图片的应用程序示例，其工作方式如下图所示。
而问题是选择和移动水平Canvas MouseEvent和MouseClicked只blue circle
public class JavaFXTest extends Application { @Override public void start(Stage primaryStage) { Group root = new Group(); Canvas canvas = new Canvas(300,100); GraphicsContext gc = canvas.getGraphicsContext2D(); Stop[] stops; LinearGradient gradient; // outer circle stops = new Stop[]{new Stop(0, Color.LIGHTSKYBLUE), new Stop(1, Color.BLUE)}; gradient = new LinearGradient(0.5, 0, 0.5, 1, true, CycleMethod.NO_CYCLE, stops); gc.setFill(gradient); gc.fillOval(10, 14, 40, 40); gc.fill(); gc.stroke(); // Inner circle stops = new Stop[]{new Stop(0, Color.BLUE), new Stop(1, Color.LIGHTSKYBLUE)}; gradient = new LinearGradient(0, 0, 1, 1, true, CycleMethod.NO_CYCLE, stops); gc.setFill(gradient); gc.fillOval(13, 17, 34, 34); gc.fill(); gc.stroke(); root.getChildren().add(canvas); Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }结果就是：
可以通过canvas.setOnMouseClicked在canvas选择blue circle并使用canvas.setOnMouseClicked 水平移动，而不知道blue circle的位置 ？ -
canvas.setOnMouseMoved((MouseEvent e) -> { }); canvas.setOnMouseClicked((MouseEvent e) -> { });I have this example of an application that draws pictures with GraphicsContext and works as shown in the pictures below.
And the question is to select and move only the blue circle horizontally with Canvas MouseEvent and MouseClicked
public class JavaFXTest extends Application { @Override public void start(Stage primaryStage) { Group root = new Group(); Canvas canvas = new Canvas(300,100); GraphicsContext gc = canvas.getGraphicsContext2D(); Stop[] stops; LinearGradient gradient; // outer circle stops = new Stop[]{new Stop(0, Color.LIGHTSKYBLUE), new Stop(1, Color.BLUE)}; gradient = new LinearGradient(0.5, 0, 0.5, 1, true, CycleMethod.NO_CYCLE, stops); gc.setFill(gradient); gc.fillOval(10, 14, 40, 40); gc.fill(); gc.stroke(); // Inner circle stops = new Stop[]{new Stop(0, Color.BLUE), new Stop(1, Color.LIGHTSKYBLUE)}; gradient = new LinearGradient(0, 0, 1, 1, true, CycleMethod.NO_CYCLE, stops); gc.setFill(gradient); gc.fillOval(13, 17, 34, 34); gc.fill(); gc.stroke(); root.getChildren().add(canvas); Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }And that's the result:
It is possible to select the blue circle in canvas with canvas.setOnMouseClicked and move in horizontal with canvas.setOnMouseMoved, without know the position of blue circle? –
canvas.setOnMouseMoved((MouseEvent e) -> { }); canvas.setOnMouseClicked((MouseEvent e) -> { });最满意答案
我修改了你的代码，允许你，
在MouseClicked上选择/取消选择该圆圈MouseMove上的圆的水平运动
public class JavaFXTest extends Application { double mouse_x = 0.0; double mouse_y = 0.0; double circle_x = 10; double circle_y = 14; double height = 40; double width = 40; boolean circle_selected = false; @Override public void start(Stage primaryStage) { Group root = new Group(); Canvas canvas = new Canvas(300,100); this.createCircle(canvas); canvas.setOnMouseClicked(e-> this.select(e)); canvas.setOnMouseMoved(e -> { if(this.circle_selected) this.move(e, canvas); }); root.getChildren().add(canvas); Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.show(); } //checks whether the mouse location is within the circle or not private void select(MouseEvent e) { double temp_mouse_x = e.getSceneX(); double temp_mouse_y = e.getSceneY(); double x_max = this.circle_x + this.width; double y_max = this.circle_y + this.height; boolean selected = temp_mouse_x >= this.circle_x && temp_mouse_x <= x_max // x-area && temp_mouse_y >= this.circle_y && temp_mouse_y <= y_max; //y-area if(circle_selected && selected) { //deselect the circle if already selected circle_selected = false; }else { circle_selected = selected; } this.mouse_x = temp_mouse_x; this.mouse_y = temp_mouse_y; } //move circle public void move(MouseEvent e, Canvas canvas) { double change_x = e.getSceneX() - this.mouse_x; this.circle_x += change_x; canvas.getGraphicsContext2D().clearRect(0, 0, canvas.getWidth(), canvas.getHeight()); this.createCircle(canvas); this.mouse_x = e.getSceneX(); this.mouse_y = e.getSceneY(); } public void createCircle(Canvas canvas) { GraphicsContext gc = canvas.getGraphicsContext2D(); //outer circle Stop[] stops = new Stop[]{new Stop(0, Color.LIGHTSKYBLUE), new Stop(1, Color.BLUE)}; LinearGradient gradient = new LinearGradient(0.5, 0, 0.5, 1, true, CycleMethod.NO_CYCLE, stops); gc.setFill(gradient); gc.fillOval(this.circle_x, this.circle_y, this.width, this.height); gc.translate(0, 0); gc.fill(); gc.stroke(); // Inner circle stops = new Stop[]{new Stop(0, Color.BLUE), new Stop(1, Color.LIGHTSKYBLUE)}; gradient = new LinearGradient(0, 0, 1, 1, true, CycleMethod.NO_CYCLE, stops); gc.setFill(gradient); gc.fillOval(this.circle_x + 3, this.circle_y + 3, this.width - 6, this.height - 6); gc.fill(); gc.stroke(); } public static void main(String[] args) { launch(args); } }I modified your code which allows you,
Select/deselect the circle on MouseClickedHorizontal Movement of circle on MouseMove
public class JavaFXTest extends Application { double mouse_x = 0.0; double mouse_y = 0.0; double circle_x = 10; double circle_y = 14; double height = 40; double width = 40; boolean circle_selected = false; @Override public void start(Stage primaryStage) { Group root = new Group(); Canvas canvas = new Canvas(300,100); this.createCircle(canvas); canvas.setOnMouseClicked(e-> this.select(e)); canvas.setOnMouseMoved(e -> { if(this.circle_selected) this.move(e, canvas); }); root.getChildren().add(canvas); Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.show(); } //checks whether the mouse location is within the circle or not private void select(MouseEvent e) { double temp_mouse_x = e.getSceneX(); double temp_mouse_y = e.getSceneY(); double x_max = this.circle_x + this.width; double y_max = this.circle_y + this.height; boolean selected = temp_mouse_x >= this.circle_x && temp_mouse_x <= x_max // x-area && temp_mouse_y >= this.circle_y && temp_mouse_y <= y_max; //y-area if(circle_selected && selected) { //deselect the circle if already selected circle_selected = false; }else { circle_selected = selected; } this.mouse_x = temp_mouse_x; this.mouse_y = temp_mouse_y; } //move circle public void move(MouseEvent e, Canvas canvas) { double change_x = e.getSceneX() - this.mouse_x; this.circle_x += change_x; canvas.getGraphicsContext2D().clearRect(0, 0, canvas.getWidth(), canvas.getHeight()); this.createCircle(canvas); this.mouse_x = e.getSceneX(); this.mouse_y = e.getSceneY(); } public void createCircle(Canvas canvas) { GraphicsContext gc = canvas.getGraphicsContext2D(); //outer circle Stop[] stops = new Stop[]{new Stop(0, Color.LIGHTSKYBLUE), new Stop(1, Color.BLUE)}; LinearGradient gradient = new LinearGradient(0.5, 0, 0.5, 1, true, CycleMethod.NO_CYCLE, stops); gc.setFill(gradient); gc.fillOval(this.circle_x, this.circle_y, this.width, this.height); gc.translate(0, 0); gc.fill(); gc.stroke(); // Inner circle stops = new Stop[]{new Stop(0, Color.BLUE), new Stop(1, Color.LIGHTSKYBLUE)}; gradient = new LinearGradient(0, 0, 1, 1, true, CycleMethod.NO_CYCLE, stops); gc.setFill(gradient); gc.fillOval(this.circle_x + 3, this.circle_y + 3, this.width - 6, this.height - 6); gc.fill(); gc.stroke(); } public static void main(String[] args) { launch(args); } }更多推荐
发布评论