如何“突出显示”或在 JavaFX 8 画布周围设置边框？

Question

我正在尝试为 Image Viewer 桌面产品组合一个简单的 POC。我的查看器需要支持注释，因此我决定尝试使用我正在查看的图像的主画布，然后使用较小的画布对象来放置注释。

注释需要能够被拖动、删除、重新排序等。

但是，要显示选择了哪个画布，我需要突出显示它，或者在其上放置阴影，或者在其周围加上边框。

我看不到可以在其中应用的 CSS 样式。我已经将它包装在一个 HBox 中以模拟效果，但我想知道是否有其他方式？

谢谢！

Answer 1

Canvas 是Node 的直接子类，因此它只支持为Node 定义的CSS 属性。这些不包括应用边框的标准方法，例如-fx-background-color 或-fx-border-color。

但是，Node 支持 -fx-effect 属性，因此您可以使用它。这是一个使用内联样式的“简单粗暴”的示例（在实际应用中，我建议使用外部样式表；也许，根据您的要求，子类化 Canvas 以提供“选择”行为）：

import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class CanvasCSSEffect extends Application {

    @Override
    public void start(Stage primaryStage) {
        Canvas canvas1 = new Canvas(400, 400);
        Canvas canvas2 = new Canvas(400, 400);

        GraphicsContext gc1 = canvas1.getGraphicsContext2D();
        gc1.setFill(Color.CORNSILK);
        gc1.fillRect(0, 0, 400, 400);

        GraphicsContext gc2 = canvas2.getGraphicsContext2D();
        gc2.setFill(Color.ANTIQUEWHITE);
        gc2.fillRect(0, 0, 400, 400);

        ObjectProperty<Canvas> selectedCanvas = new SimpleObjectProperty<>();
        selectedCanvas.addListener((obs, oldCanvas, newCanvas) -> {
            if (oldCanvas != null) {
                oldCanvas.setStyle("");
            }
            if (newCanvas != null) {
                newCanvas.setStyle("-fx-effect: innershadow(gaussian, #039ed3, 10, 1.0, 0, 0);");
            }
        });

        canvas1.setOnMouseClicked(e -> selectedCanvas.set(canvas1));
        canvas2.setOnMouseClicked(e -> selectedCanvas.set(canvas2));

        HBox root = new HBox(10, canvas1, canvas2);
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }

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