Объяснение структуры мольберта javascript - PullRequest
Новая
       26

Объяснение структуры мольберта javascript

0 голосов
/ 16 июня 2011

Я нашел API, который значительно облегчит работу с CANVAS.Это позволяет легко выбирать и модифицировать отдельные элементы на холсте.Это EaselJS.Документ API находится здесь.http://easeljs.com/docs/

С API пока все в порядке.Что меня смущает, так это какой-то там JavaScript.Часть, выделенная жирным шрифтом или внутри * * (не удалось заставить форматирование работать) Что это за структура javascript?

(функция (цель) {... content...}) (растровое изображение) и в содержании оно ссылается на растровое изображение, которое является чем-то внешним.

ЗДЕСЬ КОД 

   for(var i = 0; i < 100; i++){
    bitmap = new Bitmap(image);
    container.addChild(bitmap);
    bitmap.x = canvas.width * Math.random()|0;
    bitmap.y = canvas.height * Math.random()|0;
    bitmap.rotation = 360 * Math.random()|0;
    bitmap.regX = bitmap.image.width/2|0;
    bitmap.regY = bitmap.image.height/2|0;
    bitmap.scaleX = bitmap.scaleY = bitmap.scale = Math.random()*0.4+0.6;
    bitmap.mouseEnabled = true;
    bitmap.name = "bmp_"+i;

(функция (цель) {

* bitmap.onPress= функция (evt) *

        {if (window.console && console.log) { console.log("press!"); }
        target.scaleX = target.scaleY = target.scale*1.2;
        container.addChild(target);
        // update the stage while we drag this target
        //Ticker provides a central heartbeat for stage to listen to
        //At each beat, stage.tick is called and the display list re-rendered
        Ticker.addListener(stage);
        var offset = {x:target.x-evt.stageX, y:target.y-evt.stageY};

        evt.onMouseMove = function(ev) {
            target.x = ev.stageX+offset.x;
            target.y = ev.stageY+offset.y;
            if (window.console && console.log) { console.log("move!"); }
        }
        evt.onMouseUp = function() {
            target.scaleX = target.scaleY = target.scale;
            // update the stage one last time to render the scale change, then stop updating:
            stage.update();
            Ticker.removeListener(stage);
            if (window.console && console.log) { console.log("up!"); }
        }

**}}) (растровое изображение);**

    bitmap.onClick = function() { if (window.console && console.log) { console.log("click!"); } }
}

1 Ответ

1 голос
/ 16 июня 2011 
(function(target){...content...})(bitmap)

создает лексическую область для содержимого, чтобы любые объявления var или function в содержимом не попадали в глобальную область. Внутри контента, target это просто другое название bitmap.

Вы можете думать об этом как о 

function init(target) { ...content... }

, а затем немедленный вызов, передав bitmap в качестве фактического значения параметра target но первая версия вмешивается в глобальную область еще меньше - она ​​не определяет init как имя в глобальной области.

EDIT: Я думаю, что целью является не лексическая область видимости, а чтобы убедиться, что обработчики событий указывают на правильное растровое изображение, а не на последнее растровое изображение, с которым работает цикл for. инициализации (растровый);

См. Обработчики событий внутри цикла Javascript - нужно закрытие? для более подробной информации.

...