Kineticjs物体处理和事件监听器

Question

我销售自定义设备，在我的网站上，我有一个闪光工具，客户可以将颜色分配给手套部件并看看它会是什么样子。

我一直在研究这个工具的HTML5版本，所以iPad的人群可以做同样的事情。点击这里为我所做的，

我把kineticjs多个图片加载器，并入侵它加载所有必要的图片阶段和颜色按钮，这是同一图像的多个实例。在他们的例子中，它只有2张图像，所以他们var名称每个图像，这是操纵。我的goai是根据图像名称动态创建变量。

我使用的是for循环和如果语句根据其类型零件的位置。如果正在加载的图像是一个按钮，则原始实例不会添加到舞台，而是另一个循环，并带有计数器，创建实例并放置舞台上。该变量是部分字符串+ n（wht0）。从这里我启动一个eventlistener，点击时会假设隐藏所有与选项有关的手套部分并显示相应的颜色。该代码我已经在我的AS中。

我在白色按钮（第一个按钮）上创建了一个eventlistener，点击时，我将它设置为隐藏手套的白色皮革部分之一。但是，当我点击按钮，我得到的手套部分（如wlt_wht）的错误，我得到一个错误，指出该对象未定义。但是当加载图像时，变量名称来自当前正在加载的数组对象。

在回调调用之前，我添加了另一个变量，将数组的内容转换为字符串，并使用document.write确认对象名称是正确的，但在创建对象之后它现在[对象对象]。在闪光灯中，您手动指定影片剪辑名称，如果您调用它，则可以使用target.name。

我该如何编写Image 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（图片，DB）{

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); 
}