html5 - Aligning text objects next to each other - KineticJS -
i have text objects , label objects seperate. need aligned next each other when being drawn. i'm adding x , y co-ordinates objects off pixels , not on same line. here code. have added picture of how text being rendered.
![var extractedsubstring = text.substring(currenttextoffset,value.begin-1) console.log(extractedsubstring) currenttextoffset += value.end var complextext = new kinetic.text({ x:x, y:y, width:3000, text: extractedsubstring, fontsize: 14, fontfamily: 'helvetica', fill: '#555', align: 'left' }); x += complextext.gettextwidth() y += complextext.getheight() group.add(complextext) var simplelabel = new kinetic.label({ opacity: 0.75, x:x, y:y, text: { text: value.data, fontfamily: 'helvetica', fontsize: 14, padding: 5, fill: '#555' }, rect: { fill: labelcolor } }); group.add(simplelabel) x +=simplelabel.getwidth() y +=simplelabel.getheight()][1]
[edited:]
how append kinetic labels , texts while aligning them in simulated “textarea”
this key code sets x/y of additional labels/texts.
to valid text width must calculated after creating object.
var newwidth=label.getwidth(); keep track of amount of horizontal line space used text far.
start new line if line width + new text width cause text overflow maximum line width.
to start new line, increment “y” position of line.
if( accumlinewidth + newwidth > maxlinewidth ){ verticalalign+=lineheight; accumlinewidth=leftmargin; } and finally, set x/y positions of new text. , add current text width accumulator.
// set x label.setx(accumlinewidth); accumlinewidth+=width; // set y label.sety(verticalalign-label.getheight()/2); layer.add(label); layer.draw(); here code , fiddle: http://jsfiddle.net/m1erickson/vkg7x/
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script> <style> body{ background-color: ivory; } #container{border:1px solid red; width:350px;} </style> <script> $(function(){ var stage = new kinetic.stage({ container: 'container', width: 350, height: 200 }); var layer = new kinetic.layer(); stage.add(layer); var leftmargin=20; var maxlinewidth=300; var lineheight=25; // new labels/texts begin @ accumlinewidth var accumlinewidth=leftmargin; // new labels/texts align verticalalign var verticalalign=25; function appendlabel(labeltext){ var label = new kinetic.label({ text: { text: labeltext, fontfamily: 'verdana', fontsize: 18, padding: 5, fill: 'white' }, rect: { fill: 'blue' } }); // need calc width/height after creation // set width , check newline var width=label.getwidth(); if(accumlinewidth+width>maxlinewidth){ verticalalign+=lineheight; accumlinewidth=leftmargin; } // set x label.setx(accumlinewidth); accumlinewidth+=width; // set y label.sety(verticalalign-label.getheight()/2); layer.add(label); layer.draw(); } function appendtext(newtext){ var text = new kinetic.text({ text: newtext, fontsize: 18, fontfamily: 'verdana', fill: 'blue' }); // need calc width/height after creation // set width , check newline var width=text.getwidth(); if(accumlinewidth+width>maxlinewidth){ verticalalign+=lineheight; accumlinewidth=leftmargin; } // set x text.setx(accumlinewidth); accumlinewidth+=width; // set y text.sety(verticalalign-text.getheight()/2); layer.add(text); layer.draw(); } // testing var counter=0; $("#label").click(function(){ appendlabel("label"+counter++); }); $("#text").click(function(){ appendtext(" text"+counter++); }); }); // end $(function(){}); </script> </head> <body> <div id="container"></div> <button id="label">add label</button> <button id="text">add text</button> </body> </html>
Comments
Post a Comment