Question

我需要创建一种容器来管理KineticJS的动态动作。

我有一个简单的对象，我们可以通过使用函数来添加圆圈。

这是我的代码：

function Stage() {
    var self = this;

    self.stage = new Kinetic.Stage({
        container: "museumMapContainer",
        width: 500,
        height: 500
    });

    self.layer = new Kinetic.Layer();

    self.addCircle = function (x,y) {
        var circle = new Kinetic.Circle({
            x: x,
            y: y,
            radius: 40,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 4,
            draggable: true
        });

        circle.on('mouseover', function() {
            document.body.style.cursor = 'pointer';
        });
        circle.on('mouseout', function() {
            document.body.style.cursor = 'default';
        });
        self.layer.add(circle);
    }

    self.stage.add(self.layer);

}

stage = new Stage();

stage.addCircle(250,250);

通常情况下，如果我不将代码放在函数中，我可以轻松地创建一个没有任何问题的圆。但是，这段代码不起作用，我真的不知道为什么。

这是一个Plunker：http://plnkr.co/edit/E1fbCFMeZwGNAKhsArhm?p=preview

控制台中没有错误，没有显示任何内容，我不知道为什么......

Answer 1

确保在创建新圈子后执行layer.draw：

<!DOCTYPE html>
<html>
  <head>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <div id="museumMapContainer" style="width:500px;height:500px;border:1px solid black;"></div>

        <script defer="defer">

        function Stage() {

            var self = this;

            self.stage = new Kinetic.Stage({
                container: "museumMapContainer",
                width: 500,
                height: 500
            });

            self.layer = new Kinetic.Layer();
            self.stage.add(self.layer);

            self.addCircle = function (x,y) {
                var circle = new Kinetic.Circle({
                    x: x,
                    y: y,
                    radius: 40,
                    fill: 'red',
                    stroke: 'black',
                    strokeWidth: 4,
                    draggable: true
                });

                circle.on('mouseover', function() {
                    document.body.style.cursor = 'pointer';
                });
                circle.on('mouseout', function() {
                    document.body.style.cursor = 'default';
                });
                self.layer.add(circle);
                self.layer.draw();
            }
        }

        stage = new Stage();

        stage.addCircle(250,250);

    </script>
  </body>
</html>

KineticJS - 无法添加动态对象

1 个答案: