Inconsistent/Inaccurate textWidth and textHeight on TextField

Haxe
#1

I’m making a TextField and drawing it to BitmapData because scaling/tweening the latter looks way smoother. But I make calculations based on textWidth and the results often appear wrong. The value of textWidth isn’t the same any two times I run this code and the result is the text is getting clipped. Am I doing something wrong here?

        var textFormat:TextFormat = new TextFormat();
        textFormat.align = TextFormatAlign.LEFT;
        textFormat.size = 50;
        textFormat.color = 0xffffff;
        textFormat.font = Assets.getFont('fonts/' + textStyle.font).fontName;

        textField = new TextField();
        textField.text = text;
        textField.defaultTextFormat = textFormat;
        textField.autoSize = TextFieldAutoSize.LEFT;
        textField.selectable = false;
           
        textField.width = textField.textWidth;
        textField.height = textField.textHeight;
        
        // Max the size
        var wScale = stage.stageWidth / (textField.textWidth);
        var hScale = stage.stageHeight / (textField.textHeight);
        multiplier = Math.min(wScale, hScale);    
        
        // Draw the text to the bitmap
        var bitmapData:BitmapData = new BitmapData(Std.int(stage.stageWidth), Std.int(stage.stageHeight));
        bitmapData.fillRect(new Rectangle(0, 0, bitmapData.width, bitmapData.height), 0x000000);
        bitmapData.draw(textField, new Matrix(multiplier, 0, 0, multiplier));
        
        bitmap = new Bitmap(bitmapData);
        
        addChild(bitmap);
        bitmap.x = bitmap.y = 0;
#2

Which version of openfl are you using? What target are you targeting?

If the answer is openfl 4 and target is anything other than flash, be aware that BitmapData currently disregards matrix parameter

#3

It’s 4.0.3 but it doesn’t appear to be disregarding it. If I leave it out, the text is tiny and not clipped at all. It definitely has an effect.

#4

Trying C++ and neko, same results

#5

How does this behave in Flash?

I think the problem here (I’m not sure if it’s our problem, or just how the API is supposed to work) is that you are resizing the TextField when you set width and height

textField.width = textField.textWidth;
textField.height = textField.textHeight;

textField.width and height are not the same as textWidth and textHeight … it is usually 4 pixels larger, or more if you size the TextField up. This is probably the cause of your TextField shrinking

#6

I switched it back to just directly displaying the TextField and found that it was smooth enough but had the same problem. I removed the part where I’m setting width and height (I only set scaleX and scaleY) and still having the problem. It does seem to vary with the font. Some are fine and some are off-center or clipped. Are there known issues with OpenFL’s font handling?

#7

Does it look correct if you add it to the display list directly? If so, how does it look if you omit the matrix property when calling bitmapData.draw?

#8

That’s what I mean. I changed to code to no longer use bitmap and just add directly to the displaylist (addChild). So there’s no longer a matrix property. Only me setting scaleX and scaleY of the TextField.

    public function resize():Void
    {
        var textWidth = textField.textWidth;
        var textHeight = textField.textHeight;
        var parentWidth = stage.stageWidth;
        var parentHeight = stage.stageHeight;
        
        // Max the size
        var wScale = parentWidth / (textWidth);
        var hScale = parentHeight / (textHeight);
        multiplier = Math.min(wScale, hScale);
        
        //textField.width = textWidth;
        //textField.height = textHeight;
        textField.scaleX = textField.scaleY = multiplier;
    }
    
    function drawText():Void
    {
        var textFormat:TextFormat = new TextFormat();
        textFormat.align = TextFormatAlign.LEFT;
        textFormat.size = 50;
        textFormat.color = 0xffffff;
        textFormat.font = Assets.getFont('fonts/' + textStyle.font).fontName;

        textField = new TextField();
        textField.htmlText = text;
        textField.defaultTextFormat = textFormat;
        textField.selectable = false;
        textField.autoSize = TextFieldAutoSize.LEFT;
        
        addChild(textField);
    }
#9

Do all the fonts look correct without scale, or is it an issue at any resolution?

#10

It looks like it happens at whatever resolution. I scale it based on the stage size but if I don’t set scaleX and scaleY it still happens.

#11

How bad is the clipping? My team has had minor issues with TextField bound calculations since Flash days (we continue to use work arounds). But I am taking pretty small margins. tf.border = true; may be helpful while debugging in that case.

Quick question : why are you using autoSize but also setting the width and height manually?

    textField.autoSize = TextFieldAutoSize.LEFT;
    // ....
    textField.width = textField.textWidth;
    textField.height = textField.textHeight;
#12

I removed that part of the code where I was setting width and height. It looks like that wasn’t doing anything anyway.