计算HTML5画布径向进度条中单击的百分比

Question

我创建了这样一个循环进度条

​

​

我可以通过用java-script发送某个百分比来加载它，但是如果用户单击圆圈的黑色/绿色部分，我就无法计算出用户单击的百分比。

如何计算百分比？

请解释一下你的答案。

Answer 1

这里有一种方法可以将点击角转换成百分比：

• 使用Math.atan2计算鼠标相对于中心点的角度。
• 将该角度在0-PI*2弧度范围内规范化：(angle+PI*2)%(PI*2)。
• 计算这个角度的百分比一个完整的圆：normalizedAngle/(PI*2)。
• 那是你的百分比！

插图:注意0%在圆圈的3点钟位置，

​

​

示例代码和演示：

​

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

var isDown = false;
var startX;
var startY;

var cx = 150;
var cy = 150;
var radius = 75;
var PI = Math.PI;
var PI2 = PI * 2;

ctx.lineWidth = 15;
ctx.font = '24px verdana';

draw(50, 50);

function draw(x, y) {

  var dx = x - cx;
  var dy = y - cy;
  var endAngle = (Math.atan2(dy, dx) + PI2) % PI2;
  var pct = parseInt(endAngle / PI2 * 100);

  ctx.clearRect(0, 0, cw, ch);

  ctx.beginPath();
  ctx.arc(cx, cy, radius, 0, PI2);
  ctx.closePath();
  ctx.strokeStyle = 'black';
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(cx, cy, radius, 0, endAngle);
  ctx.strokeStyle = 'forestgreen';
  ctx.stroke();

  ctx.fillText(pct + '%', cx - 15, cy + 8);

}



function handleMouseDown(e) {
  e.preventDefault();
  e.stopPropagation();

  mX = parseInt(e.clientX - offsetX);
  mY = parseInt(e.clientY - offsetY);

  draw(mX, mY);

}

$("#canvas").mousedown(function(e) {
  handleMouseDown(e);
});

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click on the canvas to set a percentage.</h4>
<canvas id="canvas" width=300 height=300></canvas>

​

Answer 2

我喜欢用trig来做这件事，因为我认为它很容易记住和使用。你只需要找到圆周坐标的顶部，中心的坐标，知道它的半径。你必须能够确定点击到这两者的距离。所以可能需要使用补偿。您可以修改此代码以满足您的特殊需要。

如果你有点击的坐标，圆心和圆顶，你可以找到所有三个点之间的距离。有一个三角形的每一边的长度是足够的信息，找到所有的角度，以及它。

你唯一关心的角度是中间的那个。您可以使用该方法，与单击是否通过中间的not进行比较，以找到圆圈的百分比。

以下是一些消息来源：

https://gamedev.stackexchange.com/questions/33709/get-angle-in-radians-given-a-point-on-a-circle http://snipplr.com/view/47207/distance-between-two-points/ http://www.mathsisfun.com/algebra/trig-solving-triangles.html数学很有趣！

下面是一个有用的示例：http://jsbin.com/hopak/1/edit

$('#circle').click(function (e) { //Relative ( to its parent) mouse position 
    var posX = $(this).position().left,
        posY = $(this).position().top,
     radius = 50,
     x = e.pageX - posX, /* Offset not sure if cross-browser compatibile? */
     y = e.pageY - posY,
     coords = {
        x:x,
        y:y
     };

     function findDist( start, end ){
       var dx = end.x;
       var dy = end.y;

       dx -= start.x;
       dx *= dx;

       dy -= start.y;
       dy *= dy;

       return Math.sqrt( dx + dy );
     }

     sideA = findDist(coords,{x:radius,y:0}); /* Click to Top Circle */
     sideB = findDist(coords,{x:radius,y:radius}); /* Click to Center */
     sideC = radius; /* Center to Middle */

     function findAngleUsingSides(a, b, c) {  
        var radians = ((a * a) + (b * b) - (c * c)) / (2 * (a * b));
        return (Math.acos(radians))/ Math.PI * 180;
     }

     A = findAngleUsingSides(sideB, sideC, sideA);

     if(x < radius){
        /* 
        You clicked before halfway across
        */
        A = 360 - A;
     }

     percentClicked =  A / 360;

     console.log(percentClicked);

});