Question

我正在尝试复制http://jsfiddle.net/m1erickson/tLwSM/，但我不能成功。这是我的代码：

<!DOCTYPE html>
<html>
    <head>
         <link rel="stylesheet" href="bootstrap.min.css" />
        <link type="text/css" rel="stylesheet" href="test.css"/>
        <title>title</title>
        <script src="kinetic.js"></script>

    </head>
    <body>

        <h4>Double-Click to create text.<br>Drag text.</h4>
        <div id="container"></div>
        <script>
            var stage = new Kinetic.Stage({
                container: 'container',
                width: 350,
                height: 350
            });
            var layer = new Kinetic.Layer();
            stage.add(layer);

            $(stage.getContent()).on('dblclick', function (event) {
                var pos = stage.getMousePosition();
                var mouseX = parseInt(pos.x);
                var mouseY = parseInt(pos.y);
                var text = new Kinetic.Text({
                    x: mouseX,
                    y: mouseY,
                    text: "@:" + mouseX + "/" + mouseY,
                    fill: "blue",
                    draggable: true,
                });
                layer.add(text);
                layer.draw();
            });
        </script>

    </body>
</html>

我的kinetic.js文件包含直接从http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js复制的代码。

当我运行文件时，我看到的内容在视觉上看起来是正确的，但它实际上并没有做任何事情。 console.log中没有错误。也许是因为我在本地跑步，我需要在终端或其他什么地方做点什么......？

Answer 1

你不需要jQuery来监听舞台上发生的事件。你可以写这样的听众：

stage.on('click', function() {
  //function code
});

或

layer.on('click', function() {
  //function code
});

您在舞台上使用的任何kineticJS对象也是如此。

Answer 2

我没有看到jQuery包含在您的代码中。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="kinetic.js"></script>

没有正确地调用kinetic.js？

2 个答案: