Question

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

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

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

我看不到可以在那里应用的CSS样式。我已将它包裹在HBox中以模拟效果，但我想知道这是否可能是另一种方式？

谢谢！

Answer 1

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

但是，Node支持-fx-effect属性，因此您可以使用它。这是一个使用内联样式的“快速和脏”示例（在真实的应用程序中，我建议使用外部样式表;也许，根据您的要求，子类化Canvas以提供“选择”行为）：< / p>

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);
    }
}

如何“突出显示”或在JavaFX 8 Canvas周围放置边框？

1 个答案: