3

キネティック js フレームワークを使用して、非常に基本的なペイント アプリケーションを構築しようとしています。ユーザーがステージをクリックして円の中心点を指定し、マウスをドラッグアンドリリースして半径を計算し、変数をコンストラクターに渡して形状を出力できる形状関数を組み込むまでは、すべてうまくいきました。

私が持っているコードは問題なく実行されているようで、円オブジェクトをコンソールに出力しました。その変数は期待どおりのものですが、何らかの理由でステージに表示されません!

以下は私のコード全体です。円に関するメソッドは下の方にあります。なぜステージに登場しないのかわかる人いますか?!

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

Javascript コンソール

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

4

2 に答える 2

1

このコードを追加してみてください:circle.getParent().draw() 問題が解決する可能性があります。

于 2012-11-08T11:01:28.063 に答える
0

JSFiddle は便利ですが、シェイプをレイヤーに追加するときに、レイヤーを再描画していないように見えます。getCircleEnd メソッドの最後で layer.draw() を呼び出してみてください。

于 2012-11-02T10:19:45.820 に答える