在mousemove kineticjs上減小圓的半徑

我正嘗試使用kinetic.js創建一個html5畫布繪畫應用程序，用戶可以在其中選擇各種形狀並在畫布上繪製它們。當用戶選擇圓圈並嘗試繪製圓圈時，圓圈的半徑應取決於鼠標在畫布上的距離，現在問題是圓圈半徑增加時它可以正常工作，但當我減小圓圈時，圓圈保持不變相同的大小。如果有人能指引我走向正確的方向，那將會很棒。這是鏈接到小提琴。 http://jsfiddle.net/45fEn/在mousemove kineticjs上減小圓的半徑

<!DOCTYPE HTML> 
<html> 
    <head> 

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


<script src="kinetic.js"></script> 
<script src="js/jquery.js"></script> 


    <script defer="defer"> 

$(document).ready(function() { 

var stage = new Kinetic.Stage({ 
container:'container', 
width:300, 
height:400 
}); 
var layer = new Kinetic.Layer(); 


function drawCircle() { 
var circle = new Kinetic.Circle({ 
x:initialX, y:initialY , radius:tangant , fill:'green' 
}); 
layer.add(circle) ; 
stage.add(layer); 
} 


stage.add(layer); 
var painting =false , clicking = false ; 
var initialX , initialY , finalX , finalY , tangant , newTangant ,storeTime; 


$("canvas").mousedown(function(ev) { 
initialX = ev.clientX; 
initialY = ev.clientY; 
painting = true; 
clicking = true; 
}); 

$("canvas").mousemove(function(ev) { 

finalX = ev.clientX ; 
finalY = ev.clientY ; 
var diffX = initialX - finalX ; 
var diffY = initialY - finalY ; 

tangant = Math.sqrt (Math.pow(diffX,2) + Math.pow(diffY,2)) ; 
console.log(tangant); 


storeTime = setTimeout(function() { newTangant = tangant },200) ; 
if(newTangant < tangant) { console.log("new tan:"+newTangant); 
circle.remove(); 
drawCircle(); 
} 

if(clicking == true) { 
drawCircle(); 
} 

}); 

$("canvas").mouseup(function(ev) { 
painting = false; 
clicking = false; 

}); 




}); 
    </script> 

</body> 
</html>

來源

2013-10-04 Siddharth Sharma

您近了！

順便說一句，您還可以使用stage.getContent掛鉤到舞臺鼠標事件。

stage.getContent()).on('mousedown', function (event) { …do mousedown stuff… }

而不是刪除並重新創建圈...

...只是用circle.setRadius(newRadius)來調整現有的圈子。

$(stage.getContent()).on('mousemove', function (event) { 
    if(!isDragging){return;} 
    var pos=stage.getMousePosition(); 
    var mouseX=parseInt(pos.x); 
    var mouseY=parseInt(pos.y); 
    var dx=mouseX-initialX; 
    var dy=mouseY-initialY; 
    var r=Math.sqrt(dx*dx+dy*dy); 

    // this will resize the circle that is currently being created/resized 
    draggedCircle.setRadius(r); 

    layer.draw(); 
});

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/KLcRc/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script> 

<style> 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:400px; 
    height:400px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 400, 
     height: 400 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 

    var draggedCircle,initialX,initialY; 
    var radius=25; 
    var isDragging=false; 


    function newCircle(mouseX,mouseY){ 
     initialX=mouseX; 
     initialY=mouseY; 
     var circle = new Kinetic.Circle({ 
      x:initialX, 
      y:initialY , 
      radius:1, 
      fill:'green' 
     }); 
     layer.add(circle) ; 
     layer.draw(); 
     return(circle); 
    } 

    $(stage.getContent()).on('mousedown', function (event) { 
     var pos=stage.getMousePosition(); 
     var mouseX=parseInt(pos.x); 
     var mouseY=parseInt(pos.y); 
     draggedCircle=newCircle(mouseX,mouseY); 
     isDragging=true; 
    }); 

    $(stage.getContent()).on('mousemove', function (event) { 
     if(!isDragging){return;} 
     var pos=stage.getMousePosition(); 
     var mouseX=parseInt(pos.x); 
     var mouseY=parseInt(pos.y); 
     var dx=mouseX-initialX; 
     var dy=mouseY-initialY; 
     var r=Math.sqrt(dx*dx+dy*dy); 
     draggedCircle.setRadius(r); 
     layer.draw(); 
    }); 

    $(stage.getContent()).on('mouseup', function (event) { 
     isDragging=false; 
    }); 

}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <p>Drag to create a resizable circle</p> 
    <div id="container"></div> 
</body> 
</html>

來源

2013-10-04 19:13:34 markE

你是真棒！ –

在mousemove kineticjs上減小圓的半徑

回答

相關問題