溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“react如何實(shí)現(xiàn)縮放”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“react如何實(shí)現(xiàn)縮放”吧！
react實(shí)現(xiàn)縮放的方法：1、監(jiān)聽onWheel事件；2、設(shè)置事件對(duì)象event的屬性deltaY，當(dāng)向上滾動(dòng)時(shí)“deltaY<0”，向下滾動(dòng)時(shí)“deltay>0”；3、修改每次滾動(dòng)時(shí)縮放的比例，同時(shí)更改transform樣式按比例進(jìn)行縮放即可。
react圖片縮放、平移（position、transform實(shí)現(xiàn)）
很多網(wǎng)頁(yè)都會(huì)給文案附上一些圖片補(bǔ)充描述，例如在說到地址時(shí)，會(huì)在旁邊附上一張地圖，并且在地圖上標(biāo)注該地址。如果附上的圖片很小，很難看清楚地址的具體信息，有些產(chǎn)品經(jīng)理會(huì)給圖片設(shè)計(jì)一個(gè)可以平移、放大縮小的功能。本文將一一實(shí)現(xiàn)上述功能。
廢話不多說，先給上效果圖：
主要三個(gè)功能點(diǎn)：
圖片平移
圖片縮放
車站標(biāo)注
圖片平移可以監(jiān)聽這三個(gè)事件實(shí)現(xiàn)：onMouseDown、onMouseMove、onMouseUp。onMouseDown事件記錄每次鼠標(biāo)按下的坐標(biāo)位置；onMouseMove事件計(jì)算出每次平移的距離，該距離加上拖動(dòng)前圖片距離父元素的距離就等于拖動(dòng)后圖片相對(duì)于父元素的距離；onMouseUp事件觸發(fā)時(shí)，注銷或者不讓執(zhí)行onMouseDown、onMouseMove事件，防止只要鼠標(biāo)移入圖片就會(huì)平移。
這三個(gè)事件需要阻止瀏覽器的默認(rèn)行為，不然在移動(dòng)時(shí)會(huì)自動(dòng)打開圖片。
const WIDTH = 1200;const HEIGHT = 900;const DynamicStyle= () => {
const imgRef = React.createRef<HTMLImageElement>();
/** 圖片樣式 */ const [imgStyle, setImgStyle] = useState<React.CSSProperties>({}); /** 記錄鼠標(biāo)是否按下 */ const [mouseDowmFlag, setMouseDowmFlag] = useState(false); /** 記錄鼠標(biāo)按下的坐標(biāo) */ const [mouseDowmPos, setMouseDowmPos] = useState<{x: number, y: number}>({x: 0, y: 0}) /** 鼠標(biāo)可視區(qū)域時(shí)，重置鼠標(biāo)按下的布爾值為false */ useEffect(() => { document.onmouseover = () => { if (mouseDowmFlag) { setMouseDowmFlag(false);
}
}; return () => { document.onmouseover = null;
};
}, [mouseDowmFlag]) /** 平移 */ const handleMouseDown = (event: React.MouseEvent<HTMLImageElement>) => { const { clientX, clientY } = event;
event.stopPropagation();
event.preventDefault(); // 阻止瀏覽器默認(rèn)行為，拖動(dòng)會(huì)打開圖片 setMouseDowmFlag(true); // 控制只有在鼠標(biāo)按下后才會(huì)執(zhí)行mousemove setMouseDowmPos({ x: clientX, y: clientY,
});
}; const handleMouseMove = (event: React.MouseEvent<HTMLImageElement>) => {
event.stopPropagation();
event.preventDefault(); const { clientX, clientY } = event; const diffX = clientX - mouseDowmPos.x; const diffY = clientY - mouseDowmPos.y; if (!mouseDowmFlag || (diffX === 0 && diffY === 0)) return; const { offsetLeft, offsetTop } = imgRef.current as HTMLImageElement; const offsetX = parseInt(`${diffX + offsetLeft}`, 10); const offsetY = parseInt(`${diffY + offsetTop}`, 10); setMouseDowmPos({ x: clientX, y: clientY,
}); setImgStyle({
...imgStyle, left: offsetX, top: offsetY,
});
}; const handleMouseUp = (event: React.MouseEvent<HTMLImageElement>) => {
event.stopPropagation();
event.preventDefault(); setMouseDowmFlag(false);
}; return ( <div className={styles.imgArea}> <img
src={mapImg}
alt='part' ref={imgRef} height={HEIGHT}
style={imgStyle} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}
> </img> </div>
)
}
圖片縮放可以監(jiān)聽onWheel事件，事件對(duì)象event有一個(gè)記錄滾輪滾動(dòng)的屬性deltaY，當(dāng)向上滾動(dòng)時(shí)deltaY<0，向下滾動(dòng)時(shí)deltaY>0。每次滾動(dòng)修改其縮放的比例，同時(shí)更改transform樣式按比例進(jìn)行縮放。
const WIDTH = 1200;const HEIGHT = 900;const SCALE = 0.2;const DynamicStyle= () => { const imgRef = React.createRef<HTMLImageElement>(); /** 初始化縮放比例，默認(rèn)為1 */ const [rate, setRate] = useState(1); /** 圖片樣式 */ const [imgStyle, setImgStyle] = useState<React.CSSProperties>({}); /** 記錄鼠標(biāo)是否按下 */ const [mouseDowmFlag, setMouseDowmFlag] = useState(false); /** 記錄鼠標(biāo)按下的坐標(biāo) */ const [mouseDowmPos, setMouseDowmPos] = useState<{x: number, y: number}>({x: 0, y: 0}) /** 圖片現(xiàn)在大小 */ const [initial, setInitial] = useState<{width: number, height: number}>({width: WIDTH, height: HEIGHT}); useEffect(() => { const { naturalWidth, naturalHeight, width, height } = imgRef.current as HTMLImageElement; setInitial({ width, height }); // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) // console.log(natural, initial) useEffect(() => { document.onmouseover = () => { if (mouseDowmFlag) { setMouseDowmFlag(false);
}
}; return () => { document.onmouseover = null;
};
}, [mouseDowmFlag]) /** 縮放 */ const handleWheelImage = (event: React.WheelEvent<HTMLImageElement>) => { // 向上為負(fù)，向下為正 const bigger = event.deltaY > 0 ? -1 : 1; // transform偏移量 const transformX = -initial.width / 2; const transformY = -initial.height / 2; if (bigger > 0 && rate < 2) { const enlargeRate = rate + SCALE; setImgStyle({
...imgStyle, transform: `matrix(${enlargeRate}, 0, 0, ${enlargeRate}, ${transformX}, ${transformY})`, // 默認(rèn)以圖片中心為原點(diǎn)進(jìn)行縮放
}); setRate(enlargeRate);
} else if (bigger < 0 && rate > 1) { const shrinkRate = rate - SCALE; setImgStyle({
...imgStyle, transform: `matrix(${shrinkRate}, 0, 0, ${shrinkRate}, ${transformX}, ${transformY})`,
}); setRate(shrinkRate);
}
} /** 平移 */ const handleMouseDown = (event: React.MouseEvent<HTMLImageElement>) => { const { clientX, clientY } = event;
event.stopPropagation();
event.preventDefault(); // 阻止瀏覽器默認(rèn)行為，拖動(dòng)會(huì)打開圖片 setMouseDowmFlag(true); // 控制只有在鼠標(biāo)按下后才會(huì)執(zhí)行mousemove setMouseDowmPos({ x: clientX, y: clientY,
});
}; const handleMouseMove = (event: React.MouseEvent<HTMLImageElement>) => {
event.stopPropagation();
event.preventDefault(); const { clientX, clientY } = event; const diffX = clientX - mouseDowmPos.x; const diffY = clientY - mouseDowmPos.y; if (!mouseDowmFlag || (diffX === 0 && diffY === 0)) return; const { offsetLeft, offsetTop } = imgRef.current as HTMLImageElement; const offsetX = parseInt(`${diffX + offsetLeft}`, 10); const offsetY = parseInt(`${diffY + offsetTop}`, 10); setMouseDowmPos({ x: clientX, y: clientY,
}); setImgStyle({
...imgStyle, left: offsetX, top: offsetY,
});
}; const handleMouseUp = (event: React.MouseEvent<HTMLImageElement>) => {
event.stopPropagation();
event.preventDefault(); setMouseDowmFlag(false);
}; return ( <div className={styles.imgArea}> <img
src={mapImg}
alt='part'
height={HEIGHT}
style={imgStyle} ref={imgRef} onWheel={handleWheelImage} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}
> </img> </div>
)
}.imgArea { position: relative; width: 1200px; height: 900px; margin: auto; border: 1px solid #da2727; overflow: hidden;
& > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: move;
}
}
如果沒有設(shè)置transformOrigin，默認(rèn)是相對(duì)于圖片中心進(jìn)行縮放，但是在初始為了讓圖片在可視區(qū)域內(nèi)水平垂直居中，使用了transform: translate(-50%, -50%);，因此為了縮放時(shí)相對(duì)于圖片中心點(diǎn)，需要設(shè)置matrix的第5、6個(gè)參數(shù)矯正transformOrigin，transform: matrix(${shrinkRate}, 0, 0, ${shrinkRate}, ${transformX}, ${transformY})
首先，定義一個(gè)常量表示圖標(biāo)的坐標(biāo)，這個(gè)坐標(biāo)是相對(duì)于原始圖片左上角的定位。
const imgInfo = { lableLeft: "1900", lableTop: "2000",}
這里，解釋一下原始圖的概念：
隨便在網(wǎng)上查看一個(gè)圖片元素，比如上面。1200 x 900是頁(yè)面定的圖片大小，但圖片還有一個(gè)真實(shí)大小4535 x 3402。
要計(jì)算圖標(biāo)在沒有平移縮放時(shí)的初始坐標(biāo)之前，需要算出圖片的縮放比例（不是上面的rate）：
/** 圖片原始大小，默認(rèn)設(shè)置為1是防止計(jì)算圖片原始大小與初始大小比例出現(xiàn)無窮大 */const [natural, setNatural] = useState<{width: number, height: number}>({width: 1, height: 1});/** 圖片現(xiàn)在大小 */const [initial, setInitial] = useState<{width: number, height: number}>({width: WIDTH, height: HEIGHT});useEffect(() => { const { naturalWidth, naturalHeight, width, height } = imgRef.current as HTMLImageElement; setNatural({ width: naturalWidth, height: naturalHeight }); setInitial({ width, height }); // eslint-disable-next-line react-hooks/exhaustive-deps}, [])
// 初始圖片縮放比例（圖片有原始的圖片大?。ヽonst imgScaleRateX = initial.width / natural.width;const imgScaleRateY = initial.height / natural.height;
圖標(biāo)初始的坐標(biāo)就可以計(jì)算出：
const labelLeft = parseInt(`${imgInfo.lableLeft}`, 10) * imgScaleRateX;const labelTop = parseInt(`${imgInfo.lableTop}`, 10) * imgScaleRateY;
當(dāng)圖片平移時(shí)，圖標(biāo)也需要跟著平移，這是的坐標(biāo)計(jì)算：
// 圖標(biāo)相對(duì)父元素坐標(biāo) = 圖標(biāo)位置坐標(biāo) + 圖片坐標(biāo)const labelLeft = parseInt(`${imgInfo.lableLeft}`, 10) * imgScaleRateX + Number(imgStyle.left || WIDTH / 2);
const labelTop = parseInt(`${imgInfo.lableTop}`, 10) * imgScaleRateY + Number(imgStyle.top || HEIGHT / 2);
當(dāng)圖片縮放時(shí)，圖標(biāo)需要隨著圖片一起縮放。如果沒有對(duì)圖標(biāo)設(shè)置transformOrigin，默認(rèn)時(shí)相對(duì)圖標(biāo)的中心縮放的。為了保證圖標(biāo)隨著圖片一起縮放，那就必須使得圖片和圖標(biāo)的縮放參照原點(diǎn)相同，圖標(biāo)的transformOrigin應(yīng)該設(shè)置為相對(duì)于圖片原點(diǎn)的距離。
const labelTransformOrigin = () => { return `${initial.width / 2 - Number(imgInfo.lableLeft) * imgScaleRateX}px ${
initial.height / 2 - Number(imgInfo.lableTop) * imgScaleRateY
}px`;
}
整體代碼示例：
const imgInfo = {
lableLeft: "1900",
lableTop: "2000",
}
const WIDTH = 1200;
const HEIGHT = 900;
const SCALE = 0.2;
const DynamicStyle= () => {
const imgRef = React.createRef<HTMLImageElement>();
/** 初始化縮放比例，默認(rèn)為1 */
const [rate, setRate] = useState(1);
/** 圖片樣式 */
const [imgStyle, setImgStyle] = useState<React.CSSProperties>({});
/** 記錄鼠標(biāo)是否按下 */
const [mouseDowmFlag, setMouseDowmFlag] = useState(false);
/** 記錄鼠標(biāo)按下的坐標(biāo) */
const [mouseDowmPos, setMouseDowmPos] = useState<{x: number, y: number}>({x: 0, y: 0})
/** 圖片原始大小，默認(rèn)設(shè)置為1是防止計(jì)算圖片原始大小與初始大小比例出現(xiàn)無窮大 */
const [natural, setNatural] = useState<{width: number, height: number}>({width: 1, height: 1});
/** 圖片現(xiàn)在大小 */
const [initial, setInitial] = useState<{width: number, height: number}>({width: WIDTH, height: HEIGHT});
useEffect(() => {
const { naturalWidth, naturalHeight, width, height } = imgRef.current as HTMLImageElement;
setNatural({ width: naturalWidth, height: naturalHeight });
setInitial({ width, height });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
useEffect(() => {
document.onmouseover = () => {
if (mouseDowmFlag) {
setMouseDowmFlag(false);
}
};
return () => {
document.onmouseover = null;
};
}, [mouseDowmFlag])
/** 縮放 */
const handleWheelImage = (event: React.WheelEvent<HTMLImageElement>) => {
// 向上為負(fù)，向下為正
const bigger = event.deltaY > 0 ? -1 : 1;
// transform偏移量
const transformX = -initial.width / 2;
const transformY = -initial.height / 2;
if (bigger > 0 && rate < 2) {
const enlargeRate = rate + SCALE;
setImgStyle({
...imgStyle,
transform: `matrix(${enlargeRate}, 0, 0, ${enlargeRate}, ${transformX}, ${transformY})`, // 默認(rèn)以圖片中心為原點(diǎn)進(jìn)行縮放
});
setRate(enlargeRate);
} else if (bigger < 0 && rate > 1) {
const shrinkRate = rate - SCALE;
setImgStyle({
...imgStyle,
transform: `matrix(${shrinkRate}, 0, 0, ${shrinkRate}, ${transformX}, ${transformY})`,
});
setRate(shrinkRate);
}
}
/** 平移 */
const handleMouseDown = (event: React.MouseEvent<HTMLImageElement>) => {
const { clientX, clientY } = event;
event.stopPropagation();
event.preventDefault(); // 阻止瀏覽器默認(rèn)行為，拖動(dòng)會(huì)打開圖片
setMouseDowmFlag(true); // 控制只有在鼠標(biāo)按下后才會(huì)執(zhí)行mousemove
setMouseDowmPos({
x: clientX,
y: clientY,
});
};
const handleMouseMove = (event: React.MouseEvent<HTMLImageElement>) => {
event.stopPropagation();
event.preventDefault();
const { clientX, clientY } = event;
const diffX = clientX - mouseDowmPos.x;
const diffY = clientY - mouseDowmPos.y;
if (!mouseDowmFlag || (diffX === 0 && diffY === 0)) return;
const { offsetLeft, offsetTop } = imgRef.current as HTMLImageElement;
const offsetX = parseInt(`${diffX + offsetLeft}`, 10);
const offsetY = parseInt(`${diffY + offsetTop}`, 10);
setMouseDowmPos({
x: clientX,
y: clientY,
});
setImgStyle({
...imgStyle,
left: offsetX,
top: offsetY,
});
};
const handleMouseUp = (event: React.MouseEvent<HTMLImageElement>) => {
event.stopPropagation();
event.preventDefault();
setMouseDowmFlag(false);
};
// 初始圖片縮放比例（圖片有原始的圖片大?。?
const imgScaleRateX = initial.width / natural.width;
const imgScaleRateY = initial.height / natural.height;
const labelTransformOrigin = () => {
return `${initial.width / 2 - Number(imgInfo.lableLeft) * imgScaleRateX}px ${
initial.height / 2 - Number(imgInfo.lableTop) * imgScaleRateY
}px`;
}
/** 圖標(biāo)位置計(jì)算 */
const labelStyle = (): React.CSSProperties => {
const transformX = -initial.width / 2;
const transformY = -initial.height / 2;
// 圖標(biāo)相對(duì)父元素坐標(biāo) = 圖標(biāo)初始位置坐標(biāo) + 平移量
const labelLeft = parseInt(`${imgInfo.lableLeft}`, 10) * imgScaleRateX + Number(imgStyle.left || WIDTH / 2);
const labelTop = parseInt(`${imgInfo.lableTop}`, 10) * imgScaleRateY + Number(imgStyle.top || HEIGHT / 2);
return {
left: labelLeft,
top: labelTop,
transformOrigin: labelTransformOrigin(),
transform: `matrix(${rate}, 0, 0, ${rate}, ${transformX}, ${transformY})`,
}
}
return (
<div className={styles.imgArea}>
<img
src={mapImg}
alt='part'
height={HEIGHT}
style={imgStyle}
ref={imgRef}
onWheel={handleWheelImage}
onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp}
>
</img>
<span className={styles.label} style={labelStyle()}></span>
</div>
)
}
感謝各位的閱讀，以上就是“react如何實(shí)現(xiàn)縮放”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)react如何實(shí)現(xiàn)縮放這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
