창 모양 수정

Question

길게 이야기를 짧게 만들기 위해 저는 일종의 채팅/메시지 시스템을 만들고 조금의 도움이 필요합니다. 아래 이미지에 표시된 것과 같이 컨테이너에 화살표를 만들려고합니다. 이미지는 ControlsFX와 PopOver 윈도우에서 가져옵니다. 그것을 사용하고있는 것과 약간의 유령 행동을하기 때문에 popover 위젯을 사용할 수 없습니다.

나는 앞서 정의한 부모 개체 위에 자신의 위치를 ​​지정하는 작은 대화 창 팝업을 만들었지 만 실제로 개체를 가리키는 화살표를 갖고 싶습니다. 화살표는 항상 아래를 향하게하고 팝업의 왼쪽 하단에 있어야합니다.

팝업은 텍스트가 아닌 간단한 VBox라는 점에 유의해야합니다. 당연히 필요한 경우 창에 그 내용을 넣을 수 있습니다. 누구든지이 화살표를 만들 수있는 적절한 방법을 생각해 낼 수 있습니까? 내 그라데이션뿐만 아니라 그라디언트로 떨어져 있기 때문에 같은 색상으로 "addChildren() 통해 아래쪽에 화살표가 그냥 plopped 수 있도록 내 VBox 배경이 있습니다. 그것은 (어쨌든) 컨테이너의 일부분이어야합니다.

========================================= ================== 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에서 이미 생성 된 수많은 버블 모양이 있습니다. 인터페이스를 사용하여 말풍선을 검색하고 원하는 모양을 선택하거나 도구가있는 경우 사용자 정의 모양에 대한 고유 한 svg 경로를 정의 할 수 있습니다 (예 : Inkscape). 그 기술. 기존 svg 파일에서 svg 경로를 추출하려면 svg 파일을 열고 압축 된 경로 문자열 형식으로 인코딩되어 있는지 확인한 다음 svg의 경로 부분을 복사하여 JavaFX css 파일에 붙여 넣으십시오.

---

이 작업을 수행하는 또 다른 방법

프로그래밍 당신이 StackPane에 모두 배치하여 컨텐츠 레이어 것 path 구축하는 것입니다.