Question

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

我在Android 8.1模拟器上使用带有本地脚本（tns --version：5.4.0）和打字稿的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;

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

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

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

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

您无法在<WebView style={styles.WebViewStyle} userAgent={DeviceInfo.getUserAgent()} automaticallyAdjustContentInsets={false} source={{ uri: 'MY_URL' }} onLoad={() => this.hideSpinner()} />事件之外替换PlaceHolder的nativeView。您应该从PlaceHolder获取现有的nativeView，然后仅更新位图。

creatingView

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

1 个答案: