Draw on Canvas with NativeScript 6 + VueJS

Question

I have a working NS6-Vue app and I want to add some custom particles via canvas. I may not be creating the Canvas object correctly, and I cannot find examples of NS6 + VueJS + Canvas. "nativescript-canvas" plug-in is version 3.0.10.

Here's my test .vue file:

    <Page backgroundColor="black" xmlns:canvas="nativescript/canvas" @loaded="onPageLoaded">
        <GridLayout>
            <Canvas id="canvas" width="200" height="200" @canvasReady="onCanvasLoaded" @loaded="onCanvasLoaded" backgroundColor="red" />
        </GridLayout>
    </Page>
</template>

<script>
    const Canvas = require("nativescript-canvas");
    // import { Canvas } from "nativescript-canvas";

    export default {
        components: {
            Canvas
        },

        methods: {
            onCanvasLoaded(args) {
                let canvas = args.object;

                console.log("canvas loaded: "+canvas);
            },

            onCanvasReady(args) {
                let canvas = args.object;

                console.log("canvas ready: "+canvas);
            },

            onPageLoaded()
            {
                console.log("page loaded");
                console.log("Canvas: "+Canvas.Canvas);
                this.printProps(Canvas, true);
            },

            printProps(obj, inherited)
            {
                for(let key in obj){
                    if(obj.hasOwnProperty(key) || inherited){
                        let val = obj[key];

                        if(typeof(val) == "function")
                            console.log("  "+key+" = [function]");
                        else
                            console.log("  "+key+" = "+val);
                    }
                }
            }
        }
    };
</script>

Doing "const Canvas = require" gives me an object/module containing various "object" functions like 'Canvas', 'CanvasBase', 'CanvasView', as well as some properties like 'hardwareAcceleratedProperty', etc. and I get no error but nothing shows up. Neither "canvasReady" or "loaded" signals fire. Here's the output...

JS: 'Canvas: function Canvas(imageOrWidth, height) {
JS:     this._shouldReleaseBitmap = false;
JS: 
JS:     if (imageOrWidth) {
JS:       if (imageOrWidth instanceof image_source_1.ImageSource) {
JS:         this._bitmap = imageOrWidth.android;
JS:       } else if (imageOrWidth instanceof android.graphics.Bitmap) {
JS:         this._bitmap = imageOrWidth;
JS:       } else {
JS:         this._shouldReleaseBitmap = true;
JS:         this._bitmap = android.graphics.Bitmap.createBitmap(imageOrWidth, height, android.graphics.Bitmap.Config.ARGB_8888);
JS:       }
JS: 
JS:       if (!this._bitmap.isMutable()) {
JS:         this._shouldReleaseBitmap = true;
JS:         this._bitmap = this._bitmap.copy(android.graphics.Bitmap.Config.ARGB_8888, true);
JS:       }
JS: 
JS:       this._native = new android.graphics.Canvas(this._bitmap);
JS:     }
JS: 
JS:     var proxy = new Proxy(this, this);
JS:     return proxy;
JS:   }'
JS: '  arrayoNativeArray = [function]'
JS: '  parseDashEffect = [function]'
JS: '  Paint = [function]'
JS: '  DashPathEffect = [function]'
JS: '  Path = [function]'
JS: '  RadialGradient = [function]'
JS: '  LinearGradient = [function]'
JS: '  StaticLayout = [function]'
JS: '  createImage = [function]'
JS: '  releaseImage = [function]'
JS: '  Canvas = [function]'
JS: '  CanvasView = [function]'
JS: '  Cap = [function]'
JS: '  Direction = [function]'
JS: '  DrawFilter = [function]'
JS: '  FillType = [function]'
JS: '  Join = [function]'
JS: '  Matrix = [function]'
JS: '  Op = [function]'
JS: '  PathEffect = [function]'
JS: '  Rect = [function]'
JS: '  RectF = [function]'
JS: '  Style = [function]'
JS: '  TileMode = [function]'
JS: '  FontMetrics = [function]'
JS: '  Align = [function]'
JS: '  LayoutAlignment = [function]'
JS: '  PorterDuffMode = [function]'
JS: '  PorterDuffXfermode = [function]'
JS: '  createRect = [function]'
JS: '  createRectF = [function]'
JS: '  cachedProperty = [object Object]'
JS: '  hardwareAcceleratedProperty = [object Object]'
JS: '  densityProperty = [object Object]'
JS: '  DEFAULT_SCALE = 3'
JS: '  CanvasBase = [function]'
JS: '  _Ctor = [object Object]'

Instead, if I "import { Canvas } from" then I get the 'Canvas' function within the above object and I get the error...

System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3762)
System.err:     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3938)

How can I get something drawing?

Answer 1

I have gotten this to work with help from the @nativescript/canvas plug-in author. However, it breaks on Android when switching tab pages via BottomNavigation.

There is a specific version for NS6:

npm i @nativescript/canvas@ver6

In order to use in .vue XML, I put this in "app.js":

const Canvas = require("@nativescript/canvas");
Vue.registerElement('Canvas', () => Canvas.Canvas);

Alternately, in order to create canvases programmatically instead of by XML, I did not add the above to "app.js" but instead imported in my .vue file:

import { Canvas, ImageAsset } from "@nativescript/canvas";
let canvas = new Canvas(args);  //e.g. in a 'loaded' signal

In either case, there is a bug when tabbing pages: https://github.com/NativeScript/canvas/issues/41