feat: Paint letterSpacing support

Author: farfromrefug

plugin/platforms/android/native-api-usage.json

@@ -1,5 +1,30 @@
 {
     "uses": [
-        "java.nio:ByteOrder*","com.akylas.canvas*:*", "android.graphics:Canvas*", "android.graphics:Matrix*", "android.graphics:DashPathEffect*", "android.graphics:LinearGradient*", "android.graphics:RadialGradient*",  "android.graphics:PorterDuff*",  "android.graphics:PorterDuffColorFilter*",  "android.graphics:PorterDuffXfermode*",  "android.graphics:PointF*",  "android.text:Layout*",  "android.text.Layout:Alignment*",  "android.graphics:PathEffect*",  "android.graphics:DrawFilter*",  "android.graphics.Paint*:*",  "android.graphics:Paint*",  "android.graphics:RecordingCanvas*",  "android.graphics:Path*", "android.graphics.Path*",  "android.graphics:Rect*",  "android.graphics:RectF*", "android.graphics:Shader*", "android.graphics.Shader*:*", "android.graphics:Region*", "android.graphics.Region:Op*"
+        "java.nio:ByteOrder*",
+        "com.akylas.canvas*:*",
+        "android.graphics:Canvas*",
+        "android.graphics:Matrix*",
+        "android.graphics:DashPathEffect*",
+        "android.graphics:LinearGradient*",
+        "android.graphics:RadialGradient*",
+        "android.graphics:PorterDuff*",
+        "android.graphics:PorterDuffColorFilter*",
+        "android.graphics:PorterDuffXfermode*",
+        "android.graphics:PointF*",
+        "android.text:Layout*",
+        "android.text.Layout:Alignment*",
+        "android.graphics:PathEffect*",
+        "android.graphics:DrawFilter*",
+        "android.graphics.Paint*:*",
+        "android.graphics:Paint*",
+        "android.graphics:RecordingCanvas*",
+        "android.graphics:Path*",
+        "android.graphics.Path*",
+        "android.graphics:Rect*",
+        "android.graphics:RectF*",
+        "android.graphics:Shader*",
+        "android.graphics.Shader*:*",
+        "android.graphics:Region*",
+        "android.graphics.Region:Op*"
     ]
 }

src-native/android/build.gradle

@@ -4,8 +4,7 @@ buildscript {
     // ext.kotlin_version = '1.2.70'
     repositories {
         google()
-        jcenter()
-    }
+        }
     dependencies {
         classpath 'com.android.tools.build:gradle:7.+'
     }
@@ -14,8 +13,7 @@ buildscript {
 allprojects {
     repositories {
         google()
-        jcenter()
-    }
+        }
 }
 task clean(type: Delete) {
     delete rootProject.buildDir

src/canvas.android.ts

@@ -1,4 +1,4 @@
-import { CSSType, Color, Font, ImageSource, View } from '@nativescript/core';
+import { CSSType, Color, Font, ImageSource, View, Device } from '@nativescript/core';
 import { FontStyle, FontWeight } from '@nativescript/core/ui/styling/font';
 import { android as androidApp } from '@nativescript/core/application';
 import lazy from '@nativescript/core/utils/lazy';
@@ -9,6 +9,7 @@ import { CanvasBase, hardwareAcceleratedProperty } from './canvas.common';
 declare global {
     const __runtimeVersion: string;
 }
+const sdkVersion = lazy(() => parseInt(Device.sdkVersion));
 
 export * from './canvas.common';
 export {
@@ -267,6 +268,8 @@ class Canvas extends ProxyClass<android.graphics.Canvas> {
         } else if (methodName === 'drawView') {
             drawViewOnCanvas(native, args[0], args[1]);
             return true;
+        } else if (methodName === 'setLetterSpacing' && sdkVersion() < 21) {
+            return true;
         }
     }
     getImage() {

src/canvas.ios.ts

@@ -857,6 +857,7 @@ export class Paint implements IPaint {
     antiAlias = true;
     dither;
     alpha = 255;
+    letterSpacing: number;
     currentContext: any;
     shadowLayer?: {
         radius: number;
@@ -1096,6 +1097,16 @@ export class Paint implements IPaint {
         this.mFont = this.font.withFontSize(textSize);
         this.mTextAttribs = null;
     }
+    getLetterSpacing() {
+        return this.letterSpacing;
+    }
+    setLetterSpacing(spacing) {
+        if (this.letterSpacing === spacing) {
+            return;
+        }
+        this.letterSpacing = spacing;
+        this.mTextAttribs = null;
+    }
     get color(): Color | number | string {
         return this.mColor;
     }
@@ -1219,12 +1230,15 @@ export class Paint implements IPaint {
     }
     getDrawTextAttribs() {
         if (!this.mTextAttribs) {
-            this.mTextAttribs = NSMutableDictionary.dictionaryWithObjectsForKeys([this.getUIFont()], [NSFontAttributeName]);
+            const iosFont = this.getUIFont();
+            this.mTextAttribs = NSMutableDictionary.dictionaryWithObjectsForKeys([iosFont], [NSFontAttributeName]);
             const color = this.getUIColor();
-            this.mTextAttribs = NSMutableDictionary.dictionaryWithObjectsForKeys([this.getUIFont()], [NSFontAttributeName]);
             if (color) {
                 this.mTextAttribs.setObjectForKey(color, NSForegroundColorAttributeName);
             }
+            if (this.letterSpacing !== undefined) {
+                this.mTextAttribs.setObjectForKey(this.letterSpacing * iosFont.pointSize, NSKernAttributeName);
+            }
             if (this.align === Align.CENTER) {
                 const paragraphStyle = NSMutableParagraphStyle.new();
                 paragraphStyle.alignment = NSTextAlignment.Center;
@@ -1925,7 +1939,6 @@ export class Canvas implements ICanvas {
             x = params[1];
             y = params[2];
         }
-        // const attribs = paint.getDrawTextAttribs();
         // const nsstring = NSString.stringWithUTF8String(text);
         // const attrString = NSAttributedString.alloc().initWithStringAttributes(text.replace(/\n/g, ' '), attribs);
         let offsetx = x;
@@ -1948,7 +1961,10 @@ export class Canvas implements ICanvas {
         }
         const font = paint.getUIFont();
         const color = paint.getUIColor();
-        if (text instanceof NSAttributedString) {
+        if (paint.letterSpacing !== undefined) {
+            const attribs = paint.getDrawTextAttribs();
+            UIDrawingText.drawStringXYWithAttributes(text, offsetx, offsety - font.ascender, attribs);
+        } else if (text instanceof NSAttributedString) {
             UIDrawingText.drawAttributedStringXYFontColor(text, offsetx, offsety - font.ascender, font, color);
         } else {
             UIDrawingText.drawStringXYFontColor(text, offsetx, offsety - font.ascender, font, color);