HarmonyOS NEXT應用開發之圖片縮放效果實現

介紹

圖片預覽在應用開發中是一種常見場景，在諸如QQ、微信、微博等應用中均被廣泛使用。本模組基於Image元件實現了簡單的圖片預覽功能。

使用說明：

1. 雙指捏合縮放圖片大小
2. 雙擊圖片進行圖片的大小切換
3. 圖片在放大模式下，滑動圖片檢視圖片的對應位置

效果圖預覽

實現思路

1. image元件的objectFit屬性設定為Contain以保證圖片縮放過程中的寬高比
2. 透過對image元件的寬高、位置控制來實現圖片的縮放與移動

高效能知識點

不涉及

模組依賴

不涉及

工程結構&模組型別

imageviewer                                     // har型別
|---constants                                   // 常量
|---model                                       // 模型層-方案中用到的各種資料模型
|---view                                        // 檢視層-圖片預覽方案涉及的主要元件
|---|---ImageViewerView.ets                     // 檢視層-入口
|---|---ImageContentView.ets                    // 檢視層-圖片預覽方案的主要承載元件

參考資料

1. image
2. gesture
3. swiper
4. window