ウィンドウシェイプの変更

Question

私は一種のチャット/メッセージシステムを作成しようとしていて、ちょっとした援助が必要です。下の画像に示すように、私のコンテナに矢印を作成しようとしています。画像はControlsFXとPopOverウィンドウから取り出されます。私はポップオーバーウィジェットを使用することができません。なぜなら、私が使っているもので少しうねりがするからです。

私は自分の小さなチャットウィンドウのポップアップを作成して、私が定義した親オブジェクト上に自分自身を配置しましたが、私は本当にオブジェクトを指し示す矢印を持っていたいと思います。矢印は常に下向きで、ポップアップの左下隅にあるはずです。

また、ポップアップはウィンドウではなく、テキスト行を入力する単純なVBoxです。私はもちろん、必要ならペインでそれを包むことができます。誰でもこの矢を作るための正しい方法を考え出すことができますか？私はグラデーションとしても私のVBoxの背景を持っているので、矢印はちょうどgetChildren（）を介して下にプループされていることはできません。それは（何らかの形で）コンテナの一部でなければならない。

========================================= ================================== EDIT：

さて私は、今日の大部分を費やしSVG Pathingの学習は面倒ではありませんが、やや面倒です。私が行った最後のパスは次のとおりです。

"M30 0 h100 a6,6 0 0,1 6,6 v50 a6,6 0 0,1 -6,6 h-88 L38 68 L34 62 h-4 a6,6 0 
0,1 -6,-6 v-50 a6,6 0 0,1 6,-6 z" 

これで唯一の問題は、矢印の尾の高さがペインのサイズとともに大きくなることです。たとえば、ボックスにテキストがたくさんある場合、ペインは高さが高くなります（矢印が長くなります）。この行動はトータルディスカッションブレイカーではありませんが、私が意図したものではありません。私は、矢印のポイントが何に関係なく置かれていることを確認するために、パススルーの首都Lsが期待しましたが、動作しませんでした。これについての考えは？

Answer 1

あなたが望む効果を達成するにはいくつかの方法があります。 地域でCSS -fx-shape属性指定を使用する方法もあります。この設定と使用方法については、JavaFX CSS referenceを参照してください。

以下のサンプルでは、​​インラインスタイルを使用していますが、より保守的で実質的なアプリケーションでは、外部CSSスタイルシートを使用してください。

import javafx.application.Application; 
import javafx.geometry.Insets; 
import javafx.scene.Scene; 
import javafx.scene.control.Label; 
import javafx.scene.effect.DropShadow; 
import javafx.scene.layout.StackPane; 
import javafx.scene.paint.Color; 
import javafx.stage.Stage; 

public class Bubble extends Application { 
    private static final String SQUARE_BUBBLE = 
      "M24 1h-24v16.981h4v5.019l7-5.019h13z"; 
    // source for svg path string: https://iconmonstr.com/speech-bubble-7/ 
    private static final String ROUND_BUBBLE = 
      "M12 1c-6.628 0-12 4.573-12 10.213 0 2.39.932 4.591 2.427 6.164l-2.427 5.623 7.563-2.26c9.495 2.598 16.437-3.251 16.437-9.527 0-5.64-5.372-10.213-12-10.213z"; 

    @Override 
    public void start(Stage stage) { 
     Label label = new Label("hello, world"); 
     label.setStyle("-fx-font-size: 16px;"); 

     StackPane bubble = new StackPane(label); 
     bubble.setPadding(new Insets(20)); 
     bubble.setStyle(
      "-fx-background-color: lightblue; " + 
      "-fx-border-color: navy; -fx-border-width: 2px; " + 
      "-fx-shape: \"" + ROUND_BUBBLE + "\";" 
     ); 
     bubble.setEffect(new DropShadow(10, 5, 5, Color.MIDNIGHTBLUE)); 

     StackPane layout = new StackPane(bubble); 
     layout.setPadding(new Insets(20)); 

     stage.setScene(new Scene(layout)); 
     stage.show(); 
    } 

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

私は、このアプリケーションでデモバブル形状が希望の形状が正確ではないことを認識し、私はあなたが望む形が何であるかをあなたの説明から理解していません。 iconmonstr.comに既に作成された多数のバブルシェイプがあります。インターフェイスを使用してスピーチバブルを検索したり、必要なシェイプを選択したり、ツール（たとえばInkscape）がある場合はカスタムシェイプの独自のsvgパスを定義できます。それのスキル。既存のsvgファイルからsvgパスを抽出するには、svgファイルを開き、コンパクトなパス文字列形式でエンコードされていることを願ってください。そうであれば、svgのパス部分をコピーしてJavaFX CSSファイルに貼り付けてください。これを行うには

---

もう一つの方法は、プログラムで使用すると、両方のStackPaneに配置することによって、コンテンツを有する層しまうpathを構築することです。