before asking, i've tried every way, know possible. assistance.
i'm building design tool site customers can personalize product. i'm creating each panel of tool using group containers. questions, available options span across entire panel.
i want program using condition, telling loop change y position , going original x position used first object buttons line properly.
in loop, set condition second line first, using y position hard coded , x: initial value, using variable (posx). second condition uses nextx value of labels' text object, in case gsze.nextx.
after object created , layer drawn, increase value of x value next iteration, both variables. results not expect. move y works, x continues second condition leaves off.
look @ https://jsfiddle.net/cnjkjrz0/6/ . panel draggable, can drag left.
the js code excerpt of 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"); (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 problem. i'd created function required value x, each line of objects ordered. added layer.draw() , x+=buttonsize move next space.
Comments
Post a Comment