Нужна помощь с использованием этой функции, чтобы уничтожить элемент на холсте, используя JavaScript - PullRequest
Новая
       5

Нужна помощь с использованием этой функции, чтобы уничтожить элемент на холсте, используя JavaScript

1 голос
/ 20 сентября 2010

У меня есть следующий фрагмент кода, написанный с использованием библиотеки холстов mootools и mootools. 

CANVAS.init({ canvasElement : 'canvas', interactive : true });

var itemlayer = CANVAS.layers.add({ id : 'items' });

for(var j = 0; j < 5; j++)
{
for(var i = 0; i < 5; i++)
{

    itemlayer.add({

        id : 'item-'+i + '-' + j,
        x : 51 * i,
        y : 51 * j,
        w : 50,
        h : 50,
        state : 'normal',
        interactive : true, //although they have no interactive events!
        colors : { normal : '#f00', hover : '#00f' },
        events : {
            onDraw : function(ctx){

                    ctx.fillStyle = this.colors[this.state];
                    ctx.fillRect(this.x,this.y,this.w,this.h);

                    this.setDims(this.x,this.y,this.w,this.h);
            }
        }

    });


}

}

CANVAS.addThread(new Thread({
            id : 'myThread',
            onExec : function(){
                    CANVAS.clear().draw();
            }
    }));

Теперь я хотел бы уничтожить квадраты вскоре после их рисования на холсте.

Функция, указанная в документации для этого, 

item.destroy( );

См. Здесь .

Проблема в том, как я это делаю, яне в состоянии уничтожить предметы с холста!Как правильно это сделать?

См. Код , реализованный здесь на js fiddle.

Ответы [ 2 ]

1 голос
/ 20 сентября 2010

Mootools - это основанная на классе инфраструктура JavaScript.Чтобы использовать его, вам нужно вызывать объекты, как если бы они были классами, а не их конструкторами напрямую.

Библиотека CANVAS является исключением из правила, поскольку она является «статическим» классом.Однако прежде чем вы сможете использовать методы слоя, вам нужно инициализировать класс слоя.

Когда вы используете метод add класса Layer, вы запрашиваете добавление новых элементов в этот класс Layer.Вы используете этот метод дважды, один раз перед циклом и один раз внутри него.Однако ни в коем случае вы не инициализируете класс слоя.Поэтому я предполагаю, что этот случай перед циклом должен инициализировать класс.Это необходимо заменить на var itemlayer = new Layer('items');

Когда вы используете itemlayer.add внутри цикла, вы передаете и возражаете против объекта Layer, который затем автоматически создает объекты CanvasItem для вас.Затем он возвращает эти объекты вам.Поскольку метод destroy является членом класса CanvasItem, вам нужно перехватить их в переменной, чтобы вызвать ее.Поскольку это происходит внутри цикла, если вы хотите удалить объекты вне цикла, вам понадобится массив. 

CANVAS.init({ canvasElement : 'canvas', interactive : true });

var itemlayer = new Layer('items');
var itemArray = new Array;
for(var j = 0; j < 5; j++)
{
for(var i = 0; i < 5; i++)
{

    item Array[j][i] = itemlayer.add({

        id : 'item-'+i + '-' + j,
        x : 51 * i,
        y : 51 * j,
        w : 50,
        h : 50,
        state : 'normal',
        interactive : true, //although they have no interactive events!
        colors : { normal : '#f00', hover : '#00f' },
        events : {
            onDraw : function(ctx){

                    ctx.fillStyle = this.colors[this.state];
                    ctx.fillRect(this.x,this.y,this.w,this.h);

                    this.setDims(this.x,this.y,this.w,this.h);
            }
        }

    });


}

Затем, когда вы хотите уничтожить элемент, если вы знаете егоj и i index, вы можете удалить его с помощью itemArray[j][i].destroy().

Наконец, имейте в виду, что метод уничтожения задокументирован только как запуск события уничтожения CanvasItem.В зависимости от того, что реализована в библиотеке, вам может потребоваться написать собственное событие уничтожения, чтобы фактически удалить его с холста.

0 голосов
/ 20 сентября 2010

Я не знаком с внутренностями mootools, но похоже, что item.destroy () просто отправляет событие, а не уничтожает элемент на холсте.Холст представляет собой просто растровое изображение - в нем нет слоев или записей отдельных примитивов, как в SVG.

Вам нужно было бы фактически уничтожить прямоугольники самостоятельно, перерисовав холст без них, нарисовав поверх них или использовав: 

ctx.clearRect(this.x, this.y, this.w, this.h);

Это удалит всю информацию на холсте внутри прямоугольника, заданного параметрами.

edit: После небольшого чтения, похоже, что вы передаете функцию destroy ()к конструктору вашего элемента холста.Эта функция должна содержать любой код, который вы хотите уничтожить ваш элемент (clearRect, fillRect, что угодно).

...