0
在問我之前，我嘗試了各種方法，我知道可能。感謝您的幫助。Javascript for loop使用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;
}
-Andre