JavaFXのCanvasで「消しゴム」の実装

Question

前提・実現したいこと

現在、JavaFXを使ってペイントアプリのようなものを作っています。
Windows標準ペイントでいうペンは実装できたのですが、消しゴムがうまく実装できません。

調べた範囲では削除関係はGraphicsContext.clearRectぐらいしか見つからず、
消しゴムとは言い難いので他の方法を探しています。
ちなみにレイヤー構造で背景が透明なので白で上書きという手段が使えません。

解決策や代替案等があれば教えていただけると嬉しいです。

該当のソースコード

public class AppCanvas extends Canvas{
	/*
	 * 書き込み専用キャンバスクラス
	 */

	//グラフィック
	private GraphicsContext g;

	//直前座標
	private double befoer_x = -1;
	private double befoer_y = -1;

	public AppCanvas(double x,double y) {

		this.setWidth(x);
		this.setHeight(y);

		g = this.getGraphicsContext2D();

		//描画設定
		g.setLineWidth(3);

		//マウスボタン押し込み時処理登録
		EventHandler<MouseEvent> dragg = ( event ) -> draggMouse(event);
		this.addEventHandler( MouseEvent.MOUSE_DRAGGED , dragg );

		//マウスドラッグ時処理登録
		EventHandler<MouseEvent> press = ( event ) -> pressMouse(event);
		this.addEventHandler( MouseEvent.MOUSE_PRESSED , press );

		//マウス離したときの処理登録
		EventHandler<MouseEvent> release = ( event ) -> releaseMouse(event);
		this.addEventHandler( MouseEvent.MOUSE_RELEASED , release );
	}

	/*
	 * マウス押し込み初回
	 */
	void pressMouse(MouseEvent event) {

		//消しゴムの場合は透過色に,それ以外は黒に
		if(XXXX) {
			g.setFill(Color.TRANSPARENT);	//ここで透過色で塗りつぶしを試しましたが、消しゴムにはならず
			g.setStroke(Color.TRANSPARENT);
		}else {
			g.setFill(Color.BLACK);
			g.setStroke(Color.BLACK);
		}

		//現在座標で点を描画
		g.strokeLine(befoer_x, befoer_y , befoer_x, befoer_y);
		
		//直前座標を記録
		befoer_x = event.getX();
		befoer_y = event.getY();
	}

	/*
	 *	マウスドラッグ
	 */
	void draggMouse(MouseEvent event) {

		//直前座標が存在しない場合終了
		if(befoer_x < 0) {
			return;
		}

		//今回座標と直前座標を線で結ぶ
		g.strokeLine(befoer_x, befoer_y , event.getX(), event.getY());

		//今回の座標を直前座標に登録
		befoer_x = event.getX();
		befoer_y = event.getY();
	}

	/*
	 * マウス離す
	 */
	void releaseMouse(MouseEvent event) {
	
		//前回座標を無効する
		befoer_x = -1;
		befoer_y = -1;
	}
}

試したこと

・削除関係の処理はClearRect以外見つけられませんでした。
・ドラッグ部分をfillOvalにして動作確認した際、線を引いたら破線になっていたためClearRect連続実行も効果が無いと思われます。
・上記ソースに記載がありますが、透明色で上書きは効果無かったです。

補足情報（FW/ツールのバージョンなど）

Eclipse
Java11
JavaFx

Comments

[hoshi-takanori]

透過色じゃなくて、白で塗れば良いのでは。

Answer 1

PixelWriter#setColor()をつかってみる、とか。

package fx;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.PixelWriter;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.stage.Stage;

public class HogeCanvas {
  public static void main(final String[] args) throws Exception {
    Application.launch(App.class, args);
  }

  static public class App extends Application {
    @Override
    public void start(final Stage stage) throws Exception {
      final Canvas base = new Canvas();
      {
        base.setWidth(200);
        base.setHeight(200);
        final GraphicsContext g = base.getGraphicsContext2D();
        g.setFill(Color.CYAN);
        g.fillOval(0, 0, base.getWidth(), base.getHeight());
      }

      final Canvas canvas = new Canvas();
      {
        canvas.setWidth(200);
        canvas.setHeight(200);
        final GraphicsContext g = canvas.getGraphicsContext2D();
        g.setFill(Color.RED);
        g.fillRect(10, 10, canvas.getWidth() - 20, canvas.getHeight() - 20);

        canvas.setOnMouseMoved(ev -> {
          clearLine(g, ev);
        });
      }

      stage.setScene(new Scene(new StackPane(base, canvas)));
      stage.show();
    }

    private MouseEvent _prevEv = null;

    private void clearLine(final GraphicsContext g, final MouseEvent ev) {
      if (_prevEv != null) {
        final PixelWriter pw = g.getPixelWriter();
        final Line line = new Line(_prevEv.getX(), _prevEv.getY(), ev.getX(), ev.getY());
        for (int x = (int) Math.min(line.getStartX(), line.getEndX()); x <= (int) Math.max(line.getStartX(), line.getEndX()); x++) {
          for (int y = (int) Math.min(line.getStartY(), line.getEndY()); y <= (int) Math.max(line.getStartY(), line.getEndY()); y++) {
            if (line.contains(x, y)) {
              pw.setColor(x, y, Color.TRANSPARENT);
            }
          }
        }
      }
      //
      _prevEv = ev;
    }
  }
}

Comments

[nakamaro]

PixelWriter#setColorで1ピクセルずつクリアという方法があったのですね。
ありがとうございます、参考になります。

削除範囲は太さが欲しかったので、少しアレンジして
・描画キャンバスに重ねたダミーキャンバスに太線で描画（描画キャンバスと同処理）
・ダミーで全ピクセル走査して非透明ピクセルを検知、描画キャンバスの同じ座標をクリア
・ダミーを初期化
という処理にしてみました。