Question

我在尝试在Kinetic图层上创建一个圆圈时遇到了很多问题。基本上我正在尝试创建一个绘画应用程序但我想我需要一步一步解决这个问题。所以我只想简单地拖放一个圆圈。我有一些东西，但我知道它绝对是错误的。拜托，我真的需要一些指导，我很长时间没有使用过KineticJs或javascript，所以我真的很想知道这一切是如何工作的。谢谢你，祝你有个美好的一天！

<!DOCTYPE html>
<html>
<head>
    <meta chartset="utf-8">
    <title>Creating a Cirlce</title>
<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
    }
</style>
</head>
<body>
    <script type="text/javascript" src="kinetic-v4.5.4.min.js"></script>
    <div id="container"></div>
    <script type="text/javascript">
        window.onload = function() {
            var stage = new Kinectic.Stage({
                container: "container",
                width: 400,
                height: 400
            });

            var layer = new Kinetic.Layer();

            background = new Kinetic.Rect({
                x: 0, 
                y: 0, 
                width: stage.getWidth(),
                height: stage.getHeight(),
                fill: "white"
            });

            var Circle = new Kinetic.Circle({
                x: 0,
                y: 0,
                radius: 0,
                fill: "red",
                stroke: "black",
                strokeWidth: 4
            });

            layer.add(background);
            layer.add(Circle);
            stage.add(layer);

            var moving = false;

            stage.on("mousedown", function(){
                if (moving) {
                    moving = false;
                    layer.draw();
                }
                else {
                    var pos = stage.getMousePosition();
                    moving = true;
                    Circle.x = pos.x;
                    Circle.y = pos.y
                    Circle.radius = 0;
                    layer.drawScene();

                }
            });

            stage.on("mousemove", function(){
                if (moving) {
                    var pos = stage.getMousePosition();
                    var x = pos.x;
                    var y = pos.y;
                    Circle.x = pos.x;
                    Cirlce.y = pos.y;
                    Cirlce.radius = 0.5 * Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
                    Cirlce.fill = "red";
                    Circle.stroke = "black";
                    Cirlce.strokeWidth = 1;
                }
            });

            stage.on("mouseup", function() {
                moving = false;
            })
        }

    </script>
</body>

Answer 1

以下是使用鼠标事件动态绘制KineticJS圆圈的方法

在mousedown上：设置圆圈的中心点并打开移动标记。

var moving = false;
var startX;
var startY;

// mousedown sets the centerpoint of the circle (startX/startY)
// and turns on the moving flag

stage.on("mousedown", function(){
    var pos = stage.getMousePosition();
    startX=pos.x;
    startY=pos.y;
    layer.drawScene();
    moving=true;
});

在鼠标上：关闭移动标记。

stage.on("mouseup", function() {
    moving = false;
})

在鼠标移动时：将圆圈从中心点动态扩展到当前鼠标位置

// mousemove dynamically extends the circle from the centerpoint (startX/startY)
// with a radius extending to the current mouse position

stage.on("mousemove", function(){

    if(!moving){return;}

    var pos = stage.getMousePosition();
    var x = pos.x;
    var y = pos.y;
    dx=x-startX;
    dy=y-startY
    var radius=Math.sqrt(dx*dx+dy*dy); 
    circle.setX(startX);
    circle.setY(startY);
    circle.setRadius(radius);
    circle.fill = "red";
    circle.stroke = "black";
    circle.strokeWidth = 1;
    layer.drawScene();
});

这是代码和小提琴：http://jsfiddle.net/m1erickson/43Kmg/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>

<style>
    body{ background-color: ivory; }
    #container{border:1px solid red; width:400px;}
</style>

<script>
    $(function(){

        var stage = new Kinetic.Stage({
            container: "container",
            width: 400,
            height: 400
        });

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


        var background = new Kinetic.Rect({
            x: 0, 
            y: 0, 
            width: stage.getWidth(),
            height: stage.getHeight(),
            fill: "white"
        });
        layer.add(background);


        var circle = new Kinetic.Circle({
          x: stage.getWidth() / 2,
          y: stage.getHeight() / 2,
          radius: 5,
          fill: 'red',
          stroke: 'black',
          strokeWidth: 2
        });
        layer.add(circle);

        layer.draw();


        var moving = false;
        var startX;
        var startY;

        // mousedown sets the centerpoint of the circle
        // and turns on the moving flag

        stage.on("mousedown", function(){
            var pos = stage.getMousePosition();
            startX=pos.x;
            startY=pos.y;
            layer.drawScene();
            moving=true;
        });

        // mousemove draws a circle from the centerpoint (that was set in mousedown)
        // with a radius extending to the current mouse position

        stage.on("mousemove", function(){

            if(!moving){return;}

            var pos = stage.getMousePosition();
            var x = pos.x;
            var y = pos.y;
            dx=x-startX;
            dy=y-startY
            var radius=Math.sqrt(dx*dx+dy*dy); 
            circle.setX(startX);
            circle.setY(startY);
            circle.setRadius(radius);
            circle.fill = "red";
            circle.stroke = "black";
            circle.strokeWidth = 1;
            layer.drawScene();
        });

        // mouseup turns off the moving flag

        stage.on("mouseup", function() {
            moving = false;
        })


    }); // end $(function(){});
</script>

</head>

<body>
    <div id="container"></div>
</body>
</html>

Answer 2

请查看KineticJS官方网站上的教程。 Circle，Drag and Drop

使用Kinectjs制作圈子

2 个答案: