摘要:移動的過程中可以通過拿到元素的坐標,記為。向上滾動放大,向下滾動縮小這里要注意控制最小縮放值。還要注意的是圖片在邊界的縮放,不然圖片可能會移動在屏幕外。代碼實現控制滾輪縮放計算縮放后的大小每一次滾輪限制最小不讓由于縮小消失在視野中
cxj-react-image 用法如下:
yarn add cxj-react-image // npm i cxj-react-image
import ImageModal from "cxj-react-image";this.next()} {/* 控制下一張 */} prev={() => this.prev()} {/* 控制上一張 */} closeModal={() => this.closeImg()} {/* 控制modal打開關閉 */} option={{ move: true, {/* 控制拖動 */} waterMarkText: "多功能圖片組件", {/* 設置水印文字 */} rotate: true, {/* 控制旋轉 */} zoom: true {/* 控制放大縮小 */} }} />
更詳細的用法請參考 container.js文件
github地址
在線例子
如有幫助,感謝star~ 如有問題,歡迎call me~
交流請加wx: c13266836563
以下為相關實現講解
拖拽實現拖拽的思路是計算出dom最后的left跟top。
未移動前可以通過clientX跟offsetLeft拿到dom的x坐標和左邊距,記為initX和offLeft。
移動的過程中可以通過clientX拿到元素的x坐標,記為moveX。
得到公式:left = moveX - initX + offLeft。
核心代碼如下:
const move = (dv) => { // 獲取元素 let x = 0; let y = 0; let l = 0; let t = 0; let isDown = false; // 鼠標按下事件 dv.onmousedown = function(e) { // 獲取x坐標和y坐標 x = e.clientX; y = e.clientY; // 獲取左部和頂部的偏移量 l = dv.offsetLeft; t = dv.offsetTop; handleMove(); }; // 鼠標移動 // 再包一層是為了方便注冊 避免被替換 function handleMove() { onmousemove = function(e) { // 獲取x和y let nx = e.clientX; let ny = e.clientY; // 計算移動后的左偏移量和頂部的偏移量 let nl = nx - (x - l); let nt = ny - (y - t); dv.style.left = nl + "px"; dv.style.top = nt + "px"; }; } };
關于拖拽,有個情況還需要優化:頁面上有兩個modal,要保證最后點擊的modal要覆蓋之前點擊的modal。
也就是zIndex要控制好,這里用localStorage來保存這個最大的zIndex
imageModalMaxzIndex = localStorage.getItem("imageModalMaxzIndex"); if (dv.style.zIndex != imageModalMaxzIndex) { dv.style.zIndex = +imageModalMaxzIndex + 1; localStorage.setItem("imageModalMaxzIndex", dv.style.zIndex); }水印
前端實現水印,避免私密圖片泄露
思路是使用canvas生成文字圖片,然后利用以下的css:
background-image:url("${base64Url}");
background-repeat:repeat;
實現水印類:
/** * @overview: 水印組件 */ export default class WaterMark { constructor(container, option) { this.container = container; this.option = { width: "200px", height: "150px", opacity: .7, fillStyle: "rgba(47, 205, 227, 0.3)", font: "20px microsoft yahei", textBaseline: "middle", textAlign: "center", fillText: "水印", ...option }; } draw() { const { container, option: { width, height, opacity, fillStyle, font, textBaseline, textAlign, fillText, scrollHeight } } = this; const canvas = document.createElement("canvas"); canvas.setAttribute("width", width); canvas.setAttribute("height", height); canvas.setAttribute("opacity", opacity); const ctx = canvas.getContext("2d"); ctx.textAlign = textAlign; ctx.textBaseline = textBaseline; ctx.font = font; ctx.fillStyle = fillStyle; ctx.rotate(Math.PI / 180 * 30); ctx.fillText(fillText, 80, 10); var base64Url = canvas.toDataURL(); const watermarkDiv = document.createElement("div"); watermarkDiv.setAttribute("style", ` position:absolute; top:0; left:0; width:100%; height:${scrollHeight || "100%"}; z-index:1000; pointer-events:none; background-repeat:repeat; background-image:url("${base64Url}")`); if (typeof container === "object") { container.style.position = "relative"; container.insertBefore(watermarkDiv, container.firstChild); } } }
這里有一篇文章總結了幾種前端水印的方案,推薦給大家 文章
縮放縮放的話,監聽鼠標滾動事件。向上滾動放大,向下滾動縮小;這里要注意控制最小縮放值。
還要注意的是圖片在邊界的縮放,不然圖片可能會移動在屏幕外。
需要做的處理是判斷左邊界跟圖片的寬度。
代碼實現:
// 控制滾輪縮放 const zoom = (onWheelEvent, dom) => { let e = onWheelEvent; let imageModalWidth = parseInt(dom.style.width); let modalLeft = parseInt(dom.style.left); // 計算縮放后的大小 每一次滾輪 100px let calcWidth = imageModalWidth - e.deltaY; // 限制最小 width = 400 if (calcWidth <= 300) { return; } // 不讓modal由于縮小消失在視野中 if (modalLeft + calcWidth < 50) { return; } dom.style.width = `${calcWidth}px`; };
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99806.html
摘要:參考了很多別人寫的代碼,最后終于弄明白了其中的原理,自己也寫了一個。效果圖如下地址如下拖拽類封裝代碼使用方法引入和對應的。如果沒有為的結構,就創建。鼠標移動時,記錄再次計算鼠標位置距離中心位置的的反正切函數。 在公司做一個h5編輯平臺,中間需要對元素進行拖拽、放大縮小、旋轉等操作,且需要對文本、圖片、音樂組件等不同元素都可以具備這些功能。參考了很多別人寫的代碼,最后終于弄明白了其中的原...
這只是個開頭 說在最前面,本文是一個系列文章的開頭, 這個系列里我會講如何用typescript開發一款支持pc和手機端的手勢庫any-touch, 以及通過jest讓你的代碼測試覆蓋率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目錄 用TypeScript開發手勢庫 - (2)tsconfig.json & r...
摘要:擁有兩個版本,無依賴的獨立版和版本。除了對象,也可監聽內元素的手勢需要引擎內置對象支持綁定相關事件。據不完全統計,目前服務于興趣部落群動漫騰訊學院騰訊等多個部門團隊和項目。也可以在事件回調里根據攜帶的信息使用去操作。 簡介 針對多點觸控設備編程的Web手勢組件,快速幫助你的web程序增加手勢支持,也不用再擔心click 300ms的延遲了。擁有兩個版本,無依賴的獨立版和react版本。...
摘要:時間選擇的表盤其實有兩個,一個是小時的選擇,另一個則是分鐘的選擇。也就是說,第一步選擇小時,第二部選擇分鐘它是一個小時制的時間選擇器。而則用于處理拖拽事件,標記著當前是否處于被拖拽狀態。 本文的源碼全部位于github項目倉庫react-times,如果有差異請以github為準。最終線上DEMO可見react-times github page 文章記錄了一次創建獨立React組件...
閱讀 3564·2023-04-26 02:05
閱讀 2003·2021-11-19 11:30
閱讀 4202·2021-09-30 09:59
閱讀 3175·2021-09-10 10:51
閱讀 2605·2021-09-01 10:30
閱讀 1470·2021-08-11 11:20
閱讀 2615·2019-08-30 15:54
閱讀 563·2019-08-30 10:49