CODEWITHSUNDEEP
javascriptjquerykineticjs
Etienne Noël
Etienne Noël

Reputation: 6166

KineticJS - Cannot add dynamic object

I need to create a kind of container to manage dynamic actions with KineticJS.

I have a simple object from which we will be able to add a circle by using a function.

Here's my code:

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);

Normally, if I don't put the code inside a function, I can easily create a circle without any problems. However, this code doesn't work and I really don't know why.

Here's a Plunker: http://plnkr.co/edit/E1fbCFMeZwGNAKhsArhm?p=preview

There are no errors in the console and nothing is showing and I don't know why...

Upvotes: 2

Views: 96

Answers (1)

markE
markE

Reputation: 105025

Make sure you do layer.draw after creating your new circles:

<!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>

Upvotes: 1

Related Questions