Angular實現圖片點擊縮放組件
本文將設計一個用于網頁中點擊圖片縮放的 Angular 組件。閱讀需要注意的是,本文只講解原理和設計理念,不過多講解Angular框架的API。
線demo。
需求分析
一般用戶在閱讀文章的時候,由于種種限制,圖片會比較小,所以需要提供一個可以查看圖片詳細的控件,大概需求可以有以下幾點:
- 雙擊圖像可以顯示該圖像的原始圖或者放大后的圖像
- 圖像可以移動,放大,縮小。
- 再次雙擊后可以關閉
- 自定義API參數(有一些圖像的api支持圖像的裁剪縮放等功能)
- 復用性好,也就是在每個頁面中都可以使用。
那么我們暫時就按照這個需求來設計,首先要給它起一個名字,這樣它才有生命力。
就是它了 ngx-imgclicker !!!
創建Angular自定義庫
創