在 HTML5 画布中拖动并选择文本答案

【问题标题】：Drag and select text in HTML5 canvas在 HTML5 画布中拖动并选择文本
【发布时间】：2014-05-31 10:04:58
【问题描述】：

我正在开发一个单词搜索游戏。我需要知道如何在画布上使用鼠标选择和存储文本，以与存储的单词集进行比较。画布是否提供拖动和选择功能？请帮忙！或者如果有其他方式，比如easeljs。

我正在搜索拖动并选择类似http://wordsearch.randomsaladgames.com/的内容

【问题讨论】：

你不能。绘制到画布上的文本变成像素，并在呈现时不再作为文本存在。您必须自己实现所有逻辑以将文本模拟为对象等 - 或使用已经为您完成的库。
你能详细说明是哪种类型的库吗？？

标签： html5-canvas

【解决方案1】：

正如 Epistemex 所说，画布不会“记住”您在画布上绘制文本的位置，因此它无法定位或拖动该文本。

您必须自己使用 javascript 实现“记住”文本的逻辑。

如果您想实现逻辑，那么这里是您需要的工具的概要。

创建一个包含文本特征（x、y、宽度、高度、文本内容）的对象
创建一个清除画布并在新的 x,y 位置重绘文本的函数
监听鼠标事件并根据用户拖动鼠标的距离重新定位文本

Canvas 库已经为您完成了实施工作。

这是一个使用 KineticJS 的示例：http://jsfiddle.net/m1erickson/WxGrQ/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


    var text = new Kinetic.Text({
        x:100,
        y:100,
        text:"Drag this Text",
        fontSize:18,
        fill: 'red',
        stroke: 'black',
        strokeWidth: .5,
        draggable: true
    });
    layer.add(text);
    layer.draw();


}); // end $(function(){});
</script>       
</head>
<body>
    <h4>Grab the text and drag it.</h4>
    <div id="container"></div>
</body>
</html>

【讨论】：

但我不想拖动文本，我希望将鼠标拖到文本上并选择它，如果用户针对一组保存的词选择了正确的词。那怎么办？？ :(
我明白了...类似于 DOM 事件，当用户将鼠标拖到文本上时，KineticJS 文本可以触发 mouseenter 和 mouseleave 事件。下面是一个检测鼠标是否悬停在文本上的 KineticJS 示例：jsfiddle.net/m1erickson/S6qQZ 我把它留给你来实现你的游戏逻辑。祝你的游戏好运！

【解决方案2】：

工作演示：

http://jsfiddle.net/JSdc2/6gnTm/1/

它是可拖动的。

Kinetic JS 至少可以让您将文本作为单独的对象“拖动”，就像我认为您正在寻找的那样。该演示还有一些其他功能可能不是您需要的，但这是我出于其他目的制作的演示，只是在这里重复使用它。

    var textGroup = new Kinetic.Group({ // I put everything in groups, and groups can be draggable, so can text nodes.
        x: 200,
        y: 30,
        draggable: true
    });

   // create the text path with text on it
    var textpath = new Kinetic.TextPath({
        x: 0,
        y: 0,
        id: 'textpath1',
        align: 'center',
        fill: '#333',
        fontSize: '48',
        fontFamily: 'sans-serif',
        text: typedText,
        data: SVGdataString
    });

    textGroup.add(textpath);

【讨论】：