我怎么得到的坐标点击鼠标在画布上的元素？

StackOverflow https://stackoverflow.com/questions/55677

  •  09-06-2019
  •  | 
  •  

题

什么是最简单的方式添加一个点击事件处理程序一个帆布元，这将返回的x、y坐标点(相对于画布元)?

没有遗留浏览器的兼容性所需要的，野生动物园，歌剧和火狐会做的。

有帮助吗？

解决方案

编辑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 风格应用。考虑到这个你需要循环通过链的 offsetParents开始画布元本身。这个代码完美的作品对我来说，测试Firefox和野生动物但是应该为所有人带来利益。 

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);
}

现代化的浏览器的现在处理这个给你。铬，IE9，并Firefox支持offsetX/Y这样，通过在事件从单处理程序。

function getRelativeCoords(event) {
    return { x: event.offsetX, y: event.offsetY };
}

大多数现代浏览器也支持layerX/Y，但是镀铬，即使用layerX/Y的绝对偏移的点击网页，包括保证金，填补，等等。在火狐，layerX/Y和offsetX/Y相当，但是抵消先前不存在。所以，对兼容性与年龄稍大的浏览器，可以使用：

function getRelativeCoords(event) {
    return { x: event.offsetX || event.layerX, y: event.offsetY || event.layerY };
}

根据新鲜的 Quirksmode 的 clientX 和 clientY 方法是支持在所有主要的浏览器。所以，在这里去-好的，工作的代码的工作，在滚动div在一个网页滚动:

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().

我做了充分的示范工作在每一个浏览器与完整的源代码的解决方案的这个问题： 坐标点击鼠标在画布上。.试试用代码复制和粘贴到一个文本编辑器。然后拯救它example.html 并且，最后，开放式的文件。

这里是一个小的修改 Ryan 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不足，如果浏览器窗口滚动(核查中的火狐3.5和铬3.0).

这个怪癖的模式 文提供更正确的功能，可以使用pageX或坐标或组合将clientx与文件。身体。scrollLeft和clientY与文件。身体。scrollTop计算坐标点击相对于文件的起源。

更新：此外，offsetLeft和offsetTop是相对的软垫的小元素，不是内部尺寸。一个帆布的填充：风格施加不会的报告左上角的其内容作为区域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];
}

只要画布上没有边界， 它的工作对于伸图像(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.

注意到

如果你不喜欢修改的司机 prototypes,只要改变的功能的，并呼吁它与 (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);

希望这可以帮助!

使用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以上。

http://www.prototypejs.org/api/element/cumulativeoffset

你能做的事： 

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 };
  }

所以这既是简单的，但一些更复杂的主题，它似乎。

首先，通常有以合并的问题在这里

  1. 如何获得鼠元素相对坐标

  2. 如何获得画像素鼠坐标2D帆布API或结

那么，答案

如何获得鼠元素相对坐标

是否元素是一个画布上得到元素相对小鼠的坐标是相同的所有要素。

有2个简单的回答的问题是"如何获得画布上的相对鼠标"

简单的答案#1的使用 offsetX 和 offsetY

canvas.addEventListner('mousemove', (e) => {
  const x = e.offsetX;
  const y = e.offsetY;
});

这个答案的工作在铬、火狐，和野生动物园。不同于其他所有活动的价值 offsetX 和 offsetY 采取CSS转变考虑进去。

最大的问题 offsetX 和 offsetY 是的2019/05它们不存在接触的事件和所以，不可以用野生动物园。他们确实存在对指针的活动中存在的铬和火狐，但不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;
});

如何获得画像素鼠坐标2D帆布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>

嘿，这是在场，只是因为这是我有什么代码在已经为一个项目。

它应该相当明显的是如何将它转回给非场香草JavaScript。 

  function onMouseClick(e) {
      var x = e.clientX;
      var y = e.clientY;
  }
  var canvas = dojo.byId(canvasId);
  dojo.connect(canvas,"click",onMouseClick);

希望这有所帮助。

这里是有些修改的上述Ryan 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, ，所以没有偏移量减去。这就是为什么我们需要确定位置的帆布之前，我们可以做任何事情。

类似地， e.pageX 和 e.pageY 得到的位置标相对于该文件。这就是为什么我们减去画布是偏离这些价值达的真实位置。

一个选择 定位 元素是直接使用价值的 e.layerX 和 e.layerY.这是不可靠的方法比上述两个原因：

  1. 这些价值观也是相对于整个文件时，该事件不会发生内部一位元素
  2. 他们不是部分的任何标准

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-出，在打开每一个放大-in/out PDF我不得不调整的画布适应的大小pdf，我去过很多的答案在计算器，并且没有找到一个完美的解决方案，这将最终解决问题。

我是用 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 )
};
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top