0

如何在 kineticjs 中调整动态绘制的圆圈的大小？我正在考虑使用锚点，但无法使其工作。

4

1 回答 1

1

If you're asking how you might let the use create dynamically sized circles from scratch you could use hook into the Kinetic container's mousemove event:

http://jsfiddle.net/m1erickson/KLcRc/

If you're asking which Kinetic method allows you to resize an existing circle:

myCircle.setRadius(newRadius);

And you could use a single draggable anchor like this:

enter image description hereenter image description here

<!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 draggerOffset=40;
    var myGuageX=200;
    var myGuageY=200;
    var myGuageRadius=50;


    var dragger=new Kinetic.Group({

    });
    layer.add(dragger);

    var dragLine=new Kinetic.Line({
        points: [myGuageX,myGuageY, 200+draggerOffset+myGuageRadius,200],
        stroke: 'green',
        strokeWidth: 2,
        lineJoin: 'round',
        dashArray: [5,2]    
    });
    dragger.add(dragLine);

    var dragCircle=new Kinetic.Circle({
        x: myGuageX+draggerOffset+myGuageRadius,
        y: myGuageY,
        radius: 10,
        fill: 'skyblue',
        stroke: 'lightgray',
        strokeWidth: 3,
        draggable:true,
        dragBoundFunc: function(pos) {
            return { x: pos.x, y: this.getAbsolutePosition().y }
        }
    });
    dragCircle.on("dragmove",function(){
        var x1=this.getX();
        var y1=this.getY();
        var x2=myGuage.getX();
        var y2=myGuage.getY();
        var dx=x1-x2;
        var dy=y1-y2;
        var r=Math.sqrt(dx*dx+dy*dy)-draggerOffset;
        r=Math.max(5,r);
        myGuage.resize(r);
        dragLine.setPoints([myGuageX,myGuageY, x1,y1]);
    });
    dragger.add(dragCircle);


    // this circle represents your guage
    var myGuage = new Kinetic.Circle({
        x: myGuageX,
        y: myGuageY,
        radius: 50,
        fill: 'gold',
        stroke: 'black',
        strokeWidth: 3
    });
    myGuage.resize=function(scaleFactor){
        // Here is where you would scale your guage by scaleFactor
        // In this demo, I just resize this gold circle
        this.setRadius(scaleFactor);
    };
    layer.add(myGuage);

    layer.draw();

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

</script>       
</head>

<body>
    <p>Drag the blue "grabber" to resize the gold "guage"</p>
    <div id="container"></div>
</body>
</html>
于 2013-10-11T22:05:27.257 回答