在画布周围绘制边框 [英] Draw border around a Canvas

问题描述

我正在编码（本质上）模仿MS Paint的应用程序；您可以选择铅笔工具，然后以3的笔触绘制一条线；您可以选择标记工具并用7的笔划画一条线，等等。

我想在我的Canvas周围绘制边框。这很简单，是的。但是，使用其他方法，我可以想到的唯一方法就是围绕绘制边界后的大量抽查。

这是 drawBorder（）



code>方法：

  private void drawBorder（GraphicsContext g）{
 final double canvasWidth = g.getCanvas （）.getWidth（）; 
 final double canvasHeight = g.getCanvas（）。getHeight（）; 
 
 g.setStroke（Color.BLACK）; 
 g.setLineWidth（4）; 
 g.strokeRect（0，0，canvasWidth，canvasHeight）; 
 
 //将颜色设置回当前选择的ColorPicker颜色
 g.setStroke（selectedColor）; 
} 
  

但是，此代码将与我的 clear（ ）操作

  clearTool.setOnAction（e-> {
 graphics.clearRect（ 0，0，
 canvas.getWidth（），canvas.getHeight（））; 
 drawBorder（graphics）; 
}）; 
  

因为在清除画布后，笔划线的宽度为4。这是一个问题，因为如果我使用铅笔工具作为选定工具（笔划线宽为3），则在选择另一个工具并切换回铅笔工具之前，它将为4；此外，如果在按下清除按钮时选择了标记工具，则同样的概念也适用（笔划的线宽7将为4，直到我选择另一个工具，然后重新选择标记工具）。

我试图避免为每个工具设置一个检查，并让它每次都重新设置笔划的线宽-虽然这行得通，但看起来有些麻烦。

解决方案

请考虑将画布放在窗格中，并使用CSS设置窗格样式。例如：

  import javafx.application.Application; 
 import javafx.geometry.Pos; 
 import javafx.scene.Scene; 
 import javafx.scene.canvas.Canvas; 
 import javafx.scene.canvas.GraphicsContext; 
 import javafx.scene.control.Button; 
 import javafx.scene.layout.Priority; 
 import javafx.scene.layout.StackPane; 
 import javafx.scene.layout.VBox; 
 import javafx.scene.paint.Color; 
 import javafx.stage.Stage; 
 
公共类CanvasWithBorderExample扩展应用程序{
 
 @Override 
 public void start（Stage primaryStage）{
 
 final int SIZE = 400; 
 Canvas canvas = new Canvas（SIZE，SIZE）; 
 
 GraphicsContext gc = canvas.getGraphicsContext2D（）; 
 gc.setStroke（Color.RED）; 
 gc.moveTo（0，0）; 
 gc.lineTo（SIZE，SIZE）; 
 gc.stroke（）; 
 
 StackPane canvasContainer = new StackPane（canvas）; 
 canvasContainer.getStyleClass（）。add（ canvas）; 
 
 VBox root = new VBox（10，canvasContainer，new Button（ Click here））; 
 root.setFillWidth（false）; 
 VBox.setVgrow（canvasContainer，Priority.NEVER）; 
 root.setAlignment（Pos.CENTER）; 
 
场景场景=新场景（根）; 
 scene.getStylesheets（）。add（ canvas-with-border.css）; 
 primaryStage.setScene（scene）; 
 primaryStage.show（）; 
} 
 
 public static void main（String [] args）{
 launch（args）; 
} 
} 
  

with canvas-with-border.css：

  .canvas {
 -fx-background-color：antiquewhite，white; 
 -fx-background-insets：0，20; 
 -fx-padding：20; 
} 
  

I'm in the process of coding an application that (essentially) mimics MS Paint; you can select the Pencil tool, and draw a line with a stroke of 3; you can select the Marker tool and draw a line with a stroke of 7, etc.

I wanted to have a border drawn around my Canvas. This is simple, yes. However, with other methods I have, the only way I can think to implement this revolves around a lot of spot-checking after the border is drawn. Is there an efficient way to do this without conflicting with the stroke/color of the already selected Tool?

Here is the drawBorder() method:

private void drawBorder(GraphicsContext g) {
    final double canvasWidth = g.getCanvas().getWidth();
    final double canvasHeight = g.getCanvas().getHeight();

    g.setStroke(Color.BLACK);
    g.setLineWidth(4);
    g.strokeRect(0, 0, canvasWidth, canvasHeight);

    //sets the color back to the currently selected ColorPicker color
    g.setStroke(selectedColor);
}

However, this code will conflict with my clear() action

clearTool.setOnAction(e -> {
            graphics.clearRect(0, 0,
                canvas.getWidth(), canvas.getHeight());
            drawBorder(graphics);
        });

because after the clearing of the Canvas, the stroke line width will be 4. This is an issue because if I had the pencil tool as the selected tool (stroke linewidth of 3), it will be 4 until I select another tool and switch back to the pencil tool; furthermore, the same concept applies if I had the marker tool selected at the time of pressing the clear button (stroke linewidth of 7 will be 4 until I select another tool and then reselect the marker tool).

I'm trying to avoid having to set a check for each tool, and have it reset the stroke's linewidth each and every time--while that would work, it seems convoluted.

解决方案

Consider putting the canvas in a pane, and using CSS to style the pane. For example:

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.layout.Priority;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class CanvasWithBorderExample extends Application {

    @Override
    public void start(Stage primaryStage) {

        final int SIZE = 400 ;
        Canvas canvas = new Canvas(SIZE, SIZE);

        GraphicsContext gc = canvas.getGraphicsContext2D() ;
        gc.setStroke(Color.RED);
        gc.moveTo(0, 0);
        gc.lineTo(SIZE, SIZE);
        gc.stroke();

        StackPane canvasContainer = new StackPane(canvas);
        canvasContainer.getStyleClass().add("canvas");

        VBox root = new VBox(10, canvasContainer, new Button("Click here"));
        root.setFillWidth(false);
        VBox.setVgrow(canvasContainer, Priority.NEVER);
        root.setAlignment(Pos.CENTER);

        Scene scene = new Scene(root);
        scene.getStylesheets().add("canvas-with-border.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

with canvas-with-border.css:

.canvas {
    -fx-background-color: antiquewhite, white ;
    -fx-background-insets: 0, 20 ;
    -fx-padding: 20 ;
}

这篇关于在画布周围绘制边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！