0

我在尝试在动力学层上创建一个圆圈时遇到了很多问题。基本上我正在尝试创建一个绘画应用程序，但我认为我需要一次解决这个问题。所以我只想能够从字面上拖放一个圆圈。我有一些东西，但我知道它绝对充满了错误。拜托，我真的需要一些指导，我很长时间没有使用 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>

4

2 回答 2

3

这是使用鼠标事件动态绘制 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;
});

在 mouseup 上：关闭移动标志。

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

在 mousemove 上：动态地将圆从中心点扩展到当前鼠标位置

// 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>
于 2013-06-19T23:31:43.857 回答
-2

请查看 KineticJS 官方网站上的教程。 圆圈,拖放

于 2013-06-19T18:33:25.960 回答