Question

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

Answer 1

如果你问如何让这个用法从头创建动态大小的圆圈你可以使用钩子进入Kinetic容器的mousemove事件：

如果您问的是哪种Kinetic方法允许您调整现有圆圈的大小：

myCircle.setRadius(newRadius);

你可以像这样使用一个可拖动的锚点：

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

使用kineticjs调整动态绘制的圆圈的大小

1 个答案: