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

Question

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

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

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

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

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

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

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

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

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

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

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

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