使用Kinectjs製作圈子

我有很多問題試圖在動力學層上創建一個圓。基本上我試圖創建一個繪畫應用程序，但我想我需要一次解決這個問題。所以我只是想能夠從字面上拖放一個圓圈。我有一些東西，但我知道它絕對充滿了錯誤。請，我真的很需要一些指導，我很久沒有使用KineticJs或JavaScript了，所以我很想知道這是如何工作的。謝謝你，有一個美好的一天！使用Kinectjs製作圈子

<!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>

來源

2013-06-19 InsigMath

下面介紹如何使用鼠標事件

在鼠標按下動態繪製一個圓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; 
});

在mouseup上：關閉移動的標誌。

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-19 23:31:43 markE

小提琴在Chrome Win8中似乎不適合我。 –

@CoryGross謝謝，我忘了以前的KineticJS和Chrome有填充導致失敗的問題。我把最新的KineticJS放在小提琴上，它現在應該工作。感謝您的領導！ – markE

沒問題，不錯的演示！ –

-2

請看看上KineticJS教程官方網站。 Circle，Drag and Drop

來源

2013-06-19 18:33:25 Razum

謝謝你的快速回復@ Razum但這不是我想要的。我想用我的光標從字面上創建一個形狀，例如一個圓或一條線或一個矩形。這是創建一個圓圈。我只是看不出本教程會如何幫助我。 – InsigMath

使用Kinectjs製作圈子

回答

相關問題