一、需求描述
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;//快照,保持前面所画框图@Overridepublic 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();//获取鼠标移动位置的xdouble endy=event.getY();//获取鼠标移动位置的yif (endx{//快照,保持之前所画框图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()...");}@Overridepublic void init() throws Exception {super.init();System.out.println("init()...");//先调用}@Overridepublic void stop() throws Exception {super.stop();System.out.println("stop()...");//窗口关闭自动调用}public static void main(String[] args) {launch();}}
三、运行结果
技巧1、实现从下往上画图
if (endx
技巧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