1
下面的腳本繪製了4個曲線矩形，並檢測它們是否在mouseup和mousemove事件偵聽器上懸停或單擊。當其中一個矩形懸停時，我希望它在一秒鐘內稍微增長 - 當光標離開矩形時，它應該縮回。HTML帆布和JavaScript - 懸停時的比例對象
我遇到的問題是，我能想到做到這一點的唯一方法是通過在if (this.selected) {子句中寫入一個函數，該函數在持續一秒的動畫中繪製每個幀的矩形的新版本，但是此子句是在繪製矩形本身的新版本的函數內部！那麼我怎樣才能在curvedRect.prototype.makeCurvedRect之外編寫一個函數，該函數只在光標位於其中一個矩形上時才運行？任何幫助將不勝感激。
var c=document.getElementById('game'),
\t \t canvasX=c.offsetLeft,
\t \t canvasY=c.offsetTop,
\t \t ctx=c.getContext('2d');
var curvedRect = function(id, x, y, w, h) {
\t this.id = id;
\t this.x = x;
\t this.y = y;
\t this.w = w;
\t this.h = h;
\t this.selected = false;
}
curvedRect.prototype.makeCurvedRect = function() {
\t ctx.beginPath();
\t ctx.lineWidth='8';
\t ctx.strokeStyle='white';
\t ctx.moveTo(this.x+10, this.y);
\t ctx.lineTo(this.x+this.w-10, this.y);
\t ctx.quadraticCurveTo(this.x+this.w, this.y, this.x+this.w, this.y+10);
\t ctx.lineTo(this.x+this.w, this.y+this.h-10);
\t ctx.quadraticCurveTo(this.x+this.w, this.y+this.h, this.x+this.w-10, this.y+this.h);
\t ctx.lineTo(this.x+10, this.y+this.h);
\t ctx.quadraticCurveTo(this.x, this.y+this.h, this.x, this.y+this.h-10);
\t ctx.lineTo(this.x, this.y+10);
\t ctx.quadraticCurveTo(this.x, this.y, this.x+10, this.y);
\t ctx.stroke();
\t if (this.selected) {
// BM67 edit By Blindman67 removed annoying alert and replaced it with console.log
// As I did not want to add elsewhere to the code to declare hoverMessageShown is safely declared here to stop the console repeating the message.
if(window["hoverMessageShown"] === undefined){
window["hoverMessageShown"] = true;
\t \t console.log('When hovered over, I would like this box to grow slightly over a short period of time (say a second). When the mouse is removed I would like it to shrink back.')
}
// BM67 end.
\t }
}
curvedRect.prototype.hitTest = function(x, y) {
\t return (x >= this.x) && (x <= (this.w+this.x)) && (y >= this.y) && (y <= (this.h+this.y));
}
var Paint = function(element) {
\t this.element = element;
\t this.shapes = [];
}
Paint.prototype.addShape = function(shape) {
\t this.shapes.push(shape);
}
Paint.prototype.render = function() {
\t this.element.w = this.element.w;
\t for (var i=0; i<this.shapes.length; i++) {
\t \t this.shapes[i].makeCurvedRect();
\t }
}
Paint.prototype.setSelected = function(shape) {
\t for (var i=0; i<this.shapes.length; i++) {
\t \t this.shapes[i].selected = this.shapes[i] == shape;
\t }
\t this.render();
}
Paint.prototype.select = function(x, y) {
\t for (var i=this.shapes.length-1; i >= 0; i--) {
\t \t if (this.shapes[i].hitTest(x, y)) {
\t \t \t return this.shapes[i];
\t \t }
\t }
\t return null
}
var paint = new Paint(c);
var img1 = new curvedRect('1', 200, 55, 150, 150);
var img2 = new curvedRect('2', 375, 55, 150, 150);
var img3 = new curvedRect('3', 200, 230, 150, 150);
var img4 = new curvedRect('4', 375, 230, 150, 150);
paint.addShape(img1);
paint.addShape(img2);
paint.addShape(img3);
paint.addShape(img4);
paint.render();
function mouseUp(event) {
\t var x = event.x - canvasX;
\t var y = event.y - canvasY;
\t var shape = paint.select(x, y);
\t if (shape) {
\t \t alert(shape.id);
\t }
\t // console.log('selected shape: ', shape);
}
function mouseMove(event) {
\t var x = event.x - canvasX;
\t var y = event.y - canvasY;
\t var shape = paint.select(x, y);
\t paint.setSelected(shape);
}
c.addEventListener('mouseup', mouseUp);
c.addEventListener('mousemove', mouseMove);canvas {
display: block;
margin: 1em auto;
border: 1px solid black;
background: #FF9900;
}<!doctype html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <title>uTalk Demo</title>
\t <link rel='stylesheet' type='text/css' href='game.css' media='screen'></style>
</head>
<body>
\t <canvas id="game" width = "750" height = "500"></canvas>
</body>
</html>
我編輯你的代碼更改警報安慰出來放。我認爲大多數人更喜歡在沒有意圖進行交互的情況下移動鼠標時不要彈出提醒。就我個人而言，您並未看到您在問題中已經解釋過的信息的必要性。 – Blindman67