Merge pull request #67 from nativescript-community/fix/android-pixel-scale

fix(ui-canvas): Use screen scale for android canvas scaling

Author: farfromrefug

src/ui-canvas/canvas.android.ts

@@ -33,9 +33,9 @@ function createColorParam(param) {
 function drawViewOnCanvas(canvas: android.graphics.Canvas, view: View, rect?: android.graphics.Rect) {
     if (!view.nativeView) {
         const activity = Application.android.foregroundActivity;
-        (view as any)._setupAsRootView(activity);
-        (view as any)._isAddedToNativeVisualTree = true;
-        (view as any).callLoaded();
+        view._setupAsRootView(activity);
+        view._isAddedToNativeVisualTree = true;
+        view.callLoaded();
     }
     if (view.nativeView) {
         if (rect) {
@@ -46,7 +46,7 @@ function drawViewOnCanvas(canvas: android.graphics.Canvas, view: View, rect?: an
             canvas.save();
             canvas.translate(rect.left, rect.top);
         }
-        view.nativeView.draw(canvas as any);
+        view.nativeView.draw(canvas);
         if (rect) {
             canvas.restore();
         }
@@ -287,7 +287,7 @@ export class Paint extends ProxyClass<android.graphics.Paint> {
         }
     }
     set color(color) {
-        (this as any).setColor(color);
+        this['setColor'](color);
     }
     set strokeWidth(value: number) {
         this.mNative.setStrokeWidth(value);

src/ui-canvas/canvas.ios.ts

@@ -1762,9 +1762,9 @@ export class Canvas implements ICanvas {
     @paint
     drawView(view: View, rect?: Rect) {
         if (!view.nativeView) {
-            (view as any)._setupAsRootView({});
-            (view as any)._isAddedToNativeVisualTree = true;
-            (view as any).callLoaded();
+            view._setupAsRootView({});
+            view._isAddedToNativeVisualTree = true;
+            view.callLoaded();
         }
         if (view.nativeView) {
             const uiView = view.nativeView as UIView;
@@ -2233,13 +2233,13 @@ export class LinearGradient {
                 }
 
                 const cgColors = this.colors.map((c) => (c instanceof Color ? c : new Color(c)).ios.CGColor);
-                this.mGradient = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), cgColors as any, stopsRef);
+                this.mGradient = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), cgColors, stopsRef);
                 if (this.mGradient) {
                     CFRetain(this.mGradient);
                 }
             } else {
                 const cgColors = [this.colors, this.stops].map((c) => (c instanceof Color ? c : new Color(c)).ios.CGColor);
-                this.mGradient = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), cgColors as any, null);
+                this.mGradient = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), cgColors, null);
                 if (this.mGradient) {
                     CFRetain(this.mGradient);
                 }

src/ui-canvas/index.android.ts

@@ -1,6 +1,6 @@
 import { CSSType, Utils } from '@nativescript/core';
 import { Canvas, Paint } from './canvas';
-import { CanvasBase, hardwareAcceleratedProperty } from './index.common';
+import { CanvasBase, DEFAULT_SCALE, hardwareAcceleratedProperty } from './index.common';
 import { sdkVersion } from './canvas.common';
 
 export * from './canvas';
@@ -59,19 +59,22 @@ export class CanvasView extends CanvasBase {
         this.nativeViewProtected.drawListener = new com.akylas.canvas.DrawListener({
             onDraw: (canvas: android.graphics.Canvas) => {
                 const drawFrameRate = this.drawFrameRate;
+                const scale = DEFAULT_SCALE;
                 let startTime;
+
                 if (drawFrameRate) {
                     startTime = Date.now();
                 }
-                const scale = this.density;
+
                 canvas.save();
-                canvas.scale(scale, scale); // always scale to device density to work with dp
+                canvas.scale(scale, scale); // always scale to device screen density to work with dip
                 this.augmentedCanvas.setNative(canvas);
                 this.onDraw(this.augmentedCanvas as any);
+
                 if (drawFrameRate) {
                     const end = Date.now();
                     if (!this.frameRatePaint) {
-                        this.frameRatePaint = new Paint() as any;
+                        this.frameRatePaint = new Paint();
                         this.frameRatePaint.color = 'blue';
                         this.frameRatePaint.setTextSize(12);
                     }