Question

所以我试图通过按钮点击在我定义的舞台中画一个圆圈。我在页面上没有收到任何错误，点击后没有错误。我已经使用了调试消息并且代码正在执行，但我看不到任何图像显示或任何错误指示。我能得到一些帮助吗？谢谢。

这是我的javascript代码（这是我的第一篇文章，我希望我能正确地做到这一点）

var height = $(".game").height();
var width = $(".game").width();
$(function () {
    $('#head').on('click', function () {
        shapeMaker.createHead();
    });
});

var shapeMaker = {
    stage: null,
    head: null,

    createHead: function () {

        var stage = new Kinetic.Stage({
            container: 'game',
            width: $('.game').width(),
            height: $('.game').height()
        });

        var head = new Kinetic.Layer();
        var circle = new Kinetic.Circle({
            x: 0,
            y: 0,
            radius: stage.getHeight() / 3,
            fill: '#FFDF5E',
            stroke: 'black',
            strokeWidth: 3
        });

        // add the shape to the layer
        head.add(circle);

        // add the layer to the stage
        head.draw();
        stage.add(head);
    }
}

Answer 1

使用id而不是类

// game board

<div id="game"></div>

$("#game")

// button

<button id="head">Build</button>

$('#head')

这是代码和演示：http://jsfiddle.net/m1erickson/Uh8XW/

<!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-v4.7.2.min.js"></script>

<style>
body{padding:20px;}
#game{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    $('#head').on('click', function(){
        shapeMaker.createHead(); 
    });

    var shapeMaker = {

        stage: null,
        head: null,
        createHead: function() {

            var stage = new Kinetic.Stage({
                container: 'game', 
                width: $('#game').width(), 
                height: $('#game').height()
            });
            var head = new Kinetic.Layer();
            stage.add(head);

            var circle = new Kinetic.Circle({
                x: 0,
                y: 0,
                radius: stage.getHeight() / 3,
                fill: '#FFDF5E',
                stroke: 'black',
                strokeWidth: 3
            });
            head.add(circle);
            head.draw();
        }

    }

}); // end $(function(){});

</script>       
</head>
<body>
    <button id="head">Build</button>
    <div id="game"></div>
</body>
</html>

动态圆圈不会在按钮点击上绘制

1 个答案: