使用NativeScript 6+ VueJS在画布上绘制

Question

我有一个工作的NS6-Vue应用程序，我想通过画布添加一些自定义粒子。我可能没有正确创建Canvas对象，并且我找不到NS6 + VueJS + Canvas的示例。"nativescript-canvas“插件的版本是3.0.10。

下面是我的测试.vue文件：

    <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>

执行"const Canvas = require“得到一个对象/模块，其中包含各种”对象“函数，如'Canvas'，'CanvasBase'，'CanvasView'，以及一些属性，如'hardwareAcceleratedProperty‘等，我没有得到任何错误，但什么也没有显示出来。"canvasReady“或"loaded”信号都不会触发。这是输出...

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]'

相反，如果我"import { Canvas } from“，那么我在上面的对象中得到了'Canvas‘函数，并且我得到了错误...

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

我怎样才能画出一些东西呢？

Answer 1

在@nativescript/canvas插件作者的帮助下，我完成了这项工作。然而，当通过BottomNavigation切换标签页时，它在安卓上崩溃了。

NS6有一个特定的版本：

npm i @nativescript/canvas@ver6

为了在.vue XML中使用，我将其放在“app.js”中：

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

或者，为了以编程方式创建画布，而不是通过XML，我没有将上面的代码添加到"app.js“中，而是导入到我的.vue文件中：

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

在这两种情况下，使用case键切换页面时都会出现一个错误：https://github.com/NativeScript/canvas/issues/41