使用 NativeScript 6 + VueJS 在 Canvas 上绘图

Question

我有一个正在运行的 NS6-Vue 应用程序，我想通过 canvas 添加一些自定义粒子。我可能没有正确创建 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”给我一个 object/module 包含各种“对象”函数，如 '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]'

相反，如果我“从”导入 { Canvas }，那么我会在上述对象中得到 '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 切换标签页时，它会在 Android 上中断。

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

无论哪种情况，在跳转页面时都会出现错误： https://github.com/NativeScript/canvas/issues/41

使用 NativeScript 6 + VueJS 在 Canvas 上绘图

Draw on Canvas with NativeScript 6 + VueJS

canvas

nativescript

nativescript-vue