javafx 场景构建器自定义组件

Question

我想在场景构建器中使用自定义组件。
我想将画布嵌入到自定义组件中。所以我尝试改变属性的画布。
这样的画布代码：

    package test;

    import javafx.scene.canvas.Canvas;
    import javafx.scene.canvas.GraphicsContext;

    public class DrawCanvas extends Canvas{
        public DrawCanvas() {
            draw();
        }

        private void draw() {
            // TODO Auto-generated method stub
            double width = getWidth();
            double height = getHeight();
            GraphicsContext gc = getGraphicsContext2D();
            gc.strokeLine(0,0,50,50);
        }
    }

自定义组件代码如下：

    package test;

    import java.io.IOException;
    import javafx.fxml.FXMLLoader;
    import javafx.scene.layout.BorderPane;

    public class Test extends BorderPane{

        public Test() {
            super();
            FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("Test.fxml"));
            fxmlLoader.setRoot(this);
            fxmlLoader.setController(this);
            try {
                fxmlLoader.load();
            } catch (IOException exception) {
                throw new RuntimeException(exception);
            }
        }
    }

fxml 文件：

    <?xml version="1.0" encoding="UTF-8"?>

    <?import javafx.scene.layout.BorderPane?>
    <?import javafx.scene.*?>
    <?import javafx.scene.control.*?>
    <?import javafx.scene.canvas.Canvas?>


    <fx:root xmlns:fx="http://javafx.com/fxml" type="javafx.scene.layout.BorderPane">
        <center>
        </center>
    </fx:root>

我尝试过这种方式，但失败了。

    <?import javafx.scene.layout.BorderPane?>
    <?import javafx.scene.*?>
    <?import javafx.scene.control.*?>
    <?import javafx.scene.canvas.Canvas?>
    <?import org.korecky.myjavafx.fxml10.DrawCanvas?>
    <fx:root xmlns:fx="http://javafx.com/fxml" type="javafx.scene.layout.BorderPane">
        <center>
            <DrawCanvas ></DrawCanvas>
        </center>
    </fx:root>

请给我建议和提示。

Answer 1

您的方法对我有用，但您需要创建一个有效的画布，提供一些尺寸，否则这些将是 0x0。例如：

private void draw() {
    setWidth(50);
    setHeight(50);
    GraphicsContext gc = getGraphicsContext2D();
    gc.strokeLine(0,0,50,50);
}

现在您可以按照@jewelsea 的建议将您的DrawCanvas 组件导入SceneBuilder，然后您就可以将它拖到您的场景中了：

您可以向该类添加一些属性，例如canvasWidth 和canvasHeight。

public class DrawCanvas extends Canvas {

    private final GraphicsContext gc;

    public DrawCanvas() {
        gc = getGraphicsContext2D();
        draw();
    }

    private void draw() {
        setWidth(canvasWidth.get());
        setHeight(canvasHeight.get());
        gc.clearRect(0,0,canvasWidth.get(),canvasHeight.get());
        gc.strokeLine(0,0,canvasWidth.get(),canvasHeight.get());
    }

    private final DoubleProperty canvasWidth = new SimpleDoubleProperty(50){
        @Override
        protected void invalidated() {
            draw();
        }
    };

    public double getCanvasWidth() {
        return canvasWidth.get();
    }

    public void setCanvasWidth(double value) {
        canvasWidth.set(value);
    }

    public DoubleProperty canvasWidthProperty() {
        return canvasWidth;
    }
    private final DoubleProperty canvasHeight = new SimpleDoubleProperty(50){
        @Override
        protected void invalidated() {
            draw();
        }
    };

    public double getCanvasHeight() {
        return canvasHeight.get();
    }

    public void setCanvasHeight(double value) {
        canvasHeight.set(value);
    }

    public DoubleProperty canvasHeightProperty() {
        return canvasHeight;
    }

}

这将允许您在 Inspector 面板上设置它们：

或在您的 fxml 文件中：

<fx:root type="javafx.scene.layout.BorderPane" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
   <center>
      <DrawCanvas canvasWidth="150" canvasHeight="250" />
   </center>
</fx:root>