Kineticjs Обращение с объектами и прослушиватель событий

Question

Я продаю индивидуальное оборудование, и на моем сайте у меня есть инструмент для вспышки, где клиенты могут назначать цвета для перчаток и видеть, как он будет выглядеть.

Я работаю над версией этого HTML5, поэтому толпа ipad может сделать то же самое. Щелкните здесь для того, что я сделал,

Я взял кинематический многократный загрузчик изображений и взломал его, чтобы загрузить все фотографии, необходимые для сцены, и цветные кнопки, которые представляют собой несколько экземпляров одного и того же изображения. В их примере это было всего 2 изображения, поэтому они отображали var имя каждого изображения, которые были манипулятивными. Мой goai - динамически создавать переменную, основанную на имени изображения.

Я использую цикл и если это заявления в положение частей в соответствии с их типа. Если загружаемое изображение является кнопкой, исходный экземпляр не добавляется на сцену, а другой для цикла со счетчиком создает экземпляры и помещается на сцену. Переменная является частью строки + n (wht0). Отсюда я запускаю eventlistener, если щелкнуть, предположим, чтобы скрыть все элементы перчаток, относящиеся к опции, и показать соответствующий цвет. Этот код у меня уже есть в моей AS.

Я создал eventlistener на белых кнопках (первая кнопка), чтобы при щелчке я спрятал одну из белой кожаной части перчатки. Но когда я нажимаю кнопку, я получаю ошибку в консоли, что часть перчаток (ex wlt_wht), я получаю сообщение об ошибке, указывающее, что объект не определен. Но когда изображение было загружено, имя переменной исходило из текущего загружаемого объекта массива.

Я добавил другую переменную перед вызовом обратного вызова, чтобы преобразовать содержимое массива в строку и использовал document.write, чтобы подтвердить, что имя объекта верное, но после создания объекта его теперь [объект объекта]. Во флэш-памяти вы вручную назначаете имя клипа, а имя target.name доступно, если вы его вызываете.

Как написать изображение obj, чтобы я мог управлять объектом? В документе есть ссылка для id и name как свойств объекта, но когда я их установил, это не сработало со мной. Конечно, я мог бы вручную создать каждый Kinetic.Image(), но в этом нет никакой забавы ... особенно с 191 изображением. Любой совет о том, как я могу обойти эту проблему?

Оформить заказ http://jsfiddle.net/jacobsultd/b2BwU/6/ для проверки и проверки подлинности.

Спасибо.

function loadImages(sources, callback) { 
var assetDir = 'http://dev.nystixs.com/test/inf/'; 
var fileExt = '.png'; 
var images = {}; 
var loadedImages = 0; 
var numImages = 0; 
for (var src in sources) { 
    numImages++; 
} 
for (var src in sources) { 

    images[src] = new Image(); 

    images[src].onload = function() { 
     var db = sources[src].toString(); 

     var dbname = db.slice(-0, -4); 


     if (++loadedImages >= numImages) { 
      callback(images, dbname); 
     } 
    }; 
    images[src].src = assetDir + sources[src]; 
    //images[src].src = assetDir+sources[src]+".png"; 

} 

}

функция initStage (изображения, дБ) {

var shapesLayer = new Kinetic.Layer(); 
var messageLayer = new Kinetic.Layer(); 


//Loading Images 

var xpos = 0; 
var ypos = 200; 
for (var i in images) { 
    var glvP = i.slice(0, 3); 
    db = new Kinetic.Image({ 
     image: images[i], 
     x: xpos, 
     y: ypos 
    }); 

    if (glvP == "wlt") { 
     shapesLayer.add(db); 
     db.setPosition(186.95, 7.00); 

     //db.hide(); 
     shapesLayer.draw(); 
    } else if (glvP == "lin") { 

     shapesLayer.add(db); 
     db.setPosition(204.95, 205.00); 
    } else if (glvP == "plm") { 
     shapesLayer.add(db); 
     db.setPosition(311.95, 6.00); 
    } else if (glvP == "web") { 
     shapesLayer.add(db); 
     db.setPosition(315.95, 7.00); 
    } else if (glvP == "lce") { 
     shapesLayer.add(db); 
     db.setPosition(162.95, 3.00); 
    } else if (glvP == "thb") { 
     shapesLayer.add(db); 
     db.setPosition(63.00, 28.60); 
    } else if (glvP == "bfg") { 
     shapesLayer.add(db); 
     db.setPosition(167.95, 7.00); 
    } else if (glvP == "wst") { 
     shapesLayer.add(db); 
     db.setPosition(208.95, 234.00); 
    } else if (glvP == "fpd") { 
     shapesLayer.add(db); 
     db.setPosition(252.95, 82.00); 
    } else if (glvP == "bac") { 
     shapesLayer.add(db); 
     db.setPosition(0, 0); 
    } else if (glvP == "bnd") { 
     shapesLayer.add(db); 
     db.setPosition(196.95, 164.00); 
    } else {} 


    var rect = new Kinetic.Rect({ 
     x: 710, 
     y: 6, 
     stroke: '#555', 
     strokeWidth: 5, 
     fill: '#ddd', 
     width: 200, 
     height: 325, 
     shadowColor: 'white', 
     shadowBlur: 10, 
     shadowOffset: [5, 5], 
     shadowOpacity: 0.2, 
     cornerRadius: 10 
    }); 
    shapesLayer.add(rect); 


    // End of Glove Parts Tabs 

    //Load Color Buttons 

    if (glvP == "wht") { 

     xpos = -5.00; 
     bpos = 375; 
     var zpos = -5.00; 
     var tpos = -5.00; 
     db.setPosition(xpos, bpos); 
     //shapesLayer.add(db); 

     var n = 0; 
     for (n = 0; n < 12; n++) { 
      if (n < 4) { 
       var glvB = "wht" + n; 
       var btn = glvB; 

       glvB = new Kinetic.Image({ 
        image: images[i], 
        width: 18, 
        height: 18, 
        id: 'wht0' 
       }); 

       glvB.on('mouseout', function() { 
        blankText(''); 
       }); 
       glvB.on('mouseover', function() { 
        writeColors('White', btn); 
       }); 
       glvB.on('click', function() { 
        console.log(glvB + " clicked"); 
        wht.hide(); 
        shapesLayer.draw(); 
       }); 

       glvB.setPosition((xpos + 20), bpos); 
       shapesLayer.add(glvB); 
       xpos = (xpos + 230); 

      } 

-Aj

Answer 1

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

Нет необходимости вручную указывать 10 компонентов перчаток X 21 цвет на компонент (210 цветных кнопок).

Предположим, вы разделили каждый URL изображения (имя файла), чтобы получить цвет и тип перчаток.

Затем вы можете создать все 210 цветных кнопок с помощью одного фрагмента многоразового кода.

Демо: http://jsfiddle.net/m1erickson/H5FDc/

Пример кода:

// Usage: 

addColorButton(100,100,"red","fingers"); 

// 1 function to add 210 color-buttons 

function addColorButton(x,y,color,component){ 

    // create this button 

    var button=new Kinetic.Image({ 
     x:x, 
     y:y, 
     image: imageArray[ color+"-color-button" ],   
    }); 

    // save the color as a property on this button 

    button.gloveColor=color; 

    // save the glove component name as a property on this button 

    button.gloveComponent=component; // eg, "fingers" 

    // resuable click handler 
    // Will change the gloves "#fingers" to "red-fingers-image" 

    button.on("click",function(){ 

     // eg. get the image "red-fingers-image" 
     var newImage = imageArray[this.gloveColor+"-"+this.gloveComponent+"-image"]; 

     // eg. get the Kinetic.Image with id:”finger” 
     var glovePart = layer.find("#"+this.gloveComponent”][0]; 

     // change the Kinetic id:finger’s image 
     // to the red-fingers-image 
     glovePart.setImage(newImage); 

     layer.draw(); 
    }); 

    layer.add(button); 
}