Before asking, I've tried every way, I know possible. Thanks for all assistance.
I'm building a design tool for my site so customers can personalize a product. I'm creating each panel of the tool using group containers. For some questions, the available options would be span across the entire panel.
I want to program using a condition, telling the loop to change Y position and going back to the original X position used by first object so all buttons line up properly.
In my for loop, I set the condition for the second line first, using the Y position hard coded and the X: initial value, using a variable (posX). The second condition uses the nextX value of the labels' text object, in this case its gsze.nextX.
After the object is created and the layer is drawn, I increase the value of the X value for the next iteration, for both variables. But the results are not what I expect. The move to Y works, but X continues from where the second condition leaves off.
Look at the https://jsfiddle.net/cnjkjrz0/6/ . The panel is draggable, so you can drag it to the left.
The js code is an excerpt of the code in question. Hope, I've been clear, thanks.
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;
}
-Andre
I figured out my problem. I'd created a function that required value for X, for each line of objects to be ordered. I also added layer.draw() and x+=buttonSize to move to next space.