Как изменить растровое изображение, нарисованное на холсте, с помощью vue-nativescript на Android?

Question

Я хочу нарисовать прямоугольник на растровом изображении и изменить его позже, когда пользователь нажимает кнопку. Вот мой пример пастбина. Я не смог загрузить образец PNG и tns-core-modules на Playground, поэтому вы не можете выполнить это, к сожалению.

Я использую приложение vue-native с nativescript (tns --version: 5.4.0) и машинописью на эмуляторе Android 8.1.

Для рисования фигур я использую компонент Placeholder на основе поста в блоге Как создать холст в nativescript и пример Playground от Tiago Alves. Заполнитель создает представление с @creatingView="createCanvasView", В этом методе я создаю ImageView и андроид родной холст 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

Вы не можете заменить nativeView PlaceHolder снаружи creatingView мероприятие. Вы должны получить существующий nativeView из PlaceHolder, а затем просто обновить растровое изображение.

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

...
...

nativeView.setImageBitmap(bitmap);