在 HTML canvas 动画中使用 MouseEvent 时遇到问题

Question

所以我在构建 HTML5 canvas UI 元素时遇到了障碍。我想让这个切换开关中的圆圈拖动到用户将其拖动到的 X 坐标（最终这个东西会有很多，但我想一次做一个步骤！）。我可以输出 x 坐标，所以我知道这是有效的，但出于某种原因，我无法让它在我的动画循环中工作以更改变量 primX。这是我的代码：

HTML:

<canvas id="toggle1" class="toggle" onmousemove="getCoords(event)"></canvas>
  <p id="test"></p>

与CSS无关，只要你设置任意宽度为.toggle或#toggle1

JavaScript:

var canvas=document.getElementById("toggle1");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height=cw/3;
var PI=Math.PI;
var PI2=(PI * 2);
var cx=ch/2;
var cy=ch/2;
var backStyle="#FFFFFF"
var globalID;
var lw=ctx.lineWidth=8;
var radius=ch/2-lw/2;
var half=cw/2;
var currX;
var globalID;
var mouseIsDown=false;

function getCoords(event) {
    var currX = event.clientX;
    document.getElementById("test").innerHTML = currX;
}

function backGround(){  
    if (primX > half){
      Style="#00FF00";
      } else {
      Style="#FF0000";
        };  
  ctx.fillStyle=backStyle;
  ctx.strokeStyle=Style;
  ctx.beginPath();
  ctx.arc(cx+lw/2,cy,radius,(0.5 * PI),(1.5 * PI));
  ctx.lineTo((cw-(ch/2)),0+lw/2);
  ctx.arc((cw-(ch/2+lw/2)),cy,radius,(1.5 * PI),(.5 * PI));
  ctx.lineTo(cx,ch-lw/2);
  ctx.fill();
  ctx.stroke();
};

function mainCir() {
    if (primX > half){
      Style="#00FF00";
      on=true;
      } else {
      Style="#FF0000";
      on=false;
        };
    ctx.beginPath();
    ctx.arc(primX,cy,radius,0,PI2);
    ctx.fillStyle=Style;
    ctx.fill();
}

primX = cx;

function draw(){
backGround();
mainCir();
}

draw();

function animate() {
    primX=currX;
    globalID=requestAnimationFrame(animate);
    draw();
}


$("#toggle1").mousedown(function() {
    mouseIsDown=true;
});
$(document).mouseup(function() {
  if(mouseIsDown){
  animate();
  mouseIsDown=false;
}
});

我尝试了很多不同的方法，但没有任何效果。如果我在 animate() 函数中放置一个简单的动画，那么当鼠标单击并按住元素时，它似乎会起作用，例如 primX++;

但我不知道如何 "animate" 将圆圈移动到用户将其拖动到的 X 坐标的位置。我已经尝试了一些不同的东西并重新排列了东西，但它最终要么完全禁用动画，要么正如你在 THIS FIDDLE 中看到的那样，圆圈就消失了。

如果有人知道如何解决这个问题，我将不胜感激。谢谢！

Answer 1

这是一件小事。在获取坐标的函数中：

function getCoords(event) {
    var currX = event.clientX;
    document.getElementById("test").innerHTML = currX;
}

您正在声明 currX 变量。但是它已经被声明了，所以你正在做的是创建一个新的，它的范围在函数完成的那一刻就消失了。

你想要这个：

function getCoords(event) {
    currX = event.clientX;
    document.getElementById("test").innerHTML = currX;
}

希望对您有所帮助！

更新:

还有两个细节可能对您有用：

首先：您正在获取应用程序客户区的坐标，而不是canvas。所以也许您想添加 canvas' 左偏移量。

其次：canvas.width是逻辑canvas宽度，不同于element.widthCSS属性。所以很确定你想进行单位换算。

一共：

function getCoords(event) {
    currX = event.clientX - $(event.target).offset().left ;
    currX = currX * (canvas.width / $(canvas).width());
    if (currX < radius) currX = radius;
    if (currX > canvas.width - radius) currX = canvas.width - radius;
    document.getElementById("test").innerHTML = currX;
}

Here you can read more about getting mouse coordinates and here关于canvas的尺寸。

在 HTML canvas 动画中使用 MouseEvent 时遇到问题

Having issues using MouseEvent in HTML canvas animation

javascript

mouseevent

html5-canvas