没有正确调用 kinetic.js？答案

【问题标题】：not calling kinetic.js properly?没有正确调用 kinetic.js？
【发布时间】：2014-02-06 15:48:09
【问题描述】：

我试图从字面上复制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 中没有错误。也许是因为我在本地运行，我需要在终端或诸如此类的地方做点什么......？

【问题讨论】：

标签： jquery canvas kineticjs

【解决方案1】：

你不需要 jQuery 来监听舞台上发生的事件。您可以像这样编写侦听器：

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

或

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

舞台上的任何 kineticJS 对象也是如此。

【讨论】：

【解决方案2】：

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

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

【讨论】：