uniapp中實現canvas超出屏幕滾動查看功能
更新時間：2024年03月28日 12:09:53 作者：一只花小妖
親愛的小伙伴,當你需要在uniapp中使用canvas繪制一個超長圖,就類似于橫向的流程圖時,這個canvas超出屏幕部分拖動屏幕查看會變得十分棘手,怎么解決這個問題呢,下面小編給大家介紹uniapp中實現canvas超出屏幕滾動查看功能,感興趣的朋友一起看看吧
親愛的小伙伴，當你需要在uniapp中使用canvas繪制一個超長圖，就類似于橫向的流程圖時，這個canvas超出屏幕部分拖動屏幕查看會變得十分棘手。我查閱了大量資料，甚至是問了無數遍AI，得到的結果只有很敷衍的監(jiān)聽touch,然后計算偏移量，然后重繪?？墒?，你想想，如果一次繪圖里邊有成百上千個元素，還有很大的圖片，你重繪？那不得卡死。終于，在一次詢問AI時給了我一絲曙光，并且實踐告訴我，這個方法絕對管用！
1.使用scroll-view嵌套canvas，官網是說不許嵌套的，但是我們可以另辟蹊徑，滾動的關鍵就再這個onTouchMove方法中
<scroll-view ref="scrollView" scroll-x scroll-y style="height: 100vh;" @touchmove="onTouchMove"> <canvas canvas-id="myCanvas" id="myCanvas" @tap="handleCanvasTap" ref="myCanvas" style="width: 5000rpx; height: 200vh"></canvas> </scroll-view>
2.定義參數
data(){
retrun{
startX: 0,
startY: 0,
offsetX: 0,
offsetY: 0,
context: null,
endX: 0,
endY: 0,
isMoving: false,
}
}3.關鍵方法
onTouchMove(e){
if (this.isMoving) {
const deltaX = e.touches[0].clientX - this.startX;
const deltaY = e.touches[0].clientY - this.startY;
const query = uni.createSelectorQuery().in(this);
query.select('#myCanvas').boundingClientRect().exec((res) => {
const canvas = res[0].node;
canvas.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
});
this.endX = e.touches[0].clientX;
this.endY = e.touches[0].clientY;
}
}4.你的canvas屬性要跟的我一致，包你成功！
到此這篇關于uniapp中實現canvas超出屏幕滾動查看的文章就介紹到這了,更多相關uniapp canvas滾動查看內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Prototype是一個JavaScript框架，旨在簡化動態(tài)Web應用程序的開發(fā)。原型被稱為作為一個單一的文件分發(fā)的prototype.js，本文給大家介紹prototype框架，感興趣的朋友一起學習吧2015-11-11
經常用到javascript對dom，喜歡這方便的朋友也很多，要想更好的對dom進行操作，這些基礎一定要知道的。2010-04-04
這篇文章主要介紹了JavaScript原型與原型鏈,結合實例形式分析了JavaScript原型與原型鏈基本概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-05-05
腳本藏身之處不過有四： 1、<script>標簽、<link>標簽、<style>標簽、iframe標簽 2、on開頭的標簽屬性 3、javascript(vbscript)偽協(xié)議 4、css的epression2008-08-08
這篇文章主要介紹了js如何實現檢測網絡是否具體連接功能 ,需要的朋友可以參考下2014-05-05
JS自定義功能函數實現動態(tài)添加網址參數修改網址參數值
本文自定義JS功能函數可動態(tài)添加網址參數,修改網址參數值，具體實現如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要為大家介紹了使用cypress編寫第一個測試用例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
TypeScript工具類型Exclude與Omit的用法及解讀
本文深入講解了TypeScript中Exclude和Omit工具類型,從概念、語法、示例到實際應用場景進行了詳細分析,Exclude用于從聯(lián)合類型中排除指定類型,Omit則用于從對象類型中剔除指定屬性,結合示例幫助開發(fā)者掌握這兩個工具類型,提升TypeScript開發(fā)效率2026-04-04
Invalid?Host?header問題該如何解決的幾種方式
Invalid Host header是一個常見的錯誤信息,通常發(fā)生在Web應用程序中,下面這篇文章主要給大家介紹了關于Invalid?Host?header問題該如何解決的幾種方式,需要的朋友可以參考下2024-09-09
各種電商活動都喜換選擇限時秒殺活動形式，這篇文章主要為大家詳細介紹了JavaScript實現限時秒殺功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08