使用鼠标位置绘制圆

Drawing a circle using mouse position

本文关键字：绘制 位置 鼠标      更新时间：2023-09-26

我正试图通过单击并拖动鼠标指针来绘制一个圆。就像你在PowerPoint或其他东西中所做的那样。圆圈的中心出现在奇怪的地方，我无法解释。

这是jsfiddle：https://jsfiddle.net/h8t3hfa2/2/

这就是我获得开始和结束位置的方式；

$('#c').mousedown(function(event) {
  var parentOffset = $(this).offset();
  circle = new Circle();
  circle.start['x'] = event.pageX - parentOffset.left;
  circle.start['y'] = event.pageY - parentOffset.top;
});
$('#c').mouseup(function(event) {
  var parentOffset = $(this).offset();
  circle.end['x'] = event.pageX - parentOffset.left;
  circle.end['y'] = event.pageY - parentOffset.top;
  circle.draw(canvas[0]);
});

当我控制台记录中点时，它看起来是正确的，但圆圈出现在其他地方。有什么想法吗？

这是因为您正在使用CSS缩放画布。请记住，画布维度与画布CSS（样式）维度不同。

一个快速的解决方案是使它们均衡：

canvas.get(0).width = canvas.width();
canvas.get(0).height = canvas.height();

https://jsfiddle.net/h8t3hfa2/3/

var Circle = function() {
  this.start = [];
  this.end = [];
}
Circle.prototype.draw = function(canvas) {
  var me = this;
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var mid = me.getcenter();
    var rad = me.getradius();
    console.log(mid, rad);
    ctx.beginPath();
    console.log(mid['x'], mid['y']);
    ctx.arc(mid['x'], mid['y'], rad, 0, 360);
    ctx.stroke();
  }
};
Circle.prototype.getcenter = function() {
  var me = this;
  //Check the start and end are set
  var centerX = (me.start['x'] + me.end['x']) / 2;
  var centerY = (me.start['y'] + me.end['y']) / 2;
  return {
    'x': centerX,
    'y': centerY
  };
};
Circle.prototype.getradius = function() {
  var me = this;
  var distX = Math.abs(me.start['x'] - me.end['x']);
  var distY = Math.abs(me.start['y'] - me.end['y']);
  return distX / 2;
};
var circle;
var canvas = $('#c');
// added only these two lines
canvas.get(0).width = canvas.width();
canvas.get(0).height = canvas.height();
$('#c').mousedown(function(event) {
  var parentOffset = $(this).offset();
  circle = new Circle();
  circle.start['x'] = event.pageX - parentOffset.left;
  circle.start['y'] = event.pageY - parentOffset.top;
});
$('#c').mouseup(function(event) {
  var parentOffset = $(this).offset();
  circle.end['x'] = event.pageX - parentOffset.left;
  circle.end['y'] = event.pageY - parentOffset.top;
  circle.draw(canvas[0]);
});
canvas {background-color: white;height: 100%;width: 100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='c'></canvas>

您可能还应该添加一个onresize事件处理程序，以便在窗口大小因使用流体布局而更改时重置画布尺寸。但是要小心，修改画布的任何一个尺寸（甚至是原始尺寸）都会导致画布清空。

从样式修复中删除height: 100%; width: 100%;可以避免此问题。

脱离主题，但我建议编辑getradius以使用distX和distY的最小值（或最大值）（而不是像您提到的应用程序那样对distX进行硬编码）。

Circle.prototype.getradius = function() {
  var me = this;
  var distX = Math.abs(me.start['x'] - me.end['x'])/2;
  var distY = Math.abs(me.start['y'] - me.end['y'])/2;
  return Math.min(distX, distY);
};
相关文章：