Question

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

我正在搜索拖动并选择http://wordsearch.randomsaladgames.com/

之类的内容

Answer 1

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

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

如果你想实现逻辑，那么这里是你需要的工具的大纲。

创建一个保存文本特征的对象（x，y，width，height，textContent）
创建一个清除画布并在新的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>

Answer 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);

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

2 个答案: