StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POGeneric: Naming structure and drawing KineticJS
text
Body
copied!<p>This one takes a bit more to describe, sorry for the shorter title.</p> <p>I currently do not have my code in front of me but might update this with the full details of how it works and where the problem is located.</p> <p>Basically I notice that without doing a more or less global name (window.whatever) for the shapes/groups it will never draw them. I have done logs of the objects to see if they are proper and have seen nothing wrong with them.</p> <p>The full scope is a layer first, that is passed to a function that i then create shapes and groups in a logical way, without passing the groups back and instead sending the layer as a parameter to add it from within the function. When I do it this way it seems that I can never get it to draw to the container (stage).</p> <p>To add to it, I am looping to create the shapes, as I am making them variable and more percentage based then exact pixels, so I am holding the objects in an array that is generated through the loop.</p> <p>I have done this flat first and it worked, however after moving it to the function it stopped working, is there any reason for this I may be missing?</p> <p>Another note if it is relevant, I am using Adobe AIR.</p> <p>If anyone has any ideas let me know, I will post the actual code when I can (few hours from this posting).</p> <p>UPDATE:</p> <p>Basically the issue I am having is that when i separate the shapes/groups into their own function it does not want to draw them at all. I have tried to call the draw function inline and also just add them to the stage later, both to my understanding will trigger the draw.</p> <p>here is the code</p> <pre><code>var forms = { selector:function(params,bind){ //globals var parent,obj,lastWidth=0,items=[]; //setup defaults var params = params || {}; params.x = params.x || 0; params.y = params.y || 0; params.active = params.active || 0; params.height = params.height || 200; params.children = params.children || [{ fill:'yellow' }]; params.width = params.width || bind.getWidth(); params.margins = params.margins || 5; //container for selector parent = new Kinetic.Group({ x:params.x, y:params.y, height:params.height, width:params.width }); air.Introspector.Console.log(params); var totalMargins = params.margins*(params.children.length+1), activeWidth = (params.width-totalMargins)/2, subItems = params.children.length-1, subWidth = activeWidth/subItems, itemHeight = (params.height-params.margins)/2; //loop all children for(var i=0;i<params.children.length;i++){ //use an array to store objects items[i]={}; //create default object for rectangle obj = {}; obj.y = params.margins; obj.fill = params.children[i].fill; if(params.active==i){ obj.width = activeWidth; }else{ obj.width = subWidth; } obj.x = params.margins+lastWidth; obj.height = itemHeight; lastWidth = lastWidth+(params.margins+obj.width); //create group for text items[i].text = new Kinetic.Group({ x:0, y:itemHeight+params.margins }); //create box for text items[i].box = new Kinetic.Rect({ x: params.margins, y: params.margins, width:params.width-(params.margins*2), height:(params.height-itemHeight)-(params.margins*2), fill:'yellow' }); air.Introspector.Console.log(items[i].box); //add box to text groups items[i].text.add(items[i].box); //create item items[i].item = new Kinetic.Rect(obj); //add groups to parent parent .add(items[i].item) .add(items[i].text); } //add parent to the bound container bind.add(parent); } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload