如何使用 android 上的 vue-nativescript 更改在 canvas 上绘制的位图？

Question

我想在位图上绘制一个矩形，然后在用户单击按钮时更改该位图。这是我的 pastebin example。我无法将示例 PNG 和 tns-core-modules 上传到 Playground，因此很遗憾您无法执行此操作。

我在 android 8.1 模拟器上使用带有 nativescript (tns --version: 5.4.0) 和 typescript 的 vue-native 应用程序。

为了绘制形状，我使用了基于 Tiago Alves 的博客 post How to create a canvas in nativescript and a Playground example 的占位符组件。占位符使用 @creatingView="createCanvasView" 创建视图。在这种方法中，我创建了一个 ImageView 和 android 本机 canvas let canvas = new android.graphics.Canvas(bitmap)。我可以使用 canvas.drawBitmap(picture1) 和 canvas.drawRect(...) 绘制位图和矩形。最后我将这个视图绘制到组件中。

nativeView.setImageBitmap(bitmap);
event.view = nativeView;

现在我的问题开始了。当用户按下调用 @tap="changePicture1" 的按钮时，我想用 picture2 替换 picture1。

理想情况下，我将能够检索 canvas、识别资产（矩形、位图...）、更改位图并重绘。我不知道该怎么做。

作为一个更简单的案例，我尝试更改 Image 的图片。在这里我得到一个视图并将其设置为新图像 - 这有效：

changePicture1() {
let picture1 = < Image > topmost().currentPage.getViewById(
                'myCanvasView');
picture1.imageSource = this.$store.state.image;
}

我还可以通过绑定更改图像：

changePicture2() {
this.picUrl =  "~/assets/picture2.png"
}

尝试在 canvas 中执行此操作是我感到困惑的地方。这里有些尝试更改 picUrl 然后重绘 canvas.

changePicture3() {
this.pic = this.$store.state.projects[0].image;
// Redraw the view to update new bitmap on canvas
let picView = topmost().currentPage;
picView.android.invalidate();
// let nv = <ViewBase> this.$refs.Placeholder; 
// nv.nativeView.invalidate()
// picLane.android.invalidate()
this.picView = this.$store.state.image;
}

Answer 1

您不能在 creatingView 事件之外替换 PlaceHolder 的 nativeView。您应该从 PlaceHolder 获取现有的 nativeView，然后只更新位图。

// this.$refs.CanvasViewRef returns Vue object
// this.$refs.CanvasViewRef.nativeView returns the actual Placeholder
const nativeView = this.$refs.CanvasViewRef.nativeView.nativeView; 

...
...

nativeView.setImageBitmap(bitmap);

如何使用 android 上的 vue-nativescript 更改在 canvas 上绘制的位图？

How to change a bitmap drawn on a canvas with vue-nativescript on android?

android-canvas

typescript

nativescript

nativescript-vue