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

Question

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

use*_*811 4 html javascript canvas html5-canvas kineticjs

输入：

一些包含常规单词和特殊单词/字符的文本，以 # 分隔。Font 和 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 minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat. Duis #aute# irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。#sint# occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est labourum。

输出：

当用户单击 #someSeparatedWord# 时，我需要在控制台中记录该单词（在我的示例中，用户可以单击“sit”、“et”、“aute”、“sint”，它只会记录这些单词）。那么问题在于如何获取或计算这个单词/字符画布坐标？

Answer 1

mar*_*rkE 5

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

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

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

在此输入图像描述

然后，您可以针对这些边界框测试单击的 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>

Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：	11 年，8 月前
查看次数：	2716 次
最近记录：	11 年，8 月前