分享一個在canvas中的點選事件

阿新 • • 發佈：2019-02-05

網上看到許多寫的canvas中事件，不勝其煩，覺得寫的也不知道是什麼

今天思考了一個分享給大家，歡迎指導改進

html

<body>
    <canvas id="mycanvas" width="500" height="500"></canvas>
</body>

let canvas = document.getElementById('mycanvas'),
    ctx = canvas.getContext('2d')
//儲存所畫圖形區域
//let tempXY = {x,y,r,i},
let clickXY = []
//圖形1 

ctx.fillRect(0,0,100,100)
clickxY.push({x:0,y:0,r:100})
//圖形2
ctx.fillRect(150,150,100,100)
clickxY.push({x:150,y:150,r:100})


canvas.addEventListener('click', function(e) {
     let canvas = canvas 
     var x = event.pageX - canvas.getBoundingClientRect().left
     var y = event.pageY - canvas.getBoundingClientRect().top
    for 
(let i of clickXY) {
        if (x > (i.x - i.r) && x < (i.x + i.r) && y > (i.y - i.r) && y < (i.y + i.r)) {
          alert(i)
          //這裡可以根據i 來確定你需要執行的方法
          break
        }
    }
}, false)

可執行圖形

<!doctype html>
<html lang="en">

<head> 

    <meta charset="UTF-8">
    <title>圓形擴散</title>
    <style>
        canvas {
            background: #000000;
        }
    </style>
</head>

<body>
   <canvas id="mycanvas" width="500" height="500"></canvas>
   <script>
        let canvas = document.getElementById('mycanvas'),
            ctx = canvas.getContext('2d')
        //儲存所畫圖形區域
        //let tempXY = {x,y,r,i},
        let clickXY = []

        ctx.fillStyle = "red"
        //圖形1
        ctx.fillRect(0,0,100,100)
        clickXY.push({x:0,y:0,r:100,i:1})

        //圖形2
        ctx.fillStyle = "red"
        ctx.fillRect(200,200,100,100)
        clickXY.push({x:200,y:200,r:100,i:2})

        canvas.addEventListener('click', function(e) {
             var x = event.pageX - canvas.getBoundingClientRect().left
             var y = event.pageY - canvas.getBoundingClientRect().top
            for(let i of clickXY) {
                if (x > (i.x - i.r) && x < (i.x + i.r) && y > (i.y - i.r) && y < (i.y + i.r)) {
                  alert("我是第" + i.i + "個圖形")
                  //這裡可以根據i 來確定你需要執行的方法
                  break
                }
            }
        }, false)
   </script>
</body>


</html>

Qt事件處理機制整個流程--以滑鼠在一個視窗中點選為例

轉載自：http://mobile.51cto.com/symbian-272812.htm，在此謝謝原作者的分享！ ------------------------第一部分---------------------- 本篇來介紹Qt 事件處理機制。深入瞭解事件處理系統對

Unity 多Canvas 點選事件的響應

問題：Canvas在World Space模式下無法接受點選事件解決辦法： 1.Canvas的EventCamera如果為空，則設定對應Canvas的Camera的Tag為MainCamera 2.指定Canvas的EventCamera為對應的Camera 其

JS中對於for迴圈中點選事件的理解（通俗版）

在學習JS時遇到了一個問題，就是如果有多個按鈕時，我們可以通過document.getElementByTagName（“button”）的方式來獲取事件陣列，在獲取後我們需要監聽每一個按鈕是否被點選。最簡單的方式就是分開寫，一個按鈕對應一個點選事件函式，這樣雖然通俗易懂，但是這樣的程式碼量是十分大

layer中點選事件不起作用？？

不起作用： $('#test').on('click', function() { layer.msg('響應點選事件'); }); 起作用了： $(document).on('click', '#test', function() { layer.msg('響應點選

Android中點選事件回撥介面踩坑心得

有時候寫程式碼的時候有這樣的功能要求，如在ListView或recyclerView中的Item中的控制元件（如Button，TextView）上添加回調介面事件。其實難點就在添加回調介面事件上，怎麼寫介面，介面回撥在哪裡，這才是關鍵。下面是個例子：介面的寫法：一下是兩介

(新手篇)關於小程式中點選事件重複觸發的問題

今天碰到了點選事件重複觸發的問題例如:我們在實現切入切出層的時候，我們點選一個按鈕想觸發我們需要的內容顯示出來，然後再把內容隱藏有時候可能會遇到點選後重復觸發看圖：點了一次，然後我們想點選確定把視窗去掉卻發現它的父元素也被觸發了這是點選第一次的

一個dom,點選事件觸發兩個事件是同步還是非同步

問題產生原因：使用者充值介面，一個選擇支付方式的dom綁定了一個插入訂單的 ajax。為了監測使用者點了哪個支付方式，現在要把選擇哪個支付方式記錄下來。當然可以在這個ajax請求的方法裡面加入一個插入監測資料。但是考慮到插入訂單的

iOS Safari 中點選事件失效的解決辦法

問題描述當使用委託給一個元素新增click事件時，如果事件是委託到 document 或 body 上，並且委託的元素是預設不可點選的（如 div, span 等），此時 click 事件會失效。 <!DOCTYPE html> <html>

安卓小日記練習（8）listview的另一個item點選事件的介面和資料儲存

我們已經實現了listview的其中一種item的點選事件，和初步實現了第二種item點選之後的資料傳遞。現在我們要寫日記所以需要edittext控制元件，和進一步完善控制元件，以及資料（edit的內容）的儲存。我們這裡採取檔案儲存的方式。

安卓 ListView中點選事件獲取Item中的物件

註明: ListView的物件 : mListView 繼承於BaseAdapter自定義的adapter ResultItem:每個Item資料的類private ListView mListVie

分享一個在canvas中的點選事件

網上看到許多寫的canvas中事件，不勝其煩，覺得寫的也不知道是什麼今天思考了一個分享給大家，歡迎指導改進 html <body> <canvas id="myca

一個不錯的HTML5 Canvas多層點選事件監聽例項

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style

MUI中點選推送訊息，若為同類型資訊，不關閉前一個頁面，開啟新頁面仍顯示前一個頁面資料的問題

最近公司在做的一個專案涉及個推推送，在寫推送過程中遇到了很多問題，現在把其中的一個問題與大家分享。我們要實現的功能是後臺推送過來，我要根據推送的資訊型別進入不同的頁面，展現不同的資訊，但在寫的過程中發現同一種類型資訊，在不關閉前一條資訊的情況下，點選下一條同類型的資訊，開啟的頁面還是顯示上

jquery中一個點選事件累計觸發問題詳解。

最近維護老的公司專案，jquery中事件累計觸發的bug是一個老生長談的問題，因此想要弄清楚就必須先弄清楚addEventListener和onclick系列方法的區別 W3C上原文如下 addEventListener is the way to register

flutter - 點選事件(一) - 自定義一個方便的點選控制元件

android中,所有View都可以直接setOnClickListener, RN中也有TouchableHightlight這樣的控制元件可以直接套在外面,ios中也可以有UIControl 這樣的控制元件可以直接新增點選事件. 那麼flutter中有嗎? 答案自然是有. Ges

微信分享，獲取分享點選事件，登入後才可以分享

1.登入微信公眾平臺 2.獲取開發者ID(AppID),開發者密碼(AppSecret) 3.配置js安全域名,下載.txt檔案放到專案跟目錄 4.控制器 <?php namespace M\Controller; use Think\Controller; class

js利用點選事件做一個簡單的計算器

原始碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g

8.0 Notification的使用1. 普通的notification 2. 帶進度條的notification 3. 自定義的notification，點選事件進入軟體的一個activity

實現功能：最終效果： activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.

vue中點選一個按鈕，顯示、隱藏搜尋框

iOS 添加了一個view，然後發現一點選事件就跑到父檢視

用另外一個JWViewController.view 新增到當前檢視的self.view上面，發現點選檢視上面的按鈕，直接響應的是self.view的事件，一看是JWViewController上面的view超出了螢幕，而在self.view裡邊移動JWViewController.view的時候，超出JWV

分享一個在canvas中的點選事件

相關推薦