因此,我在构建 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++;
但我不知道如何将圆“动画化”到用户将其拖动到的 X 坐标。我尝试了几种不同的方法并重新排列了一些内容,但最终要么完全禁用动画,要么如您所见 THIS FIDDLE 圆圈就消失了。
如果有人知道如何解决这个问题,我将不胜感激。谢谢你!
最佳答案
这只是一件小事。在获取坐标的函数中:
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.width CSS属性不同。因此,您肯定想要进行单位转换。
总共:
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;
}
关于javascript - 在 HTML Canvas 动画中使用 MouseEvent 时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32483076/