Kineticjs对象处理＆amp;事件监听器

Question

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

我一直在研究这个工具的HTML5版本，所以ipad人群可以做同样的事情。点击这里查看我已完成的工作，

我带了kineticjs多个图片加载器并将其砍掉以加载舞台和颜色按钮所需的所有图片，这些按钮是同一图像的多个实例。在他们的例子中，它只有2个图像，因此它们 var name 每个图像都是可操作的。我的goai是根据图像名称动态创建变量。

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

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

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

如何编写Image obj以便我可以控制对象？在doc中有一个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";

}

}

function initStage（images，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个颜色按钮）。

假设您已拆分每个图像网址（文件名）以获取颜色和手套类型。

然后，您可以使用一段可重复使用的代码创建所有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);
}