通过Kinetic.js文本元素中的字符串索引获取单词/字符屏幕的位置
[英]Get word/character screen position by its string index in Kinetic.js Text element
问题描述
Input: 
输入：
Some text that contain regular words and special words/char separated with #. 某些包含常规单词和特殊单词/字符（用＃分隔）的文本。 Font and fontSize is constant, lets say Arial 14 without any styling. Font和fontSize是常数，可以说Arial 14没有任何样式。 For example: 例如：
Lorem ipsum dolor #sit# amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore #et# dolore magna aliqua.
Output: 输出：
When user clicks #someSeparatedWord# i need to log that word in console (in my example user could click 'sit', 'et', 'aute', 'sint' and it would log only this words). 当用户单击＃someSeparatedWord＃时，我需要在控制台中记录该单词（在我的示例中，用户可以单击“ sit”，“ et”，“ aute”，“ sint”，并且仅记录该单词）。 So the problem is in how to get or calculate this word/char canvas coordinates? 因此，问题出在如何获取或计算此单词/字符画布坐标？
1 个解决方案
解决方案1
3 已采纳 2014-03-22 06:09:02
Your # delmiters can't recognize a word because context.fillText paints words on the canvas. 您的＃个传送者无法识别单词，因为context.fillText在画布上绘制了单词。
Those words become an unrecognizable part of the canvas bitmap. 这些单词成为画布位图不可识别的部分。
What your will have to do is use context.measureText to map the bounding box of every word. 您要做的是使用context.measureText映射每个单词的边界框。
Then you can test a clicked mouseX/mouseY position against those bounding boxes. 然后，您可以针对这些边界框测试单击的mouseX / mouseY位置。
Here's example code and a Demo: http://jsfiddle.net/m1erickson/c9nQj/ 这是示例代码和演示： 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 over a word.</p>
<h2 id="results">---</h2>
<canvas id="canvas" width=400 height=50></canvas>
</body>
</html>
This Demo uses html canvas. 本演示使用html canvas。 For kineticJS you can do these bounding-box calculations on an off-screen canvas and then use those boundings boxes on your Kinetic.Text node. 对于dynamicJS，您可以在屏幕外的画布上执行这些边界框计算，然后在Kinetic.Text节点上使用这些边界框。
Also note that you must do the bounding box calculations line-by-line because the boxes y-coordinate will be different on line1 vs line2, etc. 另请注意，您必须逐行进行边界框计算，因为第1行与第2行等处的y坐标框会有所不同，依此类推。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.