【JavaFx基础】在画布中画线框

雨点打透心脏的1/2处 2023-10-11 21:16 9阅读 0赞

**一、需求描述**

JavaFx项目中，实现用画布控件在画布中画线框

**二、代码参考**

package com.example.fxtest2;
    import javafx.application.Application;
    import javafx.application.Platform;
    import javafx.beans.value.ChangeListener;
    import javafx.beans.value.ObservableValue;
    import javafx.event.ActionEvent;
    import javafx.event.EventHandler;
    import javafx.fxml.FXMLLoader;
    import javafx.scene.ImageCursor;
    import javafx.scene.Parent;
    import javafx.scene.Scene;
    import javafx.scene.canvas.Canvas;
    import javafx.scene.canvas.GraphicsContext;
    import javafx.scene.control.Button;
    import javafx.scene.control.Control;
    import javafx.scene.control.Label;
    import javafx.scene.control.TextField;
    import javafx.scene.image.Image;
    import javafx.scene.image.ImageView;
    import javafx.scene.image.WritableImage;
    import javafx.scene.input.Dragboard;
    import javafx.scene.input.KeyCode;
    import javafx.scene.input.TransferMode;
    import javafx.scene.layout.*;
    import javafx.scene.paint.Color;
    import javafx.scene.shape.Circle;
    import javafx.scene.text.Font;
    import javafx.scene.text.FontWeight;
    import javafx.stage.Modality;
    import javafx.stage.Stage;
    import java.io.IOException;
    import java.net.URL;
    import java.util.Objects;
    
    public class HelloApplication extends Application {
    
        public static final double WIDTH=600,HEIGHT=500;
        private Canvas canvas=new Canvas(WIDTH,HEIGHT);
        private GraphicsContext graphicsContext=canvas.getGraphicsContext2D();
        private double x;//鼠标x点
        private double y;//鼠标y点
        private WritableImage image=null;//快照，保持前面所画框图
        @Override
        public void start(Stage stage) throws IOException {
    
            canvas.setLayoutX(0);
            canvas.setLayoutY(0);
    
            //graphicsContext.setLineWidth(10);//画框宽，10个像素
            //graphicsContext.setStroke(Color.GREEN);//画框边框颜色
            //graphicsContext.strokeRect(30,30,300,300);//画框大小
            //graphicsContext.setFill(Color.RED);//填充色
            // graphicsContext.fillOval(30,30,300,300);//填充圆
            canvas.setOnMousePressed(event->{//鼠标落点位置
                x=event.getX();
                y=event.getY();
            });
            canvas.setOnMouseDragged(event->{//在绘图区绘制框图
                double startx=x;
                double starty=y;
                double endx=event.getX();//获取鼠标移动位置的x
                double endy=event.getY();//获取鼠标移动位置的y
                if (endx<startx){//使框图可以从下往上画
                    startx=endx;
                    endx=x;
                    starty=endy;
                    endy=y;
                }
                double width=endx-startx;
                double height=endy-starty;
                graphicsContext.clearRect(0,0,WIDTH,HEIGHT);//清除中间的框图
                graphicsContext.drawImage(image,0,0,WIDTH,HEIGHT);
                graphicsContext.strokeRect(startx,starty,width,height);//鼠标移动哪里画哪里
            });
            canvas.setOnMouseReleased(event->{//快照，保持之前所画框图
                image=canvas.snapshot(null,null);
            });
            AnchorPane pane=new AnchorPane(canvas);
            Scene scene=new Scene(pane,800,600);
            stage.setScene(scene);
            //stage.setResizable(false);
            stage.setTitle("画图");
            stage.show();
            System.out.println("start()...");
        }
    
        @Override
        public void init() throws Exception {
            super.init();
            System.out.println("init()...");//先调用
        }
    
        @Override
        public void stop() throws Exception {
            super.stop();
            System.out.println("stop()...");//窗口关闭自动调用
        }
    
        public static void main(String[] args) {
    
            launch();
        }
    
    }

**三、运行结果**

![7f99652ff5754daabfaf4017213cd29e.png][]

技巧1、实现从下往上画图

if (endx<startx){//使框图可以从下往上画
                    startx=endx;
                    endx=x;
                    starty=endy;
                    endy=y;
                }

技巧2、清除不需要的线框

graphicsContext.clearRect(0,0,WIDTH,HEIGHT);

技巧3、保存之前画的线框

canvas.setOnMouseReleased(event->{//快照，保持之前所画框图
                image=canvas.snapshot(null,null);
            });

**四、参考教程**

[https://www.bilibili.com/video/BV1Qf4y1F7Zv?p=14&vd\_source=841fee104972680a6cac4dbdbf144b50][https_www.bilibili.com_video_BV1Qf4y1F7Zv_p_14_vd_source_841fee104972680a6cac4dbdbf144b50]

[7f99652ff5754daabfaf4017213cd29e.png]: https://img-blog.csdnimg.cn/7f99652ff5754daabfaf4017213cd29e.png
[https_www.bilibili.com_video_BV1Qf4y1F7Zv_p_14_vd_source_841fee104972680a6cac4dbdbf144b50]: https://www.bilibili.com/video/BV1Qf4y1F7Zv?p=14&vd_source=841fee104972680a6cac4dbdbf144b50