Question

输入：

一些包含常规单词和特殊单词/ char的文本用＃分隔。字体和fontSize是常量，让我们说Arial 14没有任何样式。例如：

Lorem ipsum dolor＃sit＃amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore＃et＃dolore magna aliqua。 Ut enim ad 微小的veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis＃aute＃irure dolor in 代表性的velitate 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。

输出：

当用户点击#someSeparatedWord＃时，我需要在控制台中记录该单词（在我的示例中，用户可以点击＆＃39; sit＆＃39;，＆＃39; et＆＃39;，＆＃39; aute＆＃39; ，＆＃39; sint＆＃39;它只记录这个词）。所以问题在于如何获取或计算这个单词/ char画布坐标？

Answer 1

您的#dremiters无法识别单词，因为context.fillText在画布上绘制了单词。

这些单词成为画布位图无法识别的部分。

您需要做的是使用context.measureText来映射每个单词的边界框。

enter image description here

然后，您可以针对这些边界框测试单击的mouseX / mouseY位置。

以下是示例代码和演示：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>

此演示使用html画布。对于kineticJS，您可以在离屏画布上执行这些边界框计算，然后在Kinetic.Text节点上使用这些边界框。

另请注意，您必须逐行进行边界框计算，因为第1行与第2行等的y坐标框不同。

通过Kinetic.js Text元素中的字符串索引获取字/字符屏幕位置

1 个答案: