Javascript for循环使用JSkinetic改变X的位置

在问之前，我已经尝试了所有的方法，我知道可能的。谢谢你的帮助。

我正在为我的网站建立一个设计工具，以便客户可以个性化产品。我正在使用组容器创建工具的每个面板。对于某些问题，可用的选项将跨越整个小组。

我想使用一个条件来编程，告诉循环改变Y位置并返回到第一个对象使用的原始X位置，以便所有按钮正确排列。

在for循环中，我首先为第二行设置条件，使用硬编码的Y位置和X:初始值，使用变量(posX)。第二个条件使用标签文本对象的nextX值，在本例中为gsze.nextX。

在创建对象并绘制图层之后，我为下一次迭代增加两个变量的X值。但结果并不是我所期望的。移动到Y有效，但X从第二个条件停止的地方继续。

看https://jsfiddle.net/cnjkjrz0/6/。面板是可拖拽的，所以你可以把它拖到左边。

js代码是问题代码的摘录。希望我已经说清楚了，谢谢。

var gpnl = new Kinetic.Group({
x: 10,
y: 200,
draggable: true,
width: 880,
height: 500
});
var cp1 = new Kinetic.Rect({
x: 0,
y: 0,
stroke: 'black',
width: 800,
height: 400
});
gpnl.add(cp1);   
var gsze = new Kinetic.Text({
x: 575,
y: 10,
text: 'Glove Size',
fontSize: 16,
fontFamily: font,
fill: fontcolor,
width: 300,
padding: 2,
align: 'left'
});
gsze.nextX=575;
gsze.nextY=38;
gpnl.add(gsze);
var posX;
posX=575;
 ///////////////Glove Size////////////////
var glvsze = [];
glvsze.push("10.50'"_attribute[874]_933_bfbee3fb9893fc6d8555bbfa06176619");
glvsze.push("11.00'"_attribute[874]_934_600f9fa5886580846053d21cb761eba9");
glvsze.push("11.25'"_attribute[874]_935_374081e6bd3d6a94f1027283e472681d");
glvsze.push("11.50'"_attribute[874]_940_c786d9d7cb6bd0e0bd3c6a5df0837cf1");
glvsze.push("11.75'"_attribute[874]_936_cd91d39b2c679bcdd53691a9e880fd21");
glvsze.push("12.00'"_attribute[874]_284_b29af8bfa58379acf2bd6a99d5a1d16e");
glvsze.push("12.25'"_attribute[874]_937_8c92c13912fe4acd80843dd8ac5a007d");
glvsze.push("12.50'"_attribute[874]_285_248499f9f27659286195942d8475f59a");
glvsze.push("12.75'"_attribute[874]_286_56b09cc207470628e95197c02ef89217");
glvsze.push("13.00'"_attribute[874]_287_90bcda7dd45f808e4a66edd9a95dd227");
glvsze.push("13.50'"_attribute[874]_938_b89c72d0c222059d81ac01d8fca18077");
glvsze.push("14.00'"_attribute[874]_939_10d6b440e531abd7c7a4ceee58b8bd9a");
for (var s = 0; s < glvsze.length; s++) {
        var ser = glvsze[s];
        var sdb = ser.split("_");
        var thrws = sdb[0];
        var sattrib = sdb[1];
        var sval = sdb[2];
        var sid = sdb[3];
        console.log(posX);
         var buttonSize = 55 + 10;
         if (s >= 4 ){ console.log(posX); var label = new Kinetic.Text({
            x: posX - 45,
            y: 65, 
            text: thrws,
            fontSize: 14,
                        listening: false,
            fill: 'white',
            padding: 5,
            align: 'center'
        });
        var sbttn = new Kinetic.Rect({
            x: posX - 50,
            y: 65,
            width: 55,
            height: label.getHeight(),
                        fillLinearGradientStartPoint: {x:0,y:-40},
            fillLinearGradientEndPoint: {x:0,y:50},
            fillLinearGradientColorStops: [0 , grad1 ,1, grad2],
            stroke: '#3395cd',
                        draggable: true,
                        cornerRadius: 10
        });  } else {

                 var label = new Kinetic.Text({
            x: gsze.nextX - 45,
            y: gsze.nextY, 
            text: thrws,
            fontSize: 14,
                        listening: false,
            fill: 'white',
            padding: 5,
            align: 'center'
        });
        var sbttn = new Kinetic.Rect({
            x: gsze.nextX - 50,
            y: gsze.nextY,
            width: 55,
            height: label.getHeight(),
                        fillLinearGradientStartPoint: {x:0,y:-40},
            fillLinearGradientEndPoint: {x:0,y:50},
            fillLinearGradientColorStops: [0 , grad1 ,1, grad2],
            stroke: '#3395cd',
                        draggable: true,
                        cornerRadius: 10
        }); }

           sbttn.on('mousedown touchstart', function(){ 
            //document.getElementID("sdb[3]").checked = true; });
            this.fillLinearGradientStartPointY(10);
            this.fillLinearGradientEndPointY(-50);
            this.fillLinearGradientColorStops([0, grad2 ,1, grad1]);
            console.log("clicked");
            l.draw(); });
           sbttn.on('mouseup touchend', function(){
            this.fillLinearGradientStartPointY(-40);
            this.fillLinearGradientEndPointY(50);
            this.fillLinearGradientColorStops([0, grad1 ,1, grad2]);
            l.draw();
        });

        gpnl.add(sbttn);
        gpnl.add(label);

        l.draw(); posX+=buttonSize;    gsze.nextX+=buttonSize; 
    }

安德烈