Question

我创建了一个识别Square对象的函数，当点击其中一个对象时，他们假设要改变颜色，但当我点击其中任何一个时，即使它们不在同一个位置，也会选择多个。当我再次点击时，所有这些都被选中并改变颜色。

我做错了什么？

的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Launchpad</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>

    <canvas id="appArea"></canvas>


    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

CSS / style.css中

body {
    background-color: black;
}

canvas {
    background-color: grey;
}

JS / app.js

var canvas = document.getElementById('appArea');
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var shapelist = [];


var Square = function (x, y, size, ctx) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.ctx = ctx;
    this.selected = false;
}

Square.prototype.render = function() {
    ctx.beginPath();
    ctx.rect(this.x, this.y, this.size, this.size);
    if (this.selected) {
        ctx.fillStyle = "gold";
    }
    ctx.fillStyle = this.color;
    ctx.fill();

};


var generateSquares = function () {
    for (var i = 0; i < 13; i++) {
        var theX = i * 40;
        var theY = i * 3;
        var theSize = 30;
        var square = new Square(theX, theY, theSize, ctx);
        square.render();
        shapelist.push(square);
    };
}

var getCoords = function (x, y) {
    var validCoords = [];

    for(index in this.shapelist){
        var shape = this.shapelist[index];
        var startX = shape.x;
        var endX = shape.x + shape.size;
        var startY = shape.y;
        var endY = shape.y + shape.size;

        if (x >= startX && x <= endX && y >= startY && y <= endY) {
            validCoords.push(shape);
        }
    }
    return validCoords;
} 


var startEvent = function(e) {
    var self = this;
    canvas.addEventListener('mousedown', function (e) {
        var shapes = getCoords(e.offsetX, e.offsetY);
        if (shapes.length) {
            var selectedShape = shapes[shapes.length-1];
            selectedShape.selected = true;
        }
        render();
    }, false);
}



var render = function(){
    ctx.clearRect(0, 0, this.width, this.height);
    for(index in shapelist){
        shapelist[index].render();
    }
}

generateSquares();
startEvent();
render();

Answer 1

1）您只在构造函数中选择为false的设置，而不是其他地方。

因此，所选方块的数量只会继续增长。

因此，如果您想要一个选定的方格，请重置所有方格＆＃39;选择＆＃39;将1设置为true之前的属性。

2）重新阅读你的渲染功能：颜色将始终是this.color，这恰好是使用提供的代码未定义的。

3）其他的事情是你将this.shapelist引用到一个全局定义的函数，getCoords：你只会得到一个引用错误，它不会得到通知，因为它在内部被调用事件处理程序。

这里的一切都是固定的：

http://jsfiddle.net/4bqtU/

canvas.addEventListener('mousedown', function (e) {
    var shapes = getCoords(e.offsetX, e.offsetY);
    if (shapes.length) {
        resetShapeSelection();
        var selectedShape = shapes[shapes.length-1];
        selectedShape.selected = true;
    }
    render();
}, false);

function resetShapeSelection() {
    for(index in shapelist){
       var shape = shapelist[index];
       shape.selected=false;
    }
 }

单击它们时会选择多个Square对象

1 个答案: