HTML 5 Canvas, кажется, перерисовывает удаленные части

Я создал следующий код наjsfiddle, Цель состоит в том, чтобы удалить коробку с холста после того, как она была нажата. То, что фактически происходит, состоит в том, что сетка очищается и полностью перерисовывается С удаленной коробкой в ее старом месте. Сетка будет пустой только после удаления всех заданных объектов ... Я озадачен! Что я делаю неправильно?

jQuery(function(){

    GridBox = new GridBox();

    GridBox.init();

    var canvas    = GridBox.canvas;

    canvas.on( 'click', GridBox.clickHandler );

});

function GridBox()
{

    this.target        = { x: 0, y: 0 };
    this.current       = { x: 0, y: 0 };
    this.boxHeight     = 50;
    this.boxWidth      = 50;
    this.width         = 500;
    this.height        = 500;
    this.context       = null;
    this.canvas        = null;

    var self = this,
        init = false,
        bw   = this.width,
        bh   = this.height,
        p    = 0,
        cw   = bw + ( p * 2 ) + 1,
        ch   = bh + ( p * 2 ) + 1;

    /**
     * Array of boxes that are painted on the grid.
     * Each box has its own x and y coordinates.
     */
    this.boxesOnGrid    = [
        { x: 2, y: 2 },
        { x: 9, y: 2 },
        { x: 5, y: 5 }
    ];

    /**
     * Initiate this object
     * @constructor 
     */
    this.init    = function()
    {
        if( !init ) {
            var canvas    = jQuery( '<canvas/>' ).attr({ width: cw, height: ch }).appendTo( 'body' );

            this.canvas     = canvas;
            this.context    = this.canvas.get( 0 ).getContext( '2d' );

            this.createGrid();

            init    = true;

        }
    };

    this.clearGrid        = function()
    {
        alert( 'clearing grid' );
        this.context.clearRect( 0, 0, 500, 500 );
    };

    /**
     * Create the grid 
     */
    this.createGrid        = function()
    {
        for( var x = 0; x <= bw; x += this.boxWidth ) {
            this.context.moveTo( 0.5 + x + p, p );
            this.context.lineTo( 0.5 + x + p, bh + p );
        }

        for( var x = 0; x <= bh; x += this.boxHeight ) {
            this.context.moveTo( p, 0.5 + x + p );
            this.context.lineTo( bw + p, 0.5 + x + p );
        }

        this.context.strokeStyle    = "#aaa";
        this.context.stroke();

        var boxes    = this.boxesOnGrid;

        this.boxesOnGrid    = [];

        for( key in boxes ) {
            var currentBox    = boxes[ key ];
            alert( 'i want to create box ' + currentBox.x + 'x' + currentBox.y );
            this.createBoxAt( currentBox.x, currentBox.y );
        }
    };

    /**
     * Find a suitable path between two boxes
     */
    this.findPath        = function()
    {

    };

    this.clickHandler    = function( event )
    {
        var clickOffset        = {
                x:    event.offsetX,
                y:    event.offsetY
            }, clickedBox    = {
                x:    Math.ceil( clickOffset.x / 50 ),
                y:    Math.ceil( clickOffset.y / 50 )
            };

        for( key in GridBox.boxesOnGrid ) {
            if( GridBox.boxesOnGrid[ key ].x === clickedBox.x && GridBox.boxesOnGrid[ key ].y === clickedBox.y ) {
                GridBox.clearGrid();
                GridBox.removeBox( key );
                GridBox.createGrid();
            }
        }

    };

    /**
     * Remove a box from the grid by removing it from the boxes array
     * and re-drawing the grid.
     */
    this.removeBox        = function( key )
    {
        alert( 'removing box ' + key );
        this.boxesOnGrid.splice( key, 1 );
    };

    /**
     * Create a box at a given coordinate on the grid
     * @param    {int} x
     * @param    {int} y 
     */
    this.createBoxAt    = function( x, y )
    {
        var box    = {
                x:    x * this.boxWidth - this.boxWidth,
                y:    y * this.boxHeight - this.boxHeight
            };

        this.createBox( box.x, box.y );
        this.saveBox( x, y );
    };

    this.createBox    = function( xpos, ypos )
    {
        this.context.rect( xpos, ypos, this.boxWidth, this.boxHeight );
        this.context.fillStyle    = '#444';
        this.context.fill();
    };

    this.saveBox    = function( x, y )
    {
        this.boxesOnGrid.push( { x: x, y: y } );
    };
}​
 Delta28 июн. 2012 г., 01:04
Да, да, извините, он работает на Chrome, но не на Firefox, который я использую. Я протестировал несколько вещей, и ни одна из них не сработала, чтобы решить проблему, это действительно странный кусок кода, который у вас там есть budy = P
 halfpastfour.am28 июн. 2012 г., 00:18
Что вы имеете в виду ящики все еще в массиве? ВcreateGrid() я поворачиваюthis.boxesOnGrid в пустой массив:[], // ниндзя для правописания
 halfpastfour.am28 июн. 2012 г., 00:46
Просто нажмите на один из серых квадратов, он показывает, когда я это делаю.
 Delta28 июн. 2012 г., 00:37
Оповещение оclearGrid метод никогда не появляется, что означает, что ваш оператор if наclickHandler Метод никогда не возвращает истину, даже когда вы нажимаете на блок, поэтому, пожалуйста, перепроверьте свои математические данные о том, как вы узнали, в каком блоке щелкнули.

Ответы на вопрос(1)

Решение Вопроса

Рабочая скрипка

+ ИзменитьcreateBox к следующему.

  this.createBox    = function( xpos, ypos )
    {
        this.context.beginPath();
        this.context.rect( xpos, ypos, this.boxWidth, this.boxHeight );
        this.context.fillStyle    = '#444';
        this.context.fill();
        this.context.closePath();
    };

Вы не правильно начинаете / заканчиваете пути, поэтому предыдущий путь не очищается при перерисовке, таким образом заполняя их все заново. Другой способ обойти это просто использоватьfillRect вместо.

The first step to create a path is calling the beginPath method. Internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape. Every time this method is called, the list is reset and we can start drawing new shapes.

Дальнейшее чтение

 28 июн. 2012 г., 01:16
np :) Я знаю, что такие вещи могут вызвать сильное разрывание волос.
 halfpastfour.am28 июн. 2012 г., 01:15
Большое спасибо!

Ваш ответ на вопрос