2

我正在构建一个 Web 应用程序，该应用程序Canvas使用fillText. 用户将单击该画布上的某个位置，我需要检查他们单击了哪个字母（或者他们是否单击了一个字母）。

我想我需要：

  1. 获取每个字母的矢量路径（我不知道该怎么做）。
  2. 使用一些简单的碰撞检测算法检查点击点是否在字母路径内。

是否有一些我缺少的简单功能可以做到这一点？或者也许是这样的图书馆？如果没有任何库，我如何获取特定字体的字母路径以自己进行检查？

我需要使用字母的实际形状，而不仅仅是它的边界框，因为我不希望用户能够在 an 中间单击O并将其注册为命中。

在这个方向上的任何提示将不胜感激。

4

2 回答 2

3

逻辑

如果不为其提供自定义逻辑，您将无法在画布上处理单独的字母。绘制到画布上的所有内容都合并为像素汤。

不幸的是，您不能将文本添加为​​纯路径，因此您必须检查像素值。否则，您可以简单地将文本添加到新路径并isPointInPath为每个字母使用该方法。

一种方法

我们无法在 SO 上提供完整的解决方案，但这里有一个基础，您可以希望在此基础上提供基本逻辑来单击画布上的单个字母：

  • 每个字母都存储为对象，包括。它的位置、大小、字体和字符，还带有一个矩形点击区域（见下文）
  • 用这些对象定义一个数组，然后将它们传递给渲染函数
  • 当您注册单击时，遍历数组并针对矩形命中区域进行测试，如果在内部检查像素 (*)

*) 要区分重叠字母，您需要按优先级检查。您还可以将此字符渲染到单独的画布上，以便仅获取此字符的像素。我没有在演示中展示这个，但你会明白的。

演示

var ltrs = []; /// stores the letter objects

/// Create some random objects

for(;i < 20; i++) {

    /// build the object
    var o = {char: alpha[((alpha.length - 1) * Math.random())|0],
             x:    ((w - 20) * Math.random())|0,
             y:    ((h - 20) * Math.random())|0,
             size: (50 * Math.random() + 16)|0,
             font: fonts[((fonts.length - 1) * Math.random())|0]};

             /// store other things such as color etc.

    /// store it in array
    ltrs.push(o);
}

然后我们有一些函数来渲染这些字符（参见演示）。

然后当我们处理点击时，我们遍历对象数组并首先检查边界以检查我们所在的字母（在这里仅选择一个像素不会使我们能够识别字母）：

demo.onclick = function(e) {

    /// adjust mouse position to be relative to canvas
    var rect = demo.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top,
        i = 0, o;
    
    /// iterate
    for(;o = ltrs[i]; i++) {

        /// is in rectangle? "Older" letters has higher priority here...
        if (x > o.x && x < (o.x + o.rect[2]) &&
            y > o.y && y < (o.y + o.rect[3])) {

            /// it is, check if we actually clicked a letter
            /// This is what you would adopt to be on a separate canvas...    
            if (checkPixel(x, y) === true) {
                setLetterObject(o, '#f00')
                return;
            }
        }
    }
}

像素检查很简单，它在 x/y 位置选择一个像素并检查其alpha值（如果使用纯色背景，则检查颜色）：

function checkPixel(x, y) {
    var data = ctx.getImageData(x, y, 1, 1).data;
    return (data[3] !== 0);
}

点击这里在线演示

更新检查像素功能：

这种更新的检查能够检查字母，即使它们在同一区域中重叠。

我们创建一个单独的画布来绘制字母。这隔离了字母，当我们选择一个像素时，我们只能从该特定字母中获取一个像素。背景颜色是什么也无关紧要，因为我们的屏幕外画布仅在检查期间为字母设置像素而不是背景。开销是最小的。

function checkPixel(o, x, y) {

    /// create off-screen canvas        
    var oc = document.createElement('canvas'),
        octx = oc.getContext('2d'),
        data,
        oldX = o.x,
        oldY = o.y;
   
    /// default canvas is 300x150, adjust if letter size is larger *)
    //oc.width = oc.height = 200;
    
    /// this can be refactored to something better but for demo...
    o.x = 0;
    o.y = 0;

    setLetterObject(octx, o, '#000');
    
    o.x = oldX;
    o.y = oldY;

    data = octx.getImageData(x - oldX, y - oldY, 1, 1).data;
    return (data[3] !== 0);
}

*) 当我们创建一个画布时，默认大小是 300x150。为避免重新分配新的位图，我们只需将其保持原样，因为内存已为其分配，我们只需要从中选择一个像素。如果字母的像素大小大于默认大小，我们当然需要重新分配以使字母适合。

在这个演示中，我们临时覆盖 x 和 y 位置。对于生产，您应该启用该setLetterObject方法以某种方式覆盖它，因为这样会更优雅。但我将在演示中保持原样，因为最重要的是理解原理。

于 2013-09-21T18:18:19.280 回答
0

我想说最好的选择是实际使用像素，顺便说一句，这是您可以做的最准确的事情（请记住，用户在点击时看到的是像素，仅此而已）。

由于您不能直接使用颜色（因为可能有许多具有相同颜色的文本对象（也可能是具有相同颜色的其他基元），您可以使用单独的“pick”画布来代替。

基本上，当您在重绘功能上的主画布上绘制对象时，您也会在另一个具有完全相同大小的隐藏画布中绘制它们，但是您使用每个实体的唯一颜色来绘制它们。因此，您可以在画布上拥有多达 1600 万个实体（24 位），并通过在颜色代码和实体本身之间保留映射来立即知道单击了哪个实体。顺便说一句，这种地图通常用于 CAD 应用程序中，以加快拣货速度。

唯一有点烦人的部分是，在画布上绘图时没有可移植的方法来禁用抗锯齿，因此您从选取画布返回的颜色可能不是您使用的颜色之一，或者更糟糕的是，有可能通过单击实体的边界，认为选择了不同的不相关实体。

这应该是一个非常罕见的事件，除非你的展示真的很拥挤并且无论如何挑选基本上是随机的。

于 2013-09-21T20:40:55.220 回答