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

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

0 голосов
/ 22 июня 2019

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

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

Для рисования фигур я использую компонент Placeholder на основе поста в блоге Как создать холст в nativescript и Пример игровой площадки от 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;
}

1 Ответ

1 голос
/ 22 июня 2019

Нельзя заменить 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);
...