Procházet zdrojové kódy

GUI - Automatically measuring TextBlock size

The goal is to have TextBlocks automatically set their own width and height according to their measured text size, instead of having to manually set it for each case - which seems tedious and redundant to me.

It can be optional, but working quite a lot with GUI lately I can say this will make TextBlocks much easier and dynamic.

It's very rough as you can see, but the idea is calculating the width and height of a TextBlock every time it's rendered, and setting it to the control.

Issues:

1) Setting width and height at the moment sets the control as dirty which results in infinitely re-rendering it.
2) Doesn't seem to scale properly with idealWidth.
3) Need to calculate the height, probably something like this?

https://stackoverflow.com/questions/1134586/how-can-you-find-the-height-of-text-on-an-html-canvas

A different way to make it optional is to provide a measureText() function in TextBlock which returns accurately measured width and height, then the user can choose if/how to use this information.

I'm using this code to test the TextBlock's borders:
http://www.babylonjs-playground.com/#JR21MP#2
Royi Bernthal před 8 roky
rodič
revize
203d50b65a
1 změnil soubory, kde provedl 11 přidání a 0 odebrání
  1. 11 0
      gui/src/controls/textBlock.ts

+ 11 - 0
gui/src/controls/textBlock.ts

@@ -86,6 +86,7 @@ module BABYLON.GUI {
                     break;
             }
 
+
             context.fillText(text, this._currentMeasure.left + x, y);
         }
 
@@ -165,10 +166,20 @@ module BABYLON.GUI {
 
             rootY += this._currentMeasure.top;
 
+            var maxLineWidth: number = 0;
+
             for (var line of this._lines) {
                 this._drawText(line.text, line.width, rootY, context);
                 rootY += this._fontOffset.height;
+
+                if (line.width > maxLineWidth) maxLineWidth = line.width;
             }
+
+            this.width = maxLineWidth + 'px';
+            this.height = rootY + this._fontOffset.height + 'px'; //TODO: need to actually measure height
+
+            //console.log('width', maxLineWidth);
+            //console.log('height', rootY, this._fontOffset.height);
         }
     }
 }