Javascript 使用 JSkinetic 循环改变 X 位置

Question

在问之前，我已经尝试了各种方法，我知道可行。感谢所有帮助。

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

我想使用条件进行编程，告诉循环更改 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; 
    }

-安德烈

Answer 1

我想通了我的问题。我创建了一个需要 X 值的函数，用于要订购的每一行对象。我还添加了 layer.draw() 和 x+=buttonSize 以移动到下一个 space.

Javascript 使用 JSkinetic 循环改变 X 位置

Javascript for loop changing X position using JSkinetic

html

javascript

kineticjs