1
我在畫布上有一個小問題，當鼠標懸停在元素（對象）上時，它應該將光標更改爲指針，當葉子返回默認狀態時，但我的代碼不能以這種方式工作，我已經沒有想法了。只有畫布最後添加的對象有光標指針
\t \t \t \t var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var rectList = [];
var cursors = ['default', 'pointer'],
currentCursor = 0;
function createRectangle(id, x, y, width, height, fillColor) {
var newRectangle = {
x,
y,
id,
width,
height,
fillColor,
mouseX: null,
mouseY: null,
isHighlighted: false,
isClicked: false,
cursor: 0, // 0 default, 1 pointer
draw() {
drawRect(this.x, this.y, this.width, this.height, this.fillColor)
},
highlight() {
crosshair(this.x, this.y, this.width, this.height, 20, 25, 6, 1, 2, 2, 2, 2, 2, '#E15258', '#E15258', '#C25975');
},
isPointInside() {
return (this.mouseX >= this.x && this.mouseX <= this.x + this.width && this.mouseY >= this.y && this.mouseY <= this.y + this.height);
}
}
rectList.push(newRectangle);
}
function crosshair(x, y, width, height, radius1, radius2, endLineWidth, circle1Width, circle2Width, topLineWidth, rightLineWidth, bottomLineWidth, leftLineWidth, circle1Color, circle2Color, linesColor) {
drawCircle(x + width/2, y + height/2, radius1, circle1Width, circle1Color);
drawCircle(x + width/2, y + height/2, radius2, circle2Width, circle2Color);
drawLine(x + radius1 + width/2, y + height/2, x + (radius2 + endLineWidth) + width/2, y + height/2, linesColor, leftLineWidth);
drawLine(x - radius1 + width/2, y + height/2, x - (radius2 + endLineWidth) + width/2, y + height/2, linesColor, rightLineWidth);
drawLine(x + width/2, y + radius1 + height/2, x + width/2, y + (radius2 + endLineWidth) + height/2, linesColor, bottomLineWidth);
drawLine(x + width/2, y - radius1 + height/2, x + width/2, y - (radius2 + endLineWidth) + height/2, linesColor, topLineWidth);
}
function drawLine(startX, startY, endX, endY, color, width) {
ctx.save();
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(endX,endY);
ctx.stroke();
ctx.restore();
}
function drawCircle(x, y, radius, lineWidth, strokeColor) {
ctx.save();
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = strokeColor;
ctx.stroke();
ctx.restore();
}
function drawBorder(x, y, width, height, lineWidth, strokeColor) {
ctx.save();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = strokeColor;
ctx.strokeRect(x, y, width, height);
ctx.restore();
}
function drawRect(x, y, width, height, fillColor) {
ctx.save();
ctx.fillStyle = fillColor;
ctx.fillRect(x, y, width, height);
ctx.restore();
}
document.onmousemove = function(mouse) {
var mouseX = parseInt(mouse.clientX - offsetX);
var mouseY = parseInt(mouse.clientY - offsetY);
rectList.forEach(rect => {
rect.mouseX = mouseX;
rect.mouseY = mouseY;
if(rect.isPointInside()) {
currentCursor = 1;
if(rect.isClicked) {
rect.isHighlighted = false;
} else {
rect.isHighlighted = true;
}
} else {
rect.isHighlighted = false;
currentCursor = 0;
}
});
canvas.style.cursor = cursors[currentCursor];
}
document.onclick = function(mouse) {
var mouseX = parseInt(mouse.clientX - offsetX);
var mouseY = parseInt(mouse.clientY - offsetY);
rectList.forEach(rect => {
rect.mouseX = mouseX;
rect.mouseY = mouseY;
if(rect.isPointInside()) {
if(rect.isHighlighted) {
rect.isHighlighted = false;
rect.isClicked = true;
} else {
rect.isClicked = false;
}
} else {
rect.isClicked = false;
}
});
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
rectList.forEach(rect => {
if(rect.isHighlighted) {
rect.draw();
rect.highlight();
} else {
rect.draw();
}
if(rect.isClicked) {
rect.draw();
rect.highlight();
} else {
rect.draw();
}
});
requestAnimationFrame(update);
}
function startNewGame() {
createRectangle('orange', 25, 25, 30/2, 30/2, 'orange');
createRectangle('green', 50, 50, 30/2, 30/2, 'green');
createRectangle('blue', 75, 75, 30/2, 30/2, 'blue');
createRectangle('yellow', 100, 100, 30/2, 30/2, 'yellow');
createRectangle('lightgreen', 125, 125, 30/2, 30/2, 'lightgreen');
requestAnimationFrame(update);
}
startNewGame();canvas {
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<canvas id="canvas" width="400" height="200"></canvas>我希望這是一個小問題，不會造成你頭疼。提前致謝！
謝謝你，這是有點滑稽，當你搞清楚什麼是錯的，最後你在這裏發佈，並幾分鐘後，你得到正確的答案花了約1小時。否則，非常感謝！ – Venguss
@Venguss分析錯誤時，一個好的起點是發生錯誤或不希望的事情。所以我查看了'canvas.style.cursor = cursors [currentCursor];'行，發現'currentCursor'幾乎總是0.當我查看'currentCursor'設置的位置時，問題很明顯。但也許它也是經驗。總是樂於提供幫助。 – NtFreX