From 0e35732d3d2de23818f39e6a723444cc03d01cbd Mon Sep 17 00:00:00 2001 From: yikjunma Date: Tue, 8 Apr 2025 13:25:23 +0900 Subject: [PATCH 1/2] Mouse event for canvas --- content/en/snippets/.DS_Store | Bin 0 -> 6148 bytes .../en/snippets/mouse/canvas_mouse_event.md | 45 ++++++++++++++++++ .../ja/snippets/mouse/canvas_mouse_event.md | 45 ++++++++++++++++++ 3 files changed, 90 insertions(+) create mode 100644 content/en/snippets/.DS_Store create mode 100644 content/en/snippets/mouse/canvas_mouse_event.md create mode 100644 content/ja/snippets/mouse/canvas_mouse_event.md diff --git a/content/en/snippets/.DS_Store b/content/en/snippets/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..15c5ee47946fc7abe8adae21db23c0a57d1c94d0 GIT binary patch literal 6148 zcmeHKISv9b4752UBpOP}e1RWC2wt!spa9WuNFb=U;$1wA@zJbSbWniCk~4|pNt7wp zYZ1}qZMzVeiO2+QC=VO@X8Yzn8)QU*aGbHbH<#1leA@SN-vx|2mZO~ICf5$%c4$<9 z3Qz$mKn1A4rxnNwJDGm^V4g<>sKC!FVBd!VH>`Bxq5@RluN2VHs#z`Zq^zyI$62i{@D1E@o^UhFor1y3G0@8~7FLeuo)me-=Gd=^ UZJ^T;cRG+i1Evd&3Vd6E7yeKb)Bpeg literal 0 HcmV?d00001 diff --git a/content/en/snippets/mouse/canvas_mouse_event.md b/content/en/snippets/mouse/canvas_mouse_event.md new file mode 100644 index 0000000..cf3dc2e --- /dev/null +++ b/content/en/snippets/mouse/canvas_mouse_event.md @@ -0,0 +1,45 @@ +--- +title: "Canvas mouse event" +weight: 80 +ie_support: true +--- + +Use this snippet to click on an area wihtin a canvas element. + +Replace the values in the code as needed. + + +```js +// Replace this with your desired CSS selector +var selector = "Selector here"; + +// Find the element +var element = document.querySelector(selector); + +if (!element) { + throw new Error("Error: cannot find the element with selector (" + selector + ")."); +} + +// Get the element's position and size +var rect = element.getBoundingClientRect(); + +// Change this to the xy click coordinates you need to target +var clickX = rect.left + rect.width / 4; +var clickY = rect.top + rect.height / 4; + +// List of mouse events to dispatch +// Remove the mouse eventst that are not relavent +var mouseEvents = ['mouseover', 'mouseenter', 'mousedown', 'mouseup', 'click', 'dblclick', 'mouseout']; + +// Dispatch each event +mouseEvents.forEach(function(eventType) { + var event = new MouseEvent(eventType, { + bubbles: true, + cancelable: true, + clientX: clickX, + clientY: clickY + }); + + element.dispatchEvent(event); +}); +``` diff --git a/content/ja/snippets/mouse/canvas_mouse_event.md b/content/ja/snippets/mouse/canvas_mouse_event.md new file mode 100644 index 0000000..594056f --- /dev/null +++ b/content/ja/snippets/mouse/canvas_mouse_event.md @@ -0,0 +1,45 @@ +--- +title: "キャンバスのマウスイベント" +weight: 80 +ie_support: true +--- + +このスニペットを使用して、`canvas` 要素内の特定の領域をクリックできます。 + +必要に応じてコード内の値を変更してください。 + + +```js +// 使用したい CSS セレクターをここに指定します +var selector = "Selector here"; + +// 要素を取得 +var element = document.querySelector(selector); + +if (!element) { + throw new Error("Error: cannot find the element with selector (" + selector + ")."); +} + +// 要素の位置とサイズを取得 +var rect = element.getBoundingClientRect(); + +// 対象としたいクリック位置の座標を指定（ここでは要素の1/4の位置） +var clickX = rect.left + rect.width / 4; +var clickY = rect.top + rect.height / 4; + +// 発火させるマウスイベントの一覧 +// 不要なマウスイベントは削除してください +var mouseEvents = ['mouseover', 'mouseenter', 'mousedown', 'mouseup', 'click', 'dblclick', 'mouseout']; + +// 各イベントを順に発火させる +mouseEvents.forEach(function(eventType) { + var event = new MouseEvent(eventType, { + bubbles: true, + cancelable: true, + clientX: clickX, + clientY: clickY + }); + + element.dispatchEvent(event); +}); +``` From 4fa82a5b5505d1b94aec289066f801b61b132a14 Mon Sep 17 00:00:00 2001 From: yikjunma Date: Tue, 8 Apr 2025 13:34:08 +0900 Subject: [PATCH 2/2] Update canvas_mouse_event.md --- content/en/snippets/mouse/canvas_mouse_event.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/content/en/snippets/mouse/canvas_mouse_event.md b/content/en/snippets/mouse/canvas_mouse_event.md index cf3dc2e..7413f45 100644 --- a/content/en/snippets/mouse/canvas_mouse_event.md +++ b/content/en/snippets/mouse/canvas_mouse_event.md @@ -4,11 +4,10 @@ weight: 80 ie_support: true --- -Use this snippet to click on an area wihtin a canvas element. +Use this snippet to click on an area within a canvas element. Replace the values in the code as needed. - ```js // Replace this with your desired CSS selector var selector = "Selector here"; @@ -28,7 +27,7 @@ var clickX = rect.left + rect.width / 4; var clickY = rect.top + rect.height / 4; // List of mouse events to dispatch -// Remove the mouse eventst that are not relavent +// Remove the mouse events that are not relevant var mouseEvents = ['mouseover', 'mouseenter', 'mousedown', 'mouseup', 'click', 'dblclick', 'mouseout']; // Dispatch each event @@ -41,5 +40,4 @@ mouseEvents.forEach(function(eventType) { }); element.dispatchEvent(event); -}); -``` +}); \ No newline at end of file