您現在的位置是:電腦技術吧?>? 基礎知識 ??>??事件,紀湘事件??>??正文詳情

事件,紀湘事件

操麗思2019-11-18 18:01:25 人圍觀
簡介407事件HTML 5畫布事件處理引入了DOM是web前端領域非常重要的一部分。DOM不僅用于處理HTML元素,還用于圖形編程。例如SVG繪圖,各種圖形都以DOM節點的形優衣庫事件完視頻

HTML5 Canvas的事件處理介紹 DOM是Web前端領域非常重要的組成部分,不僅在處理HTML元素時會用到DOM,圖形編程也同樣會用到。

比如SVG繪圖,各種圖形都是以DOM節點的形式插入到頁面中,這就意味著可以使用DOM方法對圖形進行操作。

比如有一個元素,可以直接用jquery增加click事件$('#p1').click(function(){})。

然而這種DOM處理方法在HTML5的Canvas里不再適用,Canvas使用的是另外一套機制,無論在Canvas上繪制多少圖形,Canvas都是一個整體,圖形本身實際都是Canvas的一部分,不可單獨獲取,所以也就無法直接給某個圖形增加JavaScript事件。

  Canvas的限制  在Canvas里,所有圖形都繪制在幀上,繪制方法不會將繪制好的圖形元素作為一個返回值輸出,js也無法獲取到已經繪制好的圖形元素。

比如:  代碼如下:  cvs = document.getElementById('mycanvas');  ctx = canvas.getContext('2d');  theRect = ctx.rect(10, 10, 100, 100);  ctx.stroke();  console.log(theRect); //undefined  這段代碼在canvas標簽里繪制了一個矩形,首先可以看到繪制圖形的rect方法沒有返回值。

如果打開瀏覽器的開發者工具,還可以看到canvas標簽內部沒有增加任何內容,而在js里獲取到的canvas元素以及當前的上下文,也都沒有任何表示新增圖形的內容。

  所以,前端常用的dom方法在canvas里是不適用的。

比如點擊上面Canvas里的矩形,實際點擊的是整個Canvas元素。

  給Canvas元素綁定事件  由于事件只能達到Canvas元素這一層,所以,如果想進一步深入,識別點擊發生在Canvas內部的哪一個圖形上,就需要增加代碼來進行處理。

基本思路是:給Canvas元素綁定事件,當事件發生時,檢查事件對象的位置,然后檢查哪些圖形覆蓋了該位置。

比如上面的例子里畫過一個矩形,該矩形覆蓋x軸10-110、y軸10-110的范圍。

只要鼠標點擊在這個范圍里,就可以視為點擊了該矩形,也就可以手動觸發矩形需要處理的點擊事件。

思路其實比較簡單,但是實現起來還是稍微有點復雜。

不僅要考慮這個判斷過程的效率,有些地方還需要重新判斷事件類型,設置要重新定義一個Canvas內部的捕獲和冒泡機制。

  首先要做的,是給Canvas元素綁定事件,比如Canvas內部某個圖形要綁定點擊事件,就需要通過Canvas元素代理該事件:  代碼如下:  cvs = document.getElementById('mycanvas');  cvs.addEventListener('click', function(e){  //...  }, false);  接下來需要判斷事件對象發生的位置,事件對象e的layerX和layerY屬性表示Canvas內部坐標系中的坐標。

但是這個屬性Opera不支持,Safari也打算移除,所以要做一些兼容寫法:  代碼如下:  function getEventPosition(ev){  var x, y;  if (ev.layerX || ev.layerX == 0) {  x = ev.layerX;  y = ev.layerY;  } else if (ev.offsetX || ev.offsetX == 0) { // Opera  x = ev.offsetX;  y = ev.offsetY;  }  return {x: x, y: y};  }  //注:使用上面這個函數,需要給Canvas元素的position設為absolute。

  現在有了事件對象的坐標位置,下面就要判斷Canvas里的圖形,有哪些覆蓋了這個坐標。

  isPointInPath方法  Canvas的isPointInPath方法可以判斷當前上下文的圖形是否覆蓋了某個坐標,比如:  代碼如下:  cvs = document.getElementById('mycanvas');  ctx = canvas.getContext('2d');  ctx.rect(10, 10, 100, 100);  ctx.stroke();  ctx.isPointInPath(50, 50); //true  ctx.isPointInPath(5, 5); //false  接下來增加一個事件判斷,就可以判斷一個點擊事件是否發生在矩形上:  代碼如下:  cvs.addEventListener('click', function(e){  p = getEventPosition(e);  if(ctx.isPointInPath(p.x, p.y)){  //點擊了矩形  }  }, false);  以上就是處理Canvas事件的基本方法,但是上面的代碼還有局限,由于isPointInPath方法僅判斷當前上下文環境中的路徑,所以當Canvas里已經繪制了多個圖形時,僅能以最后一個圖形的上下文環境來判斷事件,比如:  代碼如下:  cvs = document.getElementById('mycanvas');  ctx = canvas.getContext('2d');  ctx.beginPath();  ctx.rect(10, 10, 100, 100);  ctx.stroke();  ctx.isPointInPath(20, 20); //true  ctx.beginPath();  ctx.rect(110, 110, 100, 100);  ctx.stroke();  ctx.isPointInPath(150, 150); //true  ctx.isPointInPath(20, 20); //false  從上面這段代碼可以看到,isPointInPath方法僅能識別當前上下文環境里的圖形路徑,而之前繪制的路徑,無法回溯判斷。

這種問題的解決方法是:當點擊事件發生時,重繪所有圖形,每繪制一個就使用isPointInPath方法,判斷事件坐標是否在該圖形覆蓋范圍內。

  循環重繪和事件冒泡  為了實現循環重繪,所以就要將圖形的基本參數事先保存下來:  代碼如下:  arr = [  {x:10, y:10, width:100, height:100},  {x:110, y:110, width:100, height:100}  ];  cvs = document.getElementById('mycanvas');  ctx = canvas.getContext('2d');  draw();  function draw(){  ctx.clearRech(0, 0, cvs.width, cvs.height);  arr.forEach(function(v){  ctx.beginPath();  ctx.rect(v.x, v.y, v.width, v.height);  ctx.stroke();  });  }  上面的代碼事先將兩個矩形的基本參數保存下來,每次調用draw方法,就會循環調用這些基本參數,用于繪制兩個矩形。

這里還使用了clearRect方法,用于在重繪時清空畫布。

接下來要做的是增加事件代理,以及在重繪時對每一個上下文環境使用isPointInPath方法:  代碼如下:  cvs.addEventListener('click', function(e){  p = getEventPosition(e);  draw(p);  }, false);  事件發生時,將事件對象的坐標傳給draw方法處理。

這里還需要對draw方法做一些小改動:  代碼如下:  function draw(p){  var who = [];  ctx.clearRech(0, 0, cvs.width, cvs.height);  arr.forEach(function(v, i){  ctx.beginPath();  ctx.rect(v.x, v.y, v.width, v.height);  ctx.stroke();  if(p ctx.isPointInPath(p.x, p.y)){  //如果傳入了事件坐標,就用isPointInPath判斷一下  //如果當前環境覆蓋了該坐標,就將當前環境的index值放到數組里  who.push(i);  }  });  //根據數組中的index值,可以到arr數組中找到相應的元素。

  return who;  }  在上面代碼中,點擊事件發生時draw方法會執行一次重繪,并在重繪過程中檢查每一個圖形是否覆蓋了事件坐標,如果判斷為真,則視為點擊了該圖形,并將該圖形的index值放入數組,最后將數組作為draw方法的返回值。

在這種處理機制下,如果Canvas里有N個圖形,它們有一部分是重疊的,而點擊事件恰巧發生在這個重疊區域上,那么draw方法的返回數組里會有N個成員。

這時就有點類似事件冒泡的情況,數組的最后一個成員處于Canvas最上層,而第一個成員則在最下層,我們可以視為最上層的成員是e.target,而其他成員則是冒泡過程中傳遞到的節點。

當然這只是最簡單的一種處理方法,如果真要模擬DOM處理,還要給圖形設置父子級關系。

  以上就是Canvas事件處理的基本方法。

在實際運用時,如何緩存圖形參數,如何進行循環重繪,以及如何處理事件冒泡,都還需要根據實際情況花一些心思去處理。

另外,click是一個比較好處理的事件,相對麻煩的是mouseover、mouseout和mousemove這些事件,由于鼠標一旦進入Canvas元素,始終發生的都是mousemove事件,所以如果要給某個圖形單獨設置mouseover或mouseout,還需要記錄鼠標移動的路線,給圖形設置進出狀態。

由于處理的步驟變得復雜起來,必須對性能問題提高關注。

版權聲明:本文由 操麗思 整理編輯。

原標題:Dyatlov事件,常仁堯事件結果

轉載注明出處:http://www.dn9ww09s.icu/basics/13572.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 藍牙的最大傳輸距離,藍牙在水中傳輸距離

    藍牙的最大傳輸距離,藍牙在水中傳輸距離 相關圖片藍牙傳輸在WiFi出現之前,藍牙是應用最廣泛的無線連接功能。即使在如今的WiFi時代,有了藍牙可穿戴設備,這項功能在手機中仍然扮演著非常重要的角色。藍牙耳機、運動手鐲等藍牙連...

  • 無線網絡被禁用啟用失敗,ccleaner官網怎么下載

    無線網絡被禁用啟用失敗,ccleaner官網怎么下載 相關圖片你沒有首選無線網絡 win10配置無線網絡時,有時無線適配器或訪問點有問題。有些用戶不知道如何解決。當你遇到這種情況時,你不必擔心。您通常可以通過排除故障并遵循相應的解決...

  • 卡通動畫,卡通人物有哪些

    卡通動畫,卡通人物有哪些 相關圖片動畫可愛人物動畫分析:1。眉毛是固定的,只占一層;2。睜眼和閉眼的時間間隔:本例中,從睜眼到閉眼總共有20幀,閉眼10幀,睜眼5幀,從睜眼到閉眼3的動畫過程有5幀。注意眼睛漫...

  • 抖音后期自己配音,抖音里配音的圓圈怎么弄

    抖音后期自己配音,抖音里配音的圓圈怎么弄 相關圖片抖音上的siri配音自助餐作為一種流行的手機短視頻拍攝應用,受到了很多人的喜愛。最近,有很多用戶想知道如何配音和編輯視頻。現在,超人軟件會給你帶來震動的聲音抖音怎么自己...

  • 如何制作導航條,導航條的制作

    如何制作導航條,導航條的制作 相關圖片ps導航條制作教程一。首先,創建一個1x6表,參數為:border=0cellpacking=3cellpadding=0;2。在表格的每個單元格中插入寬度和高度設置為100%的dreamweaver制作導航條...

  • prtscsysrq鍵在哪,prtscsysrq鍵

    prtscsysrq鍵在哪,prtscsysrq鍵 相關圖片電腦上prtsc鍵的功能有些人知道屏幕截圖的鍵盤上有一個prtsc sysrq鍵,但是如何使用它呢?一些用戶按prtsc sysrq鍵,但沒有響應。原因是什么?實際上,prtsc syinsert鍵...

  • quik是什么軟件怎么用,quik是什么軟件有用嗎

    quik是什么軟件怎么用,quik是什么軟件有用嗎 相關圖片quik有什么用最近,很多華為用戶都在問什么是軟件Quik。Quik應用程序是系統庫故事相冊應用程序,它是為系統庫預制的精彩瞬間功能。為了避免干擾,默認情況下圖標隱藏在桌面上。q...

  • 如何從團隊合作方面評價,如何評論一個團隊

    如何從團隊合作方面評價,如何評論一個團隊 相關圖片團隊個人評價在設計過程中,設計評審是一個重要的環節。無論是在一個獨立的設計團隊中,還是在一個具有移動性和距離感的設計團隊中,它都是整個設計過程中不可或缺的一部分。...

  • 使用方法是什么,正確使用放大鏡的方法是什么

    使用方法是什么,正確使用放大鏡的方法是什么 相關圖片試管架使用方法什么是ipscan?對于普通用戶來說,ipscan是一個奇怪的工具。但是對于那些經常與網絡和網絡管理員聯系的人來說,這種實用的IP地址掃描軟件可以節省他們在網絡滅火器使...

  • html5標簽,html常用標簽

    html5標簽,html常用標簽 相關圖片htmlHTML5中新的details標簽允許用戶創建一個可擴展和可折疊的組件,使文本或標題包含一些隱藏信息。通常,詳細信息用于進一步解釋頁面上顯示的內容。它顯示了與jHTML5...

熱評文章

  • 抖音的相機是什么相機,抖音相機

    抖音的相機是什么相機,抖音相機 相關圖片抖音同款相機樓層攝像機是近年來自助餐廳推出的一項新功能。我相信很多用戶還是不知道自助餐故事相機是什么?怎么玩?然后,超人軟件編輯將為您帶來自助故事相機的相關介紹。...

  • 落葉飄飄像,落葉飄飄

    落葉飄飄像,落葉飄飄 相關圖片秋風蕭瑟落葉飄飄本教程主要使用焰火制作落葉效果落葉飄飄落葉在笑...

  • 全民k歌哪個模式好聽,全民k歌練唱評價順序

    全民k歌哪個模式好聽,全民k歌練唱評價順序 相關圖片全民k歌唱歌技巧我想每個喜歡唱歌的人都用過全國性的卡拉OK。你知道怎么唱好國歌嗎?如何開始合唱?現在,跟著超人軟件來了解一下民族k歌的相關內容,希望大家都喜歡全民k歌vi...

  • cue文件是什么,cue文件是什么意思

    cue文件是什么,cue文件是什么意思 相關圖片生成cue文件是什么意思這里我們所說的線索不是臺灣綜藝節目中的口頭語言,而是指CD-ROM圖像(圖像)輔助文件或標記文件,稱為CuSeHET。提示文件不僅可以減少錄制的準備工作,提高錄...

  • 簡述app圖標尺寸設計規范,app視覺設計規范

    簡述app圖標尺寸設計規范,app視覺設計規范 相關圖片如何制作app圖標產品圖標網格形成了一個統一的標準,為圖形元素的定位建立了一套清晰的規則。這種標準化帶來了靈活和連貫的系統,以上是網格的基礎。可以單擊鼠標右鍵并保存用...

  • 電腦磁盤碎片整理有什么用,win10磁盤碎片整理有什么用

    電腦磁盤碎片整理有什么用,win10磁盤碎片整理有什么用 相關圖片win7碎片整理有什么用當電腦在一段時間后有點卡住時,我們通常聽到人們說最好清理磁盤垃圾,并對磁盤碎片進行一些清理。由于電腦配有360或保安管家,電腦垃圾往往會自動清理。但...

  • 華為mate10和華為p10對比,華為mate9與p10的區別

    華為mate10和華為p10對比,華為mate9與p10的區別 相關圖片mate9pro和p10哪個好雖然mate10和P10都是華為的產品,但在價格和定位上都有所不同。哪一個更好取決于自己的需求價格是不同選擇的最大原因,華為P10 4GB內存和64內存華為p10plus和mate9...

  • textarea回車換行,textarea不能回車換行

    textarea回車換行,textarea不能回車換行 相關圖片textarea內容回車實現換行注意:文本區域值中的返回換行代碼如下:%=內容值%。更換(RN,)。替換(n,)%textarea輸入換行...

  • bt 下載種子鏈接,什么叫bt種子文件

    bt 下載種子鏈接,什么叫bt種子文件 相關圖片迅雷種子下載什么意思BT種子是一種基于P2P原理的下載方法。下載的人越多,速度就越快!P2P是點對點的傳輸。您的下載需要另一臺機器來提供服務,它將通過點對點傳輸來傳輸您需要下...

  • ad9鼠標跟隨,鼠標跟隨特效代碼

    ad9鼠標跟隨,鼠標跟隨特效代碼 相關圖片flash怎么做鼠標跟隨本教程是flash創建的基礎課程,主要包括工具的使用、顏色的使用和修補形狀的制作。代碼部分沒有說明打開flash,設置文檔屬性大小:寬1024,高768,背景:鼠標跟隨...

關注微信

变脸官网查询