Drawing a circle using Kinetic Js

Question

I'm trying to build a very basic painting application using the kinetic js framework. All was going well up until I tried to incorporate a shape function that allows the user to click on the stage to specify a circles center points, drag and release the mouse to calculate radius then pass the variables into a constructor and output the shape.

The code I have seems to be running alright and I printed the circle object to the console and it's variables are what I expect them to be but for some reason it does not appear on my stage!

Below is my entire code. The methods concerning the circle are towards the bottom. Can anyone see why it is not appearing on the stage?!

 <script src="kinetic-v4.0.4.js"></script>
<script src="utils.js"></script>
<script>

    //variables
    var stage;
    var canvas;
    var context;
    var mouse;
    var startX, startY, endX, endY;
    var rad;
    var dx, dy;

    //run when the page is loaded
    function init(){

        //Create a stage object
        stage = new Kinetic.Stage({
            container: 'canvas',
            height: 400,
            width: 400,
            draggable: true,
            });

        //References
        //get references to elements within the body
        canvas = document.getElementById("canvas");
        context = canvas.getContext("2d");

        //Capture the coordinates of the mouse in relation to the canvas
        mouse = utils.captureMouse(canvas);

        //Add listener to stage.
        stage.getContainer().addEventListener("mousedown", mouseDown, false);
    }

    function mouseDown(){
        console.log("mousedown");
        stage.getContainer().addEventListener("mousemove", mouseMove, false);
        context.beginPath();
    }

    function mouseMove(){
        console.log("mousemove");
        stage.getContainer().addEventListener("mouseup", mouseUp, false);
        context.lineTo(mouse.x, mouse.y);
        context.stroke();
    }

    function mouseUp(){
        console.log("mouseup");
        stage.getContainer().removeEventListener("mousemove", mouseMove, false);
        context.closePath();
    }

    function circle(){
        //add listeners.
        stage.getContainer().addEventListener("mousedown", getCircleStart, false);
    }

    function getCircleStart(){
        startX = mouse.x;
        startY = mouse.y;
        console.log("START POINTS: X: " + startX + " " + "Y: " + startY);
        stage.getContainer().addEventListener("mouseup", getCircleEnd, false);
    }

    function getCircleEnd(){
        endX = mouse.x;
        endY = mouse.y;
        console.log("END POINTS: X: " + endX + " " + "Y: " + endY);
        dx = endX - startX;
        dy = endY - startY;
        console.log(dx + " " + dy);
        rad = Math.pow(dx, 2) + Math.pow(dy, 2);
        rad = Math.sqrt(rad);
        console.log("radius: " + rad);

        //create layer for circle
        var layer = new Kinetic.Layer();

        //draw circle
        var circle = new Kinetic.Circle({
            x: startX,
            y: startY,
            radius: rad,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 4,
            visible: true
            });

        //add to layer
        layer.add(circle);
        //add layer to stage
        stage.add(layer);

        console.log(circle);
    }

utils.js -> http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Answer 1

尝试添加此代码： circle.getParent().draw()这可能会解决您的问题。

Answer 2

A JSFiddle would be nice, but at a glance it looks like you aren't redrawing your layer when you add the shape to it. Try calling layer.draw() at the bottom of the getCircleEnd method.