Jump to content

Text with border or bold


pichou
 Share

Recommended Posts

Hi, 

I am using BABYLON.GUI in my project and sometimes the text is not really readable when displayed with no background.

I want to add a text shadow or at least bold the text so that you can correctly read it. But I didn't find a way to do that with BABYLON.GUI.

Do you have an idea?

Thanks, Pichou

Link to comment
Share on other sites

Of course! So simple I regret I haven't thought to do that! Thanks @johnK
I gave me the idea to just rise the fontsize of the replicated text to have a border everywhere : https://www.babylonjs-playground.com/#XCPP9Y#408
 But there is a horizontal spacing between letters and I didn't find any property to avoid that.
 

Link to comment
Share on other sites

Hi @pichou 
Here's another method using context.strokeText, it does however require overwriting the _drawText function.

https://www.babylonjs-playground.com/#XCPP9Y#410

BABYLON.GUI.TextBlock.prototype._drawText = function (text, textWidth, y, context) {
        var width = this._currentMeasure.width;
        var x = 0;
        switch (this._textHorizontalAlignment) {
            case BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT:
                x = 0;
                break;
            case BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT:
                x = width - textWidth;
                break;
            case BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER:
                x = (width - textWidth) / 2;
                break;
        }
        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
            context.shadowColor = this.shadowColor;
            context.shadowBlur = this.shadowBlur;
            context.shadowOffsetX = this.shadowOffsetX;
            context.shadowOffsetY = this.shadowOffsetY;
        }
        if(this.drawOutline){
            context.strokeStyle = (this.outlineColor ? this.outlineColor : "black");
            context.lineWidth = (this.outlineWidth ? this.outlineWidth : 5);
            context.strokeText(text, this._currentMeasure.left + x, y);
        }
		
        context.fillText(text, this._currentMeasure.left + x, y);
    };


var text1 = new BABYLON.GUI.TextBlock();
    text1.text = "Hello world";
    text1.color = "white";
    text1.fontSize = 24;

    text1.drawOutline = true;
    text1.outlineColor = "black";
    text1.outlineWidth = 4;

 

Link to comment
Share on other sites

  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...