Проект PhotoSwipeJs_ohos

Данный проект представляет собой функциональную миграцию и разработку на основе открытого проекта photoSwipe с использованием API для HarmonyOS. Проект можно отследить по тегам и адресу GitHub (https://github.com/dimsemenov/PhotoSwipe/tree/master/dist).

Проект:

• Название: PhotoSwipeJs_ohos (галерея изображений).
• Серия: адаптация сторонних компонентов для HarmonyOS.
• Функции: увеличение и уменьшение изображения при нажатии, масштабирование при движении пальца, а также другие функции, такие как панель заголовка.
• Состояние миграции: 100%, основные функции перенесены.
• Вызов различий: функциональная перестройка.
• Язык программирования: JavaScript.
• Внешние библиотеки: нет.
• Версия разработки: SDK7 (обратная совместимость), DevEco Studio3.0 beta1.
• Автор проекта: Цай Чжицзе.
• Электронная почта: isrc_hm@iscas.ac.cn.
• Адрес исходного документа проекта: https://github.com/dimsemenov/PhotoSwipe/tree/master/dist.

Проект был разработан без использования кода оригинального проекта photoSwipe, но с учётом его функций. Разработка велась на платформе ArkUI для HarmonyOS.

Предварительный просмотр проекта:

Общий вид обложки:

Эффект увеличения при нажатии на изображение или панель задач:

Масштабирование при касании и жесте:

Описание изображения:

Общая схема действий:

Использование:

1. Компоненты проекта находятся в entry/src/main/js/default/common/components/. Чтобы использовать их в своём проекте, просто скопируйте их туда. В качестве примера рассмотрим компонент imagePreview.

2. Добавьте элемент imagePreview в файл HTML и привяжите необходимые параметры.

<element name="photoswiper" src="../../common/component/imagePreview/preview.hml"></element>
<!--测试代码-->
<photoswiper  @handle-result="onResReceived" image-list="{{imgList}}"></photoswiper>

image-list определяет URL-адреса изображений и информацию о них. Событие handle-result возвращает результат проверки родительскому компоненту.

3. Определите параметры компонента и обработчики событий в файле JavaScript. Это включает три шага:

• Указание источника изображения. Для галереи изображений мы используем массив URL-адресов локальных ресурсов. Также добавляем заголовок и описание.
• Определение параметров компонента. Для галереи это объект с параметрами PhotoSwipeJs_ohos, включая txt (заголовок), text (описание) и image (URL-адрес изображения).
• Привязка обработчика событий. После этого родительский компонент может получить результат проверки через e.detail.result.

Пример кода JavaScript:

import prompt from '@system.prompt';

export default {
    data: {
        title: "",
        // 可以增加数据行, 包括图片与图片介绍
        // txt--标题 text--介绍 image--图片地址
        imgList:[
            {
                txt: '元气森林',
                text: '川涘将钓玉,乡亭期散金。 素晖射流濑,翠色绵森林。',
                image: '/common/images/test1.jpg'
            },
            {
                txt: '小岛极光',
                text: '马沙少个天灯塔,暗雨乌风看作标。',
                image: '/common/images/test2.jpg'
            },
            {
                txt: '腊雪寒冬',
                text: '凌兢侵腊雪，散漫入春诗。赠我岁寒色，怜君冰玉姿。',
                image: '/common/images/test3.jpg'
            }
        ],
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    // 事件处理函数，在此处定义验证完成后的操作
    onResReceived(e) {
        prompt.showToast({
            message: "父组件得到结果:" + e.detail.result
        });
    }
}

Версия: v0.1.0-alpha.

Авторские права и лицензии: PhotoSwipeJs_ohos лицензирован под Apache License, version 2.0.