主要通過Canvas組件的drawImage方法實(shí)現(xiàn)圖片顯示。該方法需要輸入9個參數(shù)，分別是圖片對象，原圖的X軸裁剪起點(diǎn)，原圖的Y軸裁剪起點(diǎn)，裁剪的寬度，裁剪的高度，畫布X軸畫圖的起點(diǎn)，畫布Y軸畫圖的起點(diǎn)，畫布的寬度，畫布的高度。
??想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：??
??51CTO 開源基礎(chǔ)軟件社區(qū)??
??https://ost.51cto.com??
組件介紹
本圖片組件在顯示圖片的基礎(chǔ)上附帶局部放大功能，在原本設(shè)定的圖片區(qū)域?qū)⒕植窟M(jìn)行放大顯示，在不占用其余布局空間的情況下，滿足用戶仔細(xì)欣賞圖片細(xì)節(jié)的需要。實(shí)現(xiàn)效果如下：
項(xiàng)目結(jié)構(gòu)
組件開發(fā)
頁面布局
- 為組件綁定doubleclick雙擊事件和touchmove觸屏移動事件，分別用于切換圖片縮放和控制局部顯示區(qū)域移動。
<div style="width: {{ imageWidth }}px; height: {{ imageHeight }}px;">
<canvas src="{{ imageSrc }}" ref="zoom" class="canvas-border"
@doubleclick="zoomswitch" @touchmove="getmove"></canvas>
</div>組件屬性參數(shù)設(shè)置
參數(shù)名
| 描述
| 參數(shù)類型
| 默認(rèn)值
|
imageWidth
| 設(shè)置圖片寬度
| Number
| 500
|
imageHeight
| 設(shè)置圖片高度
| Number
| 500
|
imageSrc
| 設(shè)置圖片地址
| String
| 無
|
scale
| 圖片放大的比例
| Number
| 2
|
實(shí)現(xiàn)原理
- 主要通過canvas組件的drawImage方法實(shí)現(xiàn)圖片顯示。該方法需要輸入9個參數(shù)，分別是圖片對象，原圖的X軸裁剪起點(diǎn)，原圖的Y軸裁剪起點(diǎn)，裁剪的寬度，裁剪的高度，畫布X軸畫圖的起點(diǎn)，畫布Y軸畫圖的起點(diǎn)，畫布的寬度，畫布的高度。
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);
- 給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("恢復(fù)全局視角");
changeview.onload = () => {
ctx0.drawImage(changeview,
0, 0,
this.initwidth, this.initheight,
0, 0,
this.imageWidth, this.imageHeight);
};
}
},- 給canvas組件綁定touchmove事件，獲取touchmove事件的觸點(diǎn)坐標(biāo)，經(jīng)過計(jì)算得出drawImage方法中的幾個關(guān)鍵參數(shù)值，并添加判斷條件，當(dāng)觸點(diǎn)坐標(biāo)過于接近邊緣時設(shè)置極限值。
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>
結(jié)語
假如大家有自定義組件的創(chuàng)意，可以自己試著實(shí)現(xiàn)一下，或是在其他的項(xiàng)目中學(xué)習(xí)下別人是如何設(shè)計(jì)開發(fā)一個組件的，從一些簡單的組件入手對新手來說是很不錯的選擇。
項(xiàng)目倉庫鏈接 https://gitee.com/zhan-weisong/zoom-image。
文章相關(guān)附件可以點(diǎn)擊下面的原文鏈接前往下載：
https://ost.51cto.com/resource/2355。
??想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：??
??51CTO 開源基礎(chǔ)軟件社區(qū)??
??https://ost.51cto.com??。
