使用 Kinetic Js 绘制圆形

Question

我正在尝试使用Kinetic 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);
    }

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

- Javacadabra

Answer 1

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

- jzap

Answer 2

一个JSFiddle会很好，但乍一看，你似乎没有在添加形状时重新绘制图层。尝试在getCircleEnd方法的底部调用layer.draw()。

- michael.orchard

---

JSFiddle似乎现在无法访问，但是如果没有其他人在我之前找到解决方案的话，我会尽快创建一个来确认我的答案！ - michael.orchard

嘿，我尝试按照你建议的方式放置.draw()函数，但不幸的是它并没有改变任何东西。圆形对象仍然被创建，但没有出现在舞台上...我添加了一个屏幕截图，在我添加圆形后可以看到它有x、y坐标，并且它的visible属性设置为true！我不知道发生了什么事！ - Javacadabra

你能创建一个JSFiddle吗？没有你的utils.js，我做不了太多事情。 - michael.orchard

嘿，我以前从未使用过jsFiddle，我无法弄清楚如何上传外部js文件。因此，我在上面的帖子中包含了我的utils.js代码。我对这一切都很新，所以请原谅。我从名为Paul Irish的开发者的博客中获取了utils.js代码。 - Javacadabra

我想我找到问题所在了。我有一个简单的脚本，允许用户点击，当他们点击时会在舞台上放置一个圆形。这似乎是HTML 5画布的问题。最初，我将其设置为舞台的容器。我创建了一个名为“container”的新div，并将其设置为容器，这似乎解决了问题...现在唯一的问题是，由于我不再使用canvas标记，可能会失去功能。 - Javacadabra

不，那就是你应该做的。那肯定是你问题的原因。KineticJS需要一个普通的div作为舞台容器，然后在其中创建自己的画布元素（它为每个创建的图层创建一个画布元素，然后将它们叠放在一起）。不要担心失去功能，你现在走在正确的道路上！ - michael.orchard