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

一、需求描述

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

}

三、运行结果

技巧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