0

我正在尝试使用 kinetic.js 创建一个 html5 画布绘画应用程序，用户可以在其中选择各种形状并将它们绘制在 canvas 上。当用户选择圆并尝试绘制它时，圆的半径应该取决于鼠标在画布上覆盖的距离，现在的问题是当圆的半径增加时它工作正常但是当我减小它时，圆仍然是同样大小。如果有人能指出我正确的方向，那就太好了。这是 fiddle 的链接。http://jsfiddle.net/45fEn/

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

1 回答 1

1

你很近！

顺便说一句，您还可以使用 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-04T19:13:34.740 回答