どうやっていけばいいですか?座標にマウスをクリックし、キャンバスの要素かどうかが判別されます。
-
09-06-2019 - |
質問
何が最も簡単な方法の追加をクリックしイベントハンドラをキャンバスに要素を返します。x座標とy座標、クリック(相対canvas要素)?
のないレガシーブラウザの互換性に必要な、サファリ、オペラやFirefoxします。
解決
編集2018: この答えは古いでチェックのための古いブラウザが必要なもの clientX
や clientY
物件の全てが現在のブラウザを推奨いたします。するためにチェック Patriques回答 なります。
独自の回答:
としての記事で紹介されてこそのものが存在しない:
var x;
var y;
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;
完璧微でした。
他のヒント
更新 (5/5/16): patriques'回答 使用すべきではなく、その両方がより簡単に、より信頼性の高い。
以降のキャンバスだけではない風との対比で全てのページの canvas.offsetLeft/Top
い戻しで作られています。その数を返しますピクセルでのオフセット比較offsetParent要素できるように div
要素を含むキャンバスと position: relative
スタイル適用されます。にこに必要なループを通じて、チェーンの offsetParent
sを始め、canvas要素そのものです。このコードのコンビニエンスストアでの私にとって、試験、Firefox、Safariをご利用がで動作する必要がある。
function relMouseCoords(event){
var totalOffsetX = 0;
var totalOffsetY = 0;
var canvasX = 0;
var canvasY = 0;
var currentElement = this;
do{
totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
}
while(currentElement = currentElement.offsetParent)
canvasX = event.pageX - totalOffsetX;
canvasY = event.pageY - totalOffsetY;
return {x:canvasX, y:canvasY}
}
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;
最後の行にも便利な、マウスの相対座標となキャンバス要素になります。すべてのことになるするために必要なもの座標
coords = canvas.relMouseCoords(event);
canvasX = coords.x;
canvasY = coords.y;
の場合のように簡単ないクロスブラウザの機能からこのソリューションに努めました。この簡素化を@Aldekeins解が なjQuery.
function getCursorPosition(canvas, event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
console.log("x: " + x + " y: " + y);
}
モダンブラウザの現在の取り扱います。Chrome IE9、FirefoxのoffsetX/Yのようにこのパスのイベントからのクリックしハンドラです。
function getRelativeCoords(event) {
return { x: event.offsetX, y: event.offsetY };
}
最近のブラウザにも対応layerX/Yしかし、Chrome、IEの利用layerX/Yのための絶対オフセットのクリックし、ページを含むマージンのパディング等にFirefox、layerX/Y、offsetX/Yに相当すが、オフセットにな既存在します。なので、との互換性を維持するため、若干古いブラウザを使用でき
function getRelativeCoords(event) {
return { x: event.offsetX || event.layerX, y: event.offsetY || event.layerY };
}
より新鮮 Quirksmode の clientX
や clientY
方法に対応するために、すべての主要なブラウザを推奨いたします。なので、ここでは、コードを作ることは、スクロール事業部にページをスクロールバー:
function getCursorPosition(canvas, event) {
var x, y;
canoffset = $(canvas).offset();
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left);
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1;
return [x,y];
}
が必要である jQuery のための $(canvas).offset()
.
また、フルdemostration動作する各ブラウザのソースコードの溶液にこの問題: 座標にマウスをクリックキャンバスにJavascript.試しにアップデートにコメントをコードをコピーし、貼り付けることもできテキストエディタ.使い勝手はそのままにしてexample.html と、最終的に、ファイルを開き、ブラウザです。
こちらは小さな変更 ライアンArteconaの回答 のためのキャンバス、変数(%)幅:
HTMLCanvasElement.prototype.relMouseCoords = function (event) {
var totalOffsetX = 0;
var totalOffsetY = 0;
var canvasX = 0;
var canvasY = 0;
var currentElement = this;
do {
totalOffsetX += currentElement.offsetLeft;
totalOffsetY += currentElement.offsetTop;
}
while (currentElement = currentElement.offsetParent)
canvasX = event.pageX - totalOffsetX;
canvasY = event.pageY - totalOffsetY;
// Fix for variable canvas width
canvasX = Math.round( canvasX * (this.width / this.offsetWidth) );
canvasY = Math.round( canvasY * (this.height / this.offsetHeight) );
return {x:canvasX, y:canvasY}
}
障害を起こす場合があいながらの座標変換;複数の非クロスブラウザの値が返されるようにするにはをクリックします。使用clientXとclientYだけでは不十分であればブラウザのウィンドウでスクロール(確Firefox3.5やChrome3.0).
この操作モード 記事に関するより正しく機能するのいずれかを使用できpageXはpageY又は組み合わせclientXと。ます。scrollLeftとclientYと。ます。scrollTopの算定をクリックし座ドキュメントからの相対です。
更新:また、offsetLeftとoffsetTopは相対的に上述の要素ではなく、リサイズです。キャンバスのpadding:スタイルを適用しませんの報告書の左上のコンテンツなど地域のoffsetLeft.があり様々なソリューションにこの問題最も単純な一が可能となりましたが全国境パディング等スタイルのキャンバスそのものではなく適用し、ボックスを含有し、キャンバスに入力します。
お使いいただくことによって、これは答え ループを通じて親要素 いすべての種類の 変なもの.
の HTMLElement.getBoundingClientRect
方法は取扱いを実際の画面の位置の要素になります。このスクロールなもののように scrollTop
す必要はない:
(MDN) の額のスクロールされていることを、ビューポート( その他のスクロール可能な素子 が考慮されるようになるをコンピューティングするこ 境界の矩形
通常の画像
の 非常に単純なアプローチ て掲載しておりましたがこちらです。これが正しいと な野生のCSS 規定するものです。
取扱いを伸ばしてキャンバス/イメージ
画像のピクセル幅な合でCSS幅する必要がありますか率のピクセル値:
/* Returns pixel coordinates according to the pixel that's under the mouse cursor**/
HTMLCanvasElement.prototype.relativeCoords = function(event) {
var x,y;
//This is the current screen rectangle of canvas
var rect = this.getBoundingClientRect();
var top = rect.top;
var bottom = rect.bottom;
var left = rect.left;
var right = rect.right;
//Recalculate mouse offsets to relative offsets
x = event.clientX - left;
y = event.clientY - top;
//Also recalculate offsets of canvas is stretched
var width = right - left;
//I use this to reduce number of calculations for images that have normal size
if(this.width!=width) {
var height = bottom - top;
//changes coordinates by ratio
x = x*(this.width/width);
y = y*(this.height/height);
}
//Return as an array
return [x,y];
}
どのキャンバス上no border, を動作させることができ伸ばして画像(jsFiddle).
取り扱いCSS境
の場合はキャンバス上の厚さのボー さらに少し複雑.しょう文字通りが必要"を差し引きボーダのバウンディング矩形を塗りつぶします。これをベースに制御を行っています。 .getComputedStyle.この 回答を記述する工程.
次に、この関数が少:
/* Returns pixel coordinates according to the pixel that's under the mouse cursor**/
HTMLCanvasElement.prototype.relativeCoords = function(event) {
var x,y;
//This is the current screen rectangle of canvas
var rect = this.getBoundingClientRect();
var top = rect.top;
var bottom = rect.bottom;
var left = rect.left;
var right = rect.right;
//Subtract border size
// Get computed style
var styling=getComputedStyle(this,null);
// Turn the border widths in integers
var topBorder=parseInt(styling.getPropertyValue('border-top-width'),10);
var rightBorder=parseInt(styling.getPropertyValue('border-right-width'),10);
var bottomBorder=parseInt(styling.getPropertyValue('border-bottom-width'),10);
var leftBorder=parseInt(styling.getPropertyValue('border-left-width'),10);
//Subtract border from rectangle
left+=leftBorder;
right-=rightBorder;
top+=topBorder;
bottom-=bottomBorder;
//Proceed as usual
...
}
うには思えない混乱この最終機能です。自分を見で JsFiddle.
注記
ない場合はのように改変、ネイティブ prototype
sを変えるだけの機能を呼び出す (canvas, event)
(および置き換え this
と canvas
).
こちらはチュートリアル-
http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
writeMessage(canvas, message);
}, false);
武器agiは、dexで下がらないboxerぐ!
JQueryを使った、2016年にはをクリックからの相対座標をキャンバスにい:
$(canvas).click(function(jqEvent) {
var coords = {
x: jqEvent.pageX - $(canvas).offset().left,
y: jqEvent.pageY - $(canvas).offset().top
};
});
この作品でキャンバスのオフセット)jqEvent.pageX/Yドキュメントからの相対関わらずスクロール位置にします。
注の場合はキャンバスのスケールそしてこれらの座標と同じではありませキャンバス 論理座標.で取得するという も :
var logicalCoords = {
x: coords.x * (canvas.width / $(canvas).width()),
y: coords.y * (canvas.height / $(canvas).height())
}
このリンク http://miloq.blogspot.in/2011/05/coordinates-mouse-click-canvas.html
<style type="text/css">
#canvas{background-color: #000;}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init, false);
function init()
{
var canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", getPosition, false);
}
function getPosition(event)
{
var x = new Number();
var y = new Number();
var canvas = document.getElementById("canvas");
if (event.x != undefined && event.y != undefined)
{
x = event.x;
y = event.y;
}
else // Firefox method to get the position
{
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
alert("x: " + x + " y: " + y);
}
</script>
試作、利用cumulativeOffset()の再帰結として記述したライアンArteconaます。
いえい:
var canvas = yourCanvasElement;
var mouseX = (event.clientX - (canvas.offsetLeft - canvas.scrollLeft)) - 2;
var mouseY = (event.clientY - (canvas.offsetTop - canvas.scrollTop)) - 2;
この正確な位置でマウスポインタです。
デモを見で http://jsbin.com/ApuJOSA/1/edit?html出力 .
function mousePositionOnCanvas(e) {
var el=e.target, c=el;
var scaleX = c.width/c.offsetWidth || 1;
var scaleY = c.height/c.offsetHeight || 1;
if (!isNaN(e.offsetX))
return { x:e.offsetX*scaleX, y:e.offsetY*scaleY };
var x=e.pageX, y=e.pageY;
do {
x -= el.offsetLeft;
y -= el.offsetTop;
el = el.offsetParent;
} while (el);
return { x: x*scaleX, y: y*scaleY };
}
ここがシンプルなもう少し複雑な話題でしていたように見えます。
初のオフが常に混同質問をこちら
どのように要素の相対的なマウスの座標
どのようにキャンバスのピクセルにマウス座標、2次元キャンバスのAPIではWebGL
なので、回答
どのように要素の相対的なマウスの座標
るか否かの要素は、キャンバスに乗り要素の相対的なマウスの座標にしているかを確認しました。
あり2簡単に答えを"という質問に対しどのようにキャンバスの相対的なマウス座標"
簡単に答え#1用 offsetX
や offsetY
canvas.addEventListner('mousemove', (e) => {
const x = e.offsetX;
const y = e.offsetY;
});
この答えに作用Chrome、Firefox、Safari.とは異なり全てのその他のイベント値 offsetX
や offsetY
取CSSに変換します。
最大の問題と offsetX
や offsetY
は2019/05ものが存在しないタッチのイベントなどを使用する事が出来ませんとiOSのサファリがあります。い存在にポインタのイベントに存在するChromeやFirefoxはサファリが うSafariい.
もう一つの問題のイベントにはキャンバスそのものです。ごちその他の要素または窓の外にはできません以降のキャンバスにするのに参考になる。
簡単に答え#2 clientX
, clientY
や canvas.getBoundingClientRect
いつCSSに変換次に単純な回答は、電話 canvas. getBoundingClientRect()
減し、左から clientX
や top
から clientY
として
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
});
この方法などありませんCSSに変換.うとともに、タッチイベントですiOSのサファリ
canvas.addEventListener('touchmove', (e) => {
const rect = canvas. getBoundingClientRect();
const x = e.touches[0].clientX - rect.left;
const y = e.touches[0].clientY - rect.top;
});
どのようにキャンバスのピクセルにマウス座標、2次元キャンバスのAPI
このとしては、このような価値をとした上で、変換のサイズをキャンバスに表示されるピクセル数の自体をキャンバス
と canvas.getBoundingClientRect
や clientX
や clientY
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const elementRelativeX = e.clientX - rect.left;
const elementRelativeY = e.clientY - rect.top;
const canvasRelativeX = elementRelativeX * canvas.width / rect.width;
const canvasRelativeY = elementRelativeY * canvas.height / rect.height;
});
または offsetX
や offsetY
canvas.addEventListener('mousemove', (e) => {
const elementRelativeX = e.offsetX;
const elementRelativeX = e.offsetY;
const canvasRelativeX = elementRelativeX * canvas.width / canvas.clientWidth;
const canvasRelativeY = elementRelativeX * canvas.height / canvas.clientHeight;
});
注意: すべての場合の追加はできませんのパディングや国境をキャンバスに入力します。そうすることにより大規模複雑化しています。また、ボーダーまたはパディングサラウンドのキャンバスのその他の要素の追加のパディングやボーダーの外側の要素となります。
作業例 event.offsetX
, event.offsetY
[...document.querySelectorAll('canvas')].forEach((canvas) => {
const ctx = canvas.getContext('2d');
ctx.canvas.width = ctx.canvas.clientWidth;
ctx.canvas.height = ctx.canvas.clientHeight;
let count = 0;
function draw(e, radius = 1) {
const pos = {
x: e.offsetX * canvas.width / canvas.clientWidth,
y: e.offsetY * canvas.height / canvas.clientHeight,
};
document.querySelector('#debug').textContent = count;
ctx.beginPath();
ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
ctx.fillStyle = hsl((count++ % 100) / 100, 1, 0.5);
ctx.fill();
}
function preventDefault(e) {
e.preventDefault();
}
if (window.PointerEvent) {
canvas.addEventListener('pointermove', (e) => {
draw(e, Math.max(Math.max(e.width, e.height) / 2, 1));
});
canvas.addEventListener('touchstart', preventDefault, {passive: false});
canvas.addEventListener('touchmove', preventDefault, {passive: false});
} else {
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', preventDefault);
}
});
function hsl(h, s, l) {
return `hsl(${h * 360 | 0},${s * 100 | 0}%,${l * 100 | 0}%)`;
}
.scene {
width: 200px;
height: 200px;
perspective: 600px;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation-duration: 16s;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from { transform: translateZ(-100px) rotateX( 0deg) rotateY( 0deg); }
to { transform: translateZ(-100px) rotateX(360deg) rotateY(720deg); }
}
.cube__face {
position: absolute;
width: 200px;
height: 200px;
display: block;
}
.cube__face--front { background: rgba(255, 0, 0, 0.2); transform: rotateY( 0deg) translateZ(100px); }
.cube__face--right { background: rgba(0, 255, 0, 0.2); transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back { background: rgba(0, 0, 255, 0.2); transform: rotateY(180deg) translateZ(100px); }
.cube__face--left { background: rgba(255, 255, 0, 0.2); transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top { background: rgba(0, 255, 255, 0.2); transform: rotateX( 90deg) translateZ(100px); }
.cube__face--bottom { background: rgba(255, 0, 255, 0.2); transform: rotateX(-90deg) translateZ(100px); }
<div class="scene">
<div class="cube">
<canvas class="cube__face cube__face--front"></canvas>
<canvas class="cube__face cube__face--back"></canvas>
<canvas class="cube__face cube__face--right"></canvas>
<canvas class="cube__face cube__face--left"></canvas>
<canvas class="cube__face cube__face--top"></canvas>
<canvas class="cube__face cube__face--bottom"></canvas>
</div>
</div>
<pre id="debug"></pre>
作業例 canvas.getBoundingClientRect
や event.clientX
や event.clientY
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.canvas.width = ctx.canvas.clientWidth;
ctx.canvas.height = ctx.canvas.clientHeight;
let count = 0;
function draw(e, radius = 1) {
const rect = canvas.getBoundingClientRect();
const pos = {
x: (e.clientX - rect.left) * canvas.width / canvas.clientWidth,
y: (e.clientY - rect.top) * canvas.height / canvas.clientHeight,
};
ctx.beginPath();
ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
ctx.fillStyle = hsl((count++ % 100) / 100, 1, 0.5);
ctx.fill();
}
function preventDefault(e) {
e.preventDefault();
}
if (window.PointerEvent) {
canvas.addEventListener('pointermove', (e) => {
draw(e, Math.max(Math.max(e.width, e.height) / 2, 1));
});
canvas.addEventListener('touchstart', preventDefault, {passive: false});
canvas.addEventListener('touchmove', preventDefault, {passive: false});
} else {
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', preventDefault);
}
function hsl(h, s, l) {
return `hsl(${h * 360 | 0},${s * 100 | 0}%,${l * 100 | 0}%)`;
}
canvas { background: #FED; }
<canvas width="400" height="100" style="width: 300px; height: 200px"></canvas>
<div>canvas deliberately has differnt CSS size vs drawingbuffer size</div>
こんにちはこには道場、原因が何があったのでコードが既にプロジェクトのための
でかなり明らかなに変換する方法で不道場バニラです。
function onMouseClick(e) {
var x = e.clientX;
var y = e.clientY;
}
var canvas = dojo.byId(canvasId);
dojo.connect(canvas,"click",onMouseClick);
い役立っています。
ここでは一部の変更、上記ライアンArteconaいます。
function myGetPxStyle(e,p)
{
var r=window.getComputedStyle?window.getComputedStyle(e,null)[p]:"";
return parseFloat(r);
}
function myGetClick=function(ev)
{
// {x:ev.layerX,y:ev.layerY} doesn't work when zooming with mac chrome 27
// {x:ev.clientX,y:ev.clientY} not supported by mac firefox 21
// document.body.scrollLeft and document.body.scrollTop seem required when scrolling on iPad
// html is not an offsetParent of body but can have non null offsetX or offsetY (case of wordpress 3.5.1 admin pages for instance)
// html.offsetX and html.offsetY don't work with mac firefox 21
var offsetX=0,offsetY=0,e=this,x,y;
var htmls=document.getElementsByTagName("html"),html=(htmls?htmls[0]:0);
do
{
offsetX+=e.offsetLeft-e.scrollLeft;
offsetY+=e.offsetTop-e.scrollTop;
} while (e=e.offsetParent);
if (html)
{
offsetX+=myGetPxStyle(html,"marginLeft");
offsetY+=myGetPxStyle(html,"marginTop");
}
x=ev.pageX-offsetX-document.body.scrollLeft;
y=ev.pageY-offsetY-document.body.scrollTop;
return {x:x,y:y};
}
最初に、その他っているため、必要な機能を 位置、キャンバスの要素.こちらの方が少し優雅なり、その他このページ(厚).することで渡すことができ 他の 要素とその位置にドキュメント:
function findPos(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}
現在の計算の現在位置にカーソルの対比でみれば:
$('#canvas').mousemove(function(e) {
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
var coordinateDisplay = "x=" + x + ", y=" + y;
writeCoordinateDisplay(coordinateDisplay);
});
知っ離の findPos
機能から、イベント処理になっています。(サイズを変更する機能を提供でき.できるように働きかけるべき保つ機能を一つの課題です。)
の値 offsetLeft
や offsetTop
相 offsetParent
, り、これは一部のラッパー div
ノード(または何らかにな).がない場合要素にラッピング canvas
彼らの相対 body
, あなたのオフセットを差し引.このかを確定する必要がある位置、キャンバスの前できない。
Similary, e.pageX
や e.pageY
の位置にカーソルの対比します。その減算をキャンバスのオフセットから値への到着の真の位置にします。
代替 位置づけ 要素を直接利用価値を e.layerX
や e.layerY
.この不安定化の方法は、上記の二つの理由
- これらの値は相対の場合に、ドキュメントイベントはありませんの中に位置づけ要素
- ならではの標準
ThreeJS r77
var x = event.offsetX == undefined ? event.layerX : event.offsetX;
var y = event.offsetY == undefined ? event.layerY : event.offsetY;
mouse2D.x = ( x / renderer.domElement.width ) * 2 - 1;
mouse2D.y = - ( y / renderer.domElement.height ) * 2 + 1;
るようにして、多くのソリューション。このためでした。が誰かとします。わかったから こちらの
ここでは簡易なソリューション(これは当てはまりませんの作業のボ/スクロール):
function click(event) {
const bound = event.target.getBoundingClientRect();
const xMult = bound.width / can.width;
const yMult = bound.height / can.height;
return {
x: Math.floor(event.offsetX / xMult),
y: Math.floor(event.offsetY / yMult),
};
}
いをもつアプリケーション キャンバス 以上、pdf、関わる多くのサイズのキャンバスのようなズームを開発し、シーケンスを出し、全ズームイン/アウトのPDFがあったのでサイズの変更、キャンバスに引き出せるように、適切にサイズ、pdf、私は多くの回答stackOverflowかなかったが、その解決の問題です。
使っていた rxjs 角6、かつ応答特有の最新のバージョン。
ここには全体のコードスニペットそのものを用い、誰でも活用 rxjs 描きのキャンバスに入力します。
private captureEvents(canvasEl: HTMLCanvasElement) {
this.drawingSubscription = fromEvent(canvasEl, 'mousedown')
.pipe(
switchMap((e: any) => {
return fromEvent(canvasEl, 'mousemove')
.pipe(
takeUntil(fromEvent(canvasEl, 'mouseup').do((event: WheelEvent) => {
const prevPos = {
x: null,
y: null
};
})),
takeUntil(fromEvent(canvasEl, 'mouseleave')),
pairwise()
)
})
)
.subscribe((res: [MouseEvent, MouseEvent]) => {
const rect = this.cx.canvas.getBoundingClientRect();
const prevPos = {
x: Math.floor( ( res[0].clientX - rect.left ) / ( rect.right - rect.left ) * this.cx.canvas.width ),
y: Math.floor( ( res[0].clientY - rect.top ) / ( rect.bottom - rect.top ) * this.cx.canvas.height )
};
const currentPos = {
x: Math.floor( ( res[1].clientX - rect.left ) / ( rect.right - rect.left ) * this.cx.canvas.width ),
y: Math.floor( ( res[1].clientY - rect.top ) / ( rect.bottom - rect.top ) * this.cx.canvas.height )
};
this.coordinatesArray[this.file.current_slide - 1].push(prevPos);
this.drawOnCanvas(prevPos, currentPos);
});
}
このスニペットを固定しているのが、マウスの相対座標のサイズをキャンバスにかかわらずいズームイン/アウトし、キャンバスに入力します。
const prevPos = {
x: Math.floor( ( res[0].clientX - rect.left ) / ( rect.right - rect.left ) * this.cx.canvas.width ),
y: Math.floor( ( res[0].clientY - rect.top ) / ( rect.bottom - rect.top ) * this.cx.canvas.height )
};
const currentPos = {
x: Math.floor( ( res[1].clientX - rect.left ) / ( rect.right - rect.left ) * this.cx.canvas.width ),
y: Math.floor( ( res[1].clientY - rect.top ) / ( rect.bottom - rect.top ) * this.cx.canvas.height )
};