При щелчке на них выбирается несколько квадратных объектов

#javascript #canvas

#javascript #холст

Вопрос:

Я создал функцию, которая распознает квадратные объекты, и при нажатии на один из них предполагается, что они меняют цвет, но когда я нажимаю на любой из них, выбирается более одного, даже если они не находятся в одном и том же положении. Когда я нажимаю снова, все они выбираются и меняют цвет.

Что я делаю не так?

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 amp;amp; x <= endX amp;amp; y >= startY amp;amp; 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();

Ответ №1:

1) У вас только в конструкторе выбрано значение false, нигде больше.

Таким образом, количество выбранных квадратов будет только расти.

Поэтому, если вам нужен один выделенный квадрат, сбросьте все свойство square ‘selected’, прежде чем устанавливать для него значение 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;
    }
 }