Question

我正在尝试使用kinetic.js创建一个html5画布绘画应用程序，用户可以在其中选择各种形状并在画布上绘制它们。当用户选择圆并尝试绘制它时，圆的半径应该取决于鼠标在画布上覆盖的距离，现在问题是当圆的半径增加它工作正常但是当我减少它时圆的剩余相同的大小。如果有人能指出我正确的方向，那就太好了。这是小提琴的链接。 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>

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

减少mousemove kineticjs上的圆的半径

1 个答案: