fix(android): rewrote text size handling. It now seems to be consistent with TextView drawing (with very slight difference)

Author: farfromrefuge

packages/ui-canvas/platforms/android/java/com/akylas/canvas/CanvasView.java

@@ -29,12 +29,8 @@ protected void dispatchDraw(Canvas canvas) {
         }
     }
 
-    private static float FONT_SIZE_FACTOR = -1;
-    public static float getFontSizeFactor(Context context) {
-        if (FONT_SIZE_FACTOR == -1) {
-            FONT_SIZE_FACTOR = android.util.TypedValue.applyDimension(
-            android.util.TypedValue.COMPLEX_UNIT_SP, 1, context.getResources().getDisplayMetrics());
-        }
-        return FONT_SIZE_FACTOR;
+    public static float getFontSizeFactor(Context context, float textSize) {
+        return android.util.TypedValue.applyDimension(
+            android.util.TypedValue.COMPLEX_UNIT_SP, textSize, context.getResources().getDisplayMetrics());
     }
 }

packages/ui-canvas/platforms/android/java/com/akylas/canvas/StaticLayout.java

@@ -10,6 +10,7 @@
 import android.text.TextPaint;
 import android.text.TextUtils;
 import java.lang.CharSequence;
+import android.util.Log;
 
 public class StaticLayout {
 
@@ -32,6 +33,9 @@ public static android.text.StaticLayout.Builder createStaticLayoutBuilder(CharSe
     public static android.text.StaticLayout createStaticLayout(CharSequence source, TextPaint paint, int width,
             Layout.Alignment align, float spacingmult, float spacingadd, boolean includepad, TextUtils.TruncateAt ellipsize, int ellipsizedWidth, int height) {
         android.text.StaticLayout staticLayout = null;
+        // we set our custom flag to discover it in FontSizeSpan
+        Log.d("JS", "createStaticLayout " + paint + " " + paint.getFlags());
+        paint.setFlags(paint.getFlags() | 2048);
         if (Build.VERSION.SDK_INT >= 23) {
             staticLayout = createStaticLayoutBuilder(source, paint, width, align, spacingmult, spacingadd, includepad, ellipsize, ellipsizedWidth).build();
         } else {
@@ -64,7 +68,7 @@ public static android.text.StaticLayout createEllipsizeStaticLayout(android.text
             float lineHeight = staticLayout.getLineBottom(i) - staticLayout.getLineTop(i);
             float totalHeight = lineHeight * lineCount;
             if (maxLines > 1) {
-                while (totalHeight > maxHeight && maxLines > 0) {
+                while (totalHeight > maxHeight && maxLines > 1) {
                     maxLines--;
                     i++;
                     lineHeight = staticLayout.getLineBottom(i) - staticLayout.getLineTop(i);

src/ui-canvas/canvas.android.ts

@@ -99,6 +99,8 @@ class ProxyClass<T> {
     }
 }
 
+let FONT_SIZE_FACTOR;
+let SCREEN_DENSITY;
 class Canvas extends ProxyClass<android.graphics.Canvas> {
     mBitmap: android.graphics.Bitmap;
     mShouldReleaseBitmap = false;
@@ -153,6 +155,18 @@ class Canvas extends ProxyClass<android.graphics.Canvas> {
         } else if (methodName === 'drawView') {
             drawViewOnCanvas(native, args[0], args[1]);
             return true;
+        } else if (methodName === 'drawText') {
+            // TODO move that to native
+            const paint = args[args.length - 1];
+            const textSize = paint.getTextSize();
+            if (!FONT_SIZE_FACTOR) {
+                SCREEN_DENSITY = Screen.mainScreen.scale;
+                FONT_SIZE_FACTOR = com.akylas.canvas.CanvasView.getFontSizeFactor(Utils.android.getApplicationContext(), 1);
+            }
+            paint.setTextSize((textSize * FONT_SIZE_FACTOR) / SCREEN_DENSITY);
+            native[methodName](...args);
+            paint.setTextSize(textSize);
+            return true;
         }
     }
     getImage() {
@@ -166,7 +180,6 @@ class Canvas extends ProxyClass<android.graphics.Canvas> {
     }
 }
 
-let FONT_SIZE_FACTOR;
 export class Paint extends ProxyClass<android.graphics.Paint> {
     mNative: android.graphics.Paint;
     mFontInternal: Font;
@@ -197,12 +210,6 @@ export class Paint extends ProxyClass<android.graphics.Paint> {
                 return;
             }
             args[0] = createColorParam(args[0]);
-        } else if (methodName === 'setTextSize') {
-            // we apply a small factor so that font size is the same as in TextView
-            if (!FONT_SIZE_FACTOR) {
-                FONT_SIZE_FACTOR = com.akylas.canvas.CanvasView.getFontSizeFactor(Utils.android.getApplicationContext()) / Screen.mainScreen.scale;
-            }
-            args[0] *= FONT_SIZE_FACTOR;
         } else if (methodName === 'setTypeface') {
             if (args[0] instanceof Font) {
                 this.mFontInternal = args[0];
@@ -219,7 +226,7 @@ export class Paint extends ProxyClass<android.graphics.Paint> {
             args[3] = createColorParam(args[3]);
         }
     }
-    setTextSize(size){}
+    setTextSize(size) {}
     setFont(font: Font) {
         this.mFontInternal = font;
         if (this.handlesFont) {

src/ui-canvas/typings/android.d.ts

@@ -18,7 +18,7 @@ declare namespace com {
             export class CanvasView extends globalAndroid.view.View {
                 sizeChangedListener?: SizeChangedListener;
                 drawListener?: DrawListener;
-                static getFontSizeFactor(context: globalAndroid.content.Context): number;
+                static getFontSizeFactor(context: globalAndroid.content.Context, size: number): number;
             }
             export class SizeChangedListener {
                 constructor(impl?: { onSizeChanged(w: number, h: number, oldw: number, oldh: number) });

src/ui-canvaslabel/canvaslabel.common.ts

@@ -13,6 +13,7 @@ import {
     Observable,
     ObservableArray,
     PercentLength,
+    Screen,
     Utils,
     View,
     profile
@@ -56,7 +57,8 @@ export type VerticalTextAlignment = 'initial' | 'top' | 'middle' | 'bottom' | 'c
 // const debugPaint = new Paint();
 // debugPaint.style = Style.STROKE;
 // debugPaint.color = 'red';
-
+let FONT_SIZE_FACTOR;
+let SCREEN_DENSITY;
 export abstract class SpanBase extends Shape {
     static get isSpan() {
         return true;
@@ -228,6 +230,10 @@ export abstract class SpanBase extends Shape {
             paint.setFontFamily(fontFamily);
             paint.setFontWeight(fontweight);
             paint.setFontStyle(fontstyle);
+            if (__ANDROID__ && !FONT_SIZE_FACTOR) {
+                SCREEN_DENSITY = Screen.mainScreen.scale;
+                FONT_SIZE_FACTOR = com.akylas.canvas.CanvasView.getFontSizeFactor(Utils.android.getApplicationContext(), 1);
+            }
             paint.textSize = fontSize;
             cachedPaint = paintCache[cacheKey] = paint;
             paintFontCache[fontKey] = paint;