鸿蒙JS自定义组件——局部放大图片组件

组件属性参数设置参数名称描述参数类型默认值imageWidth设置图片宽度Number500imageHeight设置图片高度Number500imageSrc设置图片地址String无刻度图片缩放比例Number2实现原理主要是通过canvas组件的drawImage方法实现图片显示。该方法需要输入9个参数，分别是图像对象、原图X轴裁剪起点、原图Y轴裁剪起点、裁剪宽度、裁剪高度、画布X轴绘制起点，画布Y轴绘制起点，画布宽度，画布高度。ctx0.drawImage(changeview,this.initwidth/2-this.initwidth/this.scale/2,this.iniheight/2-this.iniheight/this.scale/2,changeview.width/this.scale,changeview.height/this.scale,0,0,this.imageWidth,this.imageHeight);给canvas组件绑定doubleclick事件，改变布尔变量isZoom的值，用于切换局部缩放模式和原始视图。zoomswitch(){this.isZoom=!this.isZoom;让changeview=newImage();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.initeight/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){如果(false==this.isZoom){返回；}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;如果(((this.imageWidth/this.scale/2)>event.touches[0].localX)||((this.imageWidth-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){this.points.y=0;}else{this.points.y=this.iniheight-this.iniheight/this.scale;}}让newview=newImage();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,这个.imageHeight);};}、组件引用引用声明参数传递结论如果你有自定义组件的创意，你可以尝试自己实现，或者学习别人如何在其他项目中设计和开发一个组件。从一些简单的组件入手对于新手来说是一个不错的选择。项目仓库链接https://gitee.com/zhan-weisong/zoom-image。文章相关附件可点击下方原文链接下载：https://ost.51cto.com/resource/2355。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。