JavaFX自由手绘功能实现求助：画布位置与手绘逻辑问题

Hey there! Let's work through your freehand drawing challenges in your JavaFX image editor. I'll break down the key issues and give you actionable fixes based on your code.

一、Canvas的正确放置位置 #

你的组件层级是Pane(rootPane)包含HBox(pictureRegion)（放ImageView）和Group（放裁剪Rectangle）。要让手绘能精准覆盖在图片上，最佳做法是把Canvas和ImageView放在同一个容器里，确保两者的坐标系统完全对齐，避免手绘位置和图片错位。

修改建议： #

1. 替换原来的HBox为Group来承载ImageView和Canvas，这样它们共享同一坐标空间：

   // 替换原来的pictureRegion相关代码
   Group imageContainer = new Group();
   imageView = new ImageView(image);
   imageContainer.getChildren().add(imageView);
   rootPane.getChildren().add(imageContainer);
   rootPane.getChildren().add(group); // 保留放裁剪Rectangle的Group
   

2. 点击铅笔按钮创建Canvas时，将其添加到imageContainer中，尺寸和ImageView完全匹配：

   public void geometrySelection(String tempShape) {
       if(tempShape.equals("pencil")) {
           shape = "pencil";
           // 移除旧的Canvas（如果存在）
           imageContainer.getChildren().removeIf(node -> node instanceof Canvas);
           canvas = new Canvas(imageView.getImage().getWidth(), imageView.getImage().getHeight());
           gc = canvas.getGraphicsContext2D();
           gc.setStroke(Color.BLACK);
           gc.setLineWidth(5);
           // 给Canvas绑定专属鼠标事件
           canvas.setOnMousePressed(this::onMousePressed);
           canvas.setOnMouseDragged(this::onMouseDragged);
           imageContainer.getChildren().add(canvas);
           System.out.println("Canvas added over image");
       }
   }
   

二、修复鼠标事件的逻辑问题 #

你的当前事件处理逻辑存在顺序错误（先判断裁剪区域再判断工具），导致铅笔工具的事件被拦截。需要优先判断当前激活的工具类型，再执行对应逻辑：

修改onMousePressed方法： #

public void onMousePressed(MouseEvent event) {
    if (shape != null && shape.equals("pencil")) {
        // 手绘模式：记录起始点，开始路径
        gc.beginPath();
        gc.moveTo(event.getX(), event.getY());
    } else {
        // 裁剪模式：初始化裁剪矩形
        shape = "croppedArea";
        // 移除Canvas（切换回裁剪模式）
        imageContainer.getChildren().removeIf(node -> node instanceof Canvas);
        group.getChildren().clear();
        startingPointX = event.getX();
        startingPointY = event.getY();
        croppedArea = new Rectangle(startingPointX, startingPointY, 0, 0);
        croppedArea.setFill(Color.TRANSPARENT);
        croppedArea.setStroke(Color.BLACK);
        group.getChildren().add(croppedArea);
    }
}

修改onMouseDragged方法： #

public void onMouseDragged(MouseEvent event) {
    if (shape != null && shape.equals("pencil")) {
        // 手绘拖动：绘制连续线条
        gc.lineTo(event.getX(), event.getY());
        gc.stroke();
    } else {
        // 裁剪拖动：调整矩形大小
        currentEndingPointX = event.getX();
        currentEndingPointY = event.getY();
        adjustRectangleProperties(startingPointX, startingPointY, currentEndingPointX, currentEndingPointY, croppedArea);
    }
}

三、用LineTo（Path）实现矢量手绘 #

如果不想用Canvas（位图手绘），可以用Path+LineTo实现矢量手绘，这样线条支持后期编辑（比如调整颜色、宽度）。具体步骤：

1. 添加一个Path成员变量：

   Path drawPath;
   

2. 修改geometrySelection方法初始化Path：

   public void geometrySelection(String tempShape) {
       if(tempShape.equals("pencil")) {
           shape = "pencil";
           // 移除旧的Path和Canvas
           imageContainer.getChildren().removeIf(node -> node instanceof Path || node instanceof Canvas);
           drawPath = new Path();
           drawPath.setStroke(Color.BLACK);
           drawPath.setStrokeWidth(5);
           drawPath.setFill(null);
           imageContainer.getChildren().add(drawPath);
           // 绑定容器的鼠标事件
           imageContainer.setOnMousePressed(this::onPathMousePressed);
           imageContainer.setOnMouseDragged(this::onPathMouseDragged);
       }
   }
   

3. 添加对应的鼠标事件方法：

   public void onPathMousePressed(MouseEvent event) {
       drawPath.getElements().clear();
       drawPath.getElements().add(new MoveTo(event.getX(), event.getY()));
   }
   
   public void onPathMouseDragged(MouseEvent event) {
       drawPath.getElements().add(new LineTo(event.getX(), event.getY()));
   }
   

四、其他关键修复 #

• 字符串比较要用equals()而不是==：比如shape == "pencil"要改成shape.equals("pencil")，避免引用比较错误。
• 初始化shape变量为null，避免空指针异常。
• 裁剪完成后显示铅笔按钮时，可添加简单的边界判断，防止按钮超出窗口：

  pencilBtn.setLayoutX(Math.min(Math.max(startingPointX, currentEndingPointX) + 5, scene.getWidth() - 30));
  pencilBtn.setLayoutY(Math.min(Math.max(startingPointY, currentEndingPointY) - 120, scene.getHeight() - 30));
  

内容的提问来源于stack exchange，提问作者mayur singhal