成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

鴻蒙JS自定義組件—局部放大圖片組件

系統 OpenHarmony
主要通過Canvas組件的drawImage方法實現圖片顯示。該方法需要輸入9個參數,分別是圖片對象,原圖的X軸裁剪起點,原圖的Y軸裁剪起點,裁剪的寬度,裁剪的高度,畫布X軸畫圖的起點,畫布Y軸畫圖的起點,畫布的寬度,畫布的高度。

??想了解更多關于開源的內容,請訪問:??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??

組件介紹

本圖片組件在顯示圖片的基礎上附帶局部放大功能,在原本設定的圖片區域將局部進行放大顯示,在不占用其余布局空間的情況下,滿足用戶仔細欣賞圖片細節的需要。實現效果如下:

#打卡不停更# 鴻蒙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。

文章相關附件可以點擊下面的原文鏈接前往下載:

https://ost.51cto.com/resource/2355。

??想了解更多關于開源的內容,請訪問:??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??。

責任編輯:jianghua 來源: 51CTO開源基礎軟件社區
相關推薦

2021-11-01 10:21:36

鴻蒙HarmonyOS應用

2022-10-25 15:12:24

自定義組件鴻蒙

2022-07-06 20:24:08

ArkUI計時組件

2022-05-26 14:50:15

ArkUITS擴展

2021-02-20 12:34:53

鴻蒙HarmonyOS應用開發

2022-04-24 15:17:56

鴻蒙操作系統

2021-09-15 10:19:15

鴻蒙HarmonyOS應用

2021-06-17 14:56:00

鴻蒙HarmonyOS應用

2022-02-16 16:09:12

鴻蒙游戲操作系統

2022-02-21 15:16:30

HarmonyOS鴻蒙操作系統

2021-11-22 10:00:33

鴻蒙HarmonyOS應用

2021-01-11 11:36:23

鴻蒙HarmonyOSApp開發

2022-03-01 16:09:06

OpenHarmon鴻蒙單選組件

2022-12-07 08:56:27

SpringMVC核心組件

2009-06-25 14:53:35

自定義UI組件JSF框架

2023-01-03 07:40:27

自定義滑塊組件

2022-07-15 16:45:35

slider滑塊組件鴻蒙

2022-06-30 14:02:07

鴻蒙開發消息彈窗組件

2022-02-16 15:25:31

JS代碼Canvas鴻蒙

2023-02-20 15:20:43

啟動頁組件鴻蒙
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 一级做a爰片性色毛片 | 日本高清aⅴ毛片免费 | 亚洲一区中文字幕 | 欧美夜夜| 亚洲黄色片免费观看 | 久久久激情视频 | 国产成人精品一区二区三区视频 | 精品二区| 日日干夜夜操天天操 | 在线亚洲一区 | av在线一区二区三区 | 亚洲精品456 | 97视频在线观看免费 | 日韩人体在线 | 一级毛片在线视频 | www4虎 | 美女久久久久 | 久久99精品久久久久久国产越南 | 免费国产一区二区视频 | 在线观看国产视频 | 91免费观看 | av天天澡天天爽天天av | 九色porny自拍视频 | 特级丰满少妇一级aaaa爱毛片 | 国产高清在线精品 | 欧美一区二区三区在线看 | 国产乱码精品1区2区3区 | 日本精品一区二区三区在线观看视频 | h在线| 狠狠干天天干 | 国产精品日韩欧美一区二区三区 | 性欧美hd| 成人精品一区亚洲午夜久久久 | av在线伊人| 久久99深爱久久99精品 | 中文字幕精品一区久久久久 | 亚洲精品在线看 | 干干干日日日 | 亚洲精品一区二区网址 | 天堂网avav| 黄色在线免费观看视频网站 |