使用 NativeScript 6 + VueJS 在 Canvas 上绘图

Posted 2023-04-13

【中文标题】使用 NativeScript 6 + VueJS 在 Canvas 上绘图

【英文标题】：Draw on Canvas with NativeScript 6 + VueJS

【发布时间】：2021-08-10 06:24:49

【问题描述】：

我有一个正常工作的 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"   @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]'

相反，如果我“导入 Canvas from”，那么我会在上述对象中获得 'Canvas' 函数，然后我会收到错误...

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

我怎样才能画一些东西？

【参考方案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