javascript - Get word/character screen position by its string index in Kinetic.js Text element -
input:
some text contain regular words , special words/char separated #. font , fontsize constant, lets arial 14 without styling. example:
lorem ipsum dolor #sit# amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore #et# dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis #aute# irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur #sint# occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
output:
when user clicks #someseparatedword# need log word in console (in example user click 'sit', 'et', 'aute', 'sint' , log words). problem in how or calculate word/char canvas coordinates?
your # delmiters can't recognize word because context.filltext paints words on canvas.
those words become unrecognizable part of canvas bitmap.
what have use context.measuretext map bounding box of every word.
then can test clicked mousex/mousey position against bounding boxes.
here's example code , demo: http://jsfiddle.net/m1erickson/c9nqj/
<!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> <style> body{ background-color: ivory; } canvas{border:1px solid red;} </style> <script> $(function(){ $results=$("#results"); var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); var $canvas=$("#canvas"); var canvasoffset=$canvas.offset(); var offsetx=canvasoffset.left; var offsety=canvasoffset.top; var text="lorem ipsum dolor #sit# amet, consectetur adipisicing elit"; var words=text.split(" "); var wordsbb=new array(words.length); ctx.font="14px arial"; var length=ctx.measuretext(words[0]).width; wordsbb[0]={ x:0, y:0, width:length, height:16 } var accumlength=length; for(var i=1;i<words.length;i++){ var length=ctx.measuretext(" "+words[i]).width; wordsbb[i]={ x:accumlength, y:0, width:length, height:16 } accumlength+=length; } ctx.filltext(text,0,15); ctx.linewidth=0.50; for(var i=0;i<words.length;i++){ var bb=wordsbb[i]; ctx.strokerect(bb.x,bb.y,bb.width,bb.height); } function handlemousemove(e){ e.preventdefault(); var x=parseint(e.clientx-offsetx); var y=parseint(e.clienty-offsety); $results.text("---"); for(var i=0;i<wordsbb.length;i++){ var bb=wordsbb[i]; if(x>bb.x && x<bb.x+bb.width && y>bb.y & y<bb.y+bb.height){ $results.text(words[i]); } } } $("#canvas").mousemove(function(e){handlemousemove(e);}); }); // end $(function(){}); </script> </head> <body> <p>hover on word.</p> <h2 id="results">---</h2> <canvas id="canvas" width=400 height=50></canvas> </body> </html> this demo uses html canvas. kineticjs can these bounding-box calculations on off-screen canvas , use boundings boxes on kinetic.text node.
also note must bounding box calculations line-by-line because boxes y-coordinate different on line1 vs line2, etc.
Comments
Post a Comment