Rectangleの背景色を維持しながら、ImagePatternを長方形に追加する方法

Question

私はチェスボードを持っており、ボードにピースを追加しようとしています。ボード上の各点はRectangleですので、ピースを追加する最も良い方法は、各Rectangleにピースを追加するImagePatternを追加することだと思いました。私が遭遇した問題は、ImagePatternをRectangleに追加したときにImagePatternが追加される前の色にもかかわらず、そのRectangleの背景を白色にすることでした。だから私の質問は、ImagePatternを追加した後、Rectangleの背景色を保持する方法があるのでしょうか？ デモのために私のコードはボードに1枚しか追加しません。

public class ChessBoard extends Application { 
    GridPane root = new GridPane(); 
    final int size = 8; 

    public void start(Stage primaryStage) { 
    for (int row = 0; row < size; row++) { 
     for (int col = 0; col < size; col++) { 
      Rectangle square = new Rectangle(); 
      Color color; 

      if ((row + col) % 2 == 0) 
       color = Color.WHITE; 
      else 
       color = Color.BLACK; 

      square.setFill(color); 
      root.add(square, col, row); 
      if(row == 4 && col == 3){ 
       Image p = new Image("Peices/Black/0.png"); 
       ImagePattern pat = new ImagePattern(p); 
       square.setFill(pat); 
      } 



      square.widthProperty().bind(root.widthProperty().divide(size)); 
      square.heightProperty().bind(root.heightProperty().divide(size)); 
      square.setOnMouseClicked(e->{ 
       square.setFill(Color.BLUE); 
      }); 
     } 
    } 
    primaryStage.setScene(new Scene(root, 400, 400)); 
    primaryStage.show(); 
} 

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

Answer 1

BlendModeで行われているブレンドを探していると思います。例：

Image p = new Image("Peices/Black/0.png"); 
ImagePattern pat = new ImagePattern(p); 
Rectangle r1 = new Rectangle(); 
r1.setX(50); 
r1.setY(50); 
r1.setWidth(50); 
r1.setHeight(50); 
r1.setFill(pat); 

Rectangle r = new Rectangle(); 
r.setX(50); 
r.setY(50); 
r.setWidth(50); 
r.setHeight(50); 
r.setFill(Color.BLUE); 
r.setBlendMode(BlendMode.ADD); 

私が知る限り、これを達成する直接的な方法はありません。
ソース：https://docs.oracle.com/javase/8/javafx/api/javafx/scene/effect/BlendMode.html

Answer 2

いいえ、Rectangleで1つ以上の塗りを使用することはできません。理論的には、複数の背景を持つRegionを使用できますが、これはおそらく悪い考えです。別の

アニメーションに一つのフィールドから曲をドラッグ

• ：ほとんどの場合、あなたは作品自らのノードを作成していない場合、機能しません作品のために以下の機能の少なくとも一部をお勧めします

を移動し、私はStackPaneを使用することをお勧めしてバックグラウンドでボードを入れて作品を配置し、その上にPaneを置きます。ピースにはImageViewを使用してください。

例：答えを

@Override 
public void start(Stage primaryStage) { 
    GridPane board = new GridPane(); 
    Region[][] fields = new Region[8][8]; 
    for (int i = 0; i < fields.length; i++) { 
     Region[] flds = fields[i]; 
     for (int j = 0; j < flds.length; j++) { 
      Region field = new Region(); 
      flds[j] = field; 
      field.setBackground(new Background(new BackgroundFill((i + j) % 2 == 0 ? Color.WHITE : Color.BLACK, CornerRadii.EMPTY, Insets.EMPTY))); 
     } 
     board.addRow(i, flds); 
    } 

    // use 1/8 of the size of the Grid for each field 
    RowConstraints rowConstraints = new RowConstraints(); 
    rowConstraints.setPercentHeight(100d/8); 
    ColumnConstraints columnConstraints = new ColumnConstraints(); 
    columnConstraints.setPercentWidth(100d/8); 

    for (int i = 0; i < 8; i++) { 
     board.getColumnConstraints().add(columnConstraints); 
     board.getRowConstraints().add(rowConstraints); 
    } 

    Pane piecePane = new Pane(); 
    StackPane root = new StackPane(board, piecePane); 

    NumberBinding boardSize = Bindings.min(root.widthProperty(), root.heightProperty()); 

    ImageView queen = new ImageView("https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Chess_qdt45.svg/480px-Chess_qdt45.svg.png"); 
    DropShadow shadow = new DropShadow(BlurType.GAUSSIAN, Color.WHITE, 2, 1, 0, 0); 

    // drop shadow for black piece on black field 
    queen.setEffect(shadow); 

    // trigger move to topleft field on mouse click 
    queen.setOnMouseClicked(evt -> { 
     Node source = (Node) evt.getSource(); 
     TranslateTransition animation = new TranslateTransition(Duration.seconds(0.5), source); 
     Region targetRegion = fields[0][0]; 
     final PositionChangeListener listener = (PositionChangeListener) source.getUserData(); 
     listener.setField(null); 
     animation.setByX(targetRegion.getLayoutX() - source.getLayoutX()); 
     animation.setByY(targetRegion.getLayoutY() - source.getLayoutY()); 
     animation.setOnFinished(e -> { 
      source.setTranslateX(0); 
      source.setTranslateY(0); 
      listener.setField(targetRegion); 
     }); 
     animation.play(); 
    }); 

    PositionChangeListener changeListener = new PositionChangeListener(queen); 
    queen.setUserData(changeListener); 
    changeListener.setField(fields[4][3]); 

    // board size should be as large as possible but at most the min of the parent sizes 
    board.setPrefSize(Double.MAX_VALUE, Double.MAX_VALUE); 
    board.maxWidthProperty().bind(boardSize); 
    board.maxHeightProperty().bind(boardSize); 

    // same size for piecePane 
    piecePane.setPrefSize(Double.MAX_VALUE, Double.MAX_VALUE); 
    piecePane.maxWidthProperty().bind(boardSize); 
    piecePane.maxHeightProperty().bind(boardSize); 

    // add piece to piecePane 
    piecePane.getChildren().add(queen); 

    Scene scene = new Scene(root, 400, 400); 

    primaryStage.setScene(scene); 
    primaryStage.show(); 
} 

private static class PositionChangeListener implements ChangeListener<Bounds> { 

    private final ImageView piece; 

    public PositionChangeListener(ImageView piece) { 
     this.piece = piece; 
    } 

    private Region currentField; 

    public void setField(Region newRegion) { 
     // register/unregister listeners to bounds changes of associated field 
     if (currentField != null) { 
      currentField.boundsInParentProperty().removeListener(this); 
     } 
     currentField = newRegion; 
     if (newRegion != null) { 
      newRegion.boundsInParentProperty().addListener(this); 
      changed(null, null, newRegion.getBoundsInParent()); 
     } 
    } 

    @Override 
    public void changed(ObservableValue<? extends Bounds> observable, Bounds oldValue, Bounds newValue) { 
     // align piece with field 
     piece.setLayoutX(newValue.getMinX()); 
     piece.setLayoutY(newValue.getMinY()); 
     piece.setFitHeight(newValue.getHeight()); 
     piece.setFitWidth(newValue.getWidth()); 
    } 

}