Quellcode durchsuchen

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 vor 8 Jahren
Ursprung
Commit
203d50b65a
1 geänderte Dateien mit 11 neuen und 0 gelöschten Zeilen
  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);
         }
     }
 }