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

库希

我正在研究单词搜索游戏。我需要知道如何使用鼠标在画布上选择并存储文本以与存储的单词集进行比较。画布是否提供拖动和选择功能?请帮忙!或者,是否还有其他方法,例如easyljs。

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

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

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

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

  • 创建一个保存文本特征(x,y,宽度,高度,textContent)的对象

  • 创建一个清除画布并在新的x,y位置重绘文本的函数

  • 侦听鼠标事件并根据用户拖动鼠标的距离重新定位文本

画布库已经为您完成了实现工作。

这是使用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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章