0

キネティック レイヤーに円を作成しようとすると、多くの問題が発生します。基本的に私はペイント アプリケーションを作成しようとしていますが、この問題に 1 つずつ取り組む必要があると考えています。だから、文字通り円をドラッグアンドドロップできるようにしたいだけです。私は何かを持っていますが、それが絶対にエラーだらけであることを知っています。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 円を動的にスケッチする方法は次のとおりです。

マウスダウン時: 円の中心点を設定し、移動フラグをオンにします。

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>
于 2013-06-19T23:31:43.857 に答える