Angular实现图片点击缩放组件
本文将设计一个用于网页中点击图片缩放的 Angular 组件。阅读需要注意的是,本文只讲解原理和设计理念,不过多讲解Angular框架的API。
线demo。
需求分析
一般用户在阅读文章的时候,由于种种限制,图片会比较小,所以需要提供一个可以查看图片详细的控件,大概需求可以有以下几点:
- 双击图像可以显示该图像的原始图或者放大后的图像
- 图像可以移动,放大,缩小。
- 再次双击后可以关闭
- 自定义API参数(有一些图像的api支持图像的裁剪缩放等功能)
- 复用性好,也就是在每个页面中都可以使用。
那么我们暂时就按照这个需求来设计,首先要给它起一个名字,这样它才有生命力。
就是它了 ngx-imgclicker !!!
创建Angular自定义库
创