#打卡不停更# 鸿蒙JS自定义组件——局部放大图片组件 原创 精华

Looker_song
发布于 2022-10-24 14:15
浏览
4收藏

组件介绍

本图片组件在显示图片的基础上附带局部放大功能,在原本设定的图片区域将局部进行放大显示,在不占用其余布局空间的情况下,满足用户仔细欣赏图片细节的需要。实现效果如下:

#打卡不停更# 鸿蒙JS自定义组件——局部放大图片组件-鸿蒙开发者社区

项目结构

#打卡不停更# 鸿蒙JS自定义组件——局部放大图片组件-鸿蒙开发者社区

组件开发

页面布局

  • 为组件绑定doubleclick双击事件和touchmove触屏移动事件,分别用于切换图片缩放和控制局部显示区域移动。
<div style="width: {{ imageWidth }}px; height: {{ imageHeight }}px;">
    <canvas src="{{ imageSrc }}" ref="zoom" class="canvas-border"
            @doubleclick="zoomswitch" @touchmove="getmove"></canvas>
</div>

组件属性参数设置

参数名 描述 参数类型 默认值
imageWidth 设置图片宽度 Number 500
imageHeight 设置图片高度 Number 500
imageSrc 设置图片地址 String
scale 图片放大的比例 Number 2

实现原理

  • 主要通过canvas组件的drawImage方法实现图片显示。该方法需要输入9个参数,分别是图片对象,原图的X轴裁剪起点,原图的Y轴裁剪起点,裁剪的宽度,裁剪的高度,画布X轴画图的起点,画布Y轴画图的起点,画布的宽度,画布的高度。
    ctx0.drawImage(changeview,
        this.initwidth / 2 - this.initwidth / this.scale / 2,
        this.initheight / 2 - this.initheight / this.scale / 2,
        changeview.width / this.scale,
        changeview.height / this.scale,
        0, 0,
        this.imageWidth, this.imageHeight);

#打卡不停更# 鸿蒙JS自定义组件——局部放大图片组件-鸿蒙开发者社区

  • 给canvas组件绑定doubleclick双击事件,变化布尔型变量isZoom的值,用于切换局部放大模式和原始视图。
    zoomswitch() {
        this.isZoom = !this.isZoom;
        let changeview = new Image();
        changeview.src = this.img.src;
        if (true == this.isZoom) {
            console.log("拉近镜头");
            changeview.onload = () => {
                ctx0.drawImage(changeview,
                    this.initwidth / 2 - this.initwidth / this.scale / 2,
                    this.initheight / 2 - this.initheight / this.scale / 2,
                    changeview.width / this.scale,
                    changeview.height / this.scale,
                    0, 0,
                    this.imageWidth, this.imageHeight);
            };
        }
        else {
            console.log("恢复全局视角");
            changeview.onload = () => {
                ctx0.drawImage(changeview,
                    0, 0,
                this.initwidth, this.initheight,
                    0, 0,
                this.imageWidth, this.imageHeight);
            };
        }
    },
  • 给canvas组件绑定touchmove事件,获取touchmove事件的触点坐标,经过计算得出drawImage方法中的几个关键参数值,并添加判断条件,当触点坐标过于接近边缘时设置极限值。
    getmove(event) {
        if (false == this.isZoom) {
            return;
        }
        this.points.x = (event.touches[0].localX - this.imageWidth / this.scale / 2) / this.imageWidth * this.initwidth;
        this.points.y = (event.touches[0].localY - this.imageHeight / this.scale / 2) / this.imageHeight * this.initheight;
        if (((this.imageWidth / this.scale / 2) > event.touches[0].localX)
        || ((this.imageWidth - this.imageWidth / this.scale / 2) < event.touches[0].localX)) {
            if ((this.imageWidth / this.scale / 2) > event.touches[0].localX) {
                this.points.x = 0;
            }
            else {
                this.points.x = this.initwidth - this.initwidth / this.scale;
            }
        }
        if (((this.imageHeight / this.scale / 2) > event.touches[0].localY)
        || ((this.imageHeight - this.imageHeight / this.scale / 2) < event.touches[0].localY)) {
            if ((this.imageHeight / this.scale / 2) > event.touches[0].localY) {
                this.points.y = 0;
            }
            else {
                this.points.y = this.initheight - this.initheight / this.scale;
            }
        }
        let newview = new Image();
        newview.src = this.img.src;
        newview.onload = () => {
            ctx0.drawImage(newview,
            this.points.x, this.points.y,
                newview.width / this.scale, newview.height / this.scale,
                0, 0,
            this.imageWidth, this.imageHeight);
        };
    },

组件引用

  • 引用声明
<element name="zoomimage" src="common/zoomimage/zoomimage.hml"></element>
  • 参数传递
<zoomimage image-width="660" image-height="550" image-src="common/images/mural.jpg" scale="3"></zoomimage>

结语

假如大家有自定义组件的创意,可以自己试着实现一下,或是在其他的项目中学习下别人是如何设计开发一个组件的,从一些简单的组件入手对新手来说是很不错的选择。

项目仓库链接 https://gitee.com/zhan-weisong/zoom-image

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
ZoomImage.rar 6.87M 9次下载
8
收藏 4
回复
举报
6条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

git的项目仓库链接好像打不开了。。

回复
2022-10-24 14:42:13
Looker_song
Looker_song 回复了 红叶亦知秋
git的项目仓库链接好像打不开了。。

(°ー°〃)忘记设置公开了,现在可以了

回复
2022-10-24 16:57:54
hmyxd
hmyxd

显示图片软件基本都需要放大功能,很实用

回复
2022-10-25 16:03:55
带带小老弟
带带小老弟

不错的组件,可以用一下

回复
2022-10-26 14:33:38
物联风景
物联风景

不错不错,很详细

回复
2022-10-27 09:15:46
诺舒华吃西瓜
诺舒华吃西瓜

看大图片(比如清明上河图)就需要这个功能

回复
2022-10-28 16:51:35
回复
    相关推荐