JavaFX的聊天泡泡完美 [英] JavaFX chat bubble perfection

问题描述

所以我想创建一个聊天泡泡，所以我最初的问题是

so i am trying to create a chat bubble, so my initial question is

• 如何创建聊天泡沫？

你有什么我试过？

我已经扩展了图形专门路径类来创建我的泡沫，它的美丽在一定程度上，但我无法使我的节点在我的自定义形状正确，我试着问这个<一href="http://stackoverflow.com/questions/31375422/javafx-detect-if-shape-has-been-assigned-to-a-region-parent-node">question以便能够知道如何使他们，但我有没有帮助actually-（也许我是不是清醒），这是我在结束

i have extended the Shape specifically Path class to create my bubble , its beautiful to some extent, but i can not align my Nodes in my custom shape properly, i tried to ask this question so as to be able to know how to align them but i had no help actually-(maybe i wasn't lucid) this is what i have at the end

不过这就是我想要

窗格是使用ChatBubble形状 FACE_TOP 这是我怎么称呼它，而标签正在使用 FACE_LEFT_CENTER ，现在这是不完美的，因为我的外形只是改变了地缘格式我的区域等我的节点对齐从最左边开始使它看起来可怕，我必须手动设置填充像这样

the pane is using the ChatBubble shape FACE_TOP that is how i call it, and the Label is using FACE_LEFT_CENTER, now this is not perfect because, my Shape just alters the geo format of my Region so the alignment on my Node starts from the far left making it look awful, i have to manually set padding like this

setPadding(new Insets(0, 0, 0, getWidth()/4)); //quater

这样我就可以让他们看起来像第二个形象，但它成为一个问题，因为长方形的宽度变大，它的四不把它放在哪里，我想 我想要把它看它的大小，如第二张图，不论..我不想孔你们都长codeS，所以我贴了 ChatBubble 类在GitHub和我下面的示例实现

so i can have them look like the second image, but it becomes a problem as the width of the rectangle grows bigger, quater of it does not place it where i want all i want to have it look like the second pic irrespective of its size.. i didn't want to bore y'all with long codes so i posted the ChatBubble class on github and my example implementation below

Region r = new Region();
r.setShape(new ChatBubble(BubbleSpec.FACE_TOP));
// if i do not call the next line my bubble is awful
r.setPadding(new Insets(0, 0, 0, r.getWidth()/4)); //quater

的<一个href="https://bitbucket.org/Elltz/chatbubble/src/28819f3e10c720ad1241630db652943ce36b4e3c/ChatBubble/src/rumorsapp/Bubble.java?at=master"相对=nofollow> ChatBubble 类矿井。

The ChatBubble class of mine..

因此​​，在总结

• 是制造泡沫chat-（形尺寸图）最好的方法是什么？

• Is is the best way to create a bubble chat-(shaped size figure) ?

我怎样才能完善这个不依赖于计算宽度和做垫，或者我住在一起吗？

How can i perfect this without relying on calculating widths and doing paddings, or i live with it ?

最后，如果文本扩展图形， LabeledText 扩展图形那么，如何做我改变它们的形状和使用自定义形状（泡沫）？因为老实说，我不明白为什么它应该扩展状态，我不能改变它 谢谢你。

Lastly, if Text extends Shape, LabeledText extends Shape how,then, do i alter their shape and use a custom Shape (bubble) ? because honestly i do not see why it should extend Shape and i can not alter it Thanks.

推荐答案

CHATBUBBLE

它实际上没有解决这个问题。

it actually did solve it..

无论增加/减少宽度我的区域并没有硬派paddings-（见下文codeS和谈话的图片），我Implemeted一个以上的类名为<一个href="https://bitbucket.org/Elltz/chatbubble/src/28819f3e10c720ad1241630db652943ce36b4e3c/ChatBubble/src/rumorsapp/BubbledLabel.java?at=master"相对=nofollow> BubbledLabel ，我把它放在一个窗格，这些都是codeS - （末尾这一天，我做了数学，：））

irrespective of the increasing/decreasing width of my Region and no hardcore paddings-(see below codes and conversation picture), and i implemeted the above in a class called BubbledLabel and i put it in a pane these are the codes -(at the end of the day, i did the maths, :))

public class Main extends Application {
@Override
public void start(Stage primaryStage) {
    try {
        Group root = new Group();
        Scene scene = new Scene(root,400,400);
        scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());         
        Pane p = new Pane();            
        p.setPrefSize(400, 400);
        p.setBackground(new Background(new BackgroundFill(Color.GOLD,
                null, null)));
        root.getChildren().add(p);

        primaryStage.setScene(scene);
        primaryStage.setTitle("Conversation about Bubbles with Elltz");
        primaryStage.show();
        BubbledLabel bl1 = new BubbledLabel(BubbleSpec.FACE_LEFT_CENTER);
        bl1.relocate(10, 50);
        bl1.setText("Hi Elltz -:)");
        bl1.setBackground(new Background(new BackgroundFill(Color.YELLOWGREEN,
                null, null)));


        BubbledLabel bl2 = new BubbledLabel(BubbleSpec.FACE_RIGHT_CENTER);
        bl2.relocate(310, 100);
        bl2.setText("Heloooo Me");
        bl2.setBackground(new Background(new BackgroundFill(Color.GREENYELLOW,
                null, null)));

        BubbledLabel bl3 = new BubbledLabel(BubbleSpec.FACE_LEFT_CENTER);
        bl3.relocate(10, 150);
        bl3.setText("you know this would be a nice library");
        bl3.setBackground(new Background(new BackgroundFill(Color.YELLOWGREEN,
                null, null)));


        BubbledLabel bl4 = new BubbledLabel(BubbleSpec.FACE_RIGHT_CENTER);
        bl4.relocate(165, 200);
        bl4.setText("uhmm yea, kinda, but yknow,im tryna \nact like im not impressed");
        bl4.setBackground(new Background(new BackgroundFill(Color.GREENYELLOW,
                null, null)));

        BubbledLabel bl5 = new BubbledLabel(BubbleSpec.FACE_LEFT_CENTER);
        bl5.relocate(10, 250);
        bl5.setText("yea! yea! i see that, lowkey.. you not gonna\n get upvotes though..lmao");
        bl5.setBackground(new Background(new BackgroundFill(Color.YELLOWGREEN,
                null, null)));


        BubbledLabel bl6 = new BubbledLabel(BubbleSpec.FACE_RIGHT_CENTER);
        bl6.relocate(165, 300);
        bl6.setText("Man! shut up!!.. what you know about\n upvotes.");
        bl6.setBackground(new Background(new BackgroundFill(Color.GREENYELLOW,
                null, null)));


        p.getChildren().addAll(bl1,bl2,bl3,bl4,bl5,bl6);

    } catch(Exception e) {
        e.printStackTrace();
    }
}

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

}

这是结果

是制造泡沫chat-（形尺寸图）最好的方法是什么？

Is is the best way to create a bubble chat-(shaped size figure) ?

• 是的！

我怎样才能完善这个不依赖于计算宽度和做垫，或者我住在一起吗？

How can i perfect this without relying on calculating widths and doing paddings, or i live with it ?

• 好下载 ChatBubble库 ，并使用 BubbleLabel 为您的文本，并让它担心加入气泡

• Well download ChatBubble library and use BubbleLabel as your Text and let it worry about adding bubbles

这篇关于JavaFX的聊天泡泡完美的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！