CODEWITHSUNDEEP
kineticjs
user2786085
user2786085

Reputation: 21

Resize custom shape using Kineticjs

I am looking for a logic where i can resize the kinetic shape. I got examples for resizing a image but if I apply the same logic to a custom shape in my case a Rotary meter. The resizing of the shape is working to some extent but not complete. Can anyone help on this.

Upvotes: 0

Views: 1238

Answers (1)

markE
markE

Reputation: 105015

Here’s how to resize a circular object with a “grabber”

The Method

  • Add a .resize(scaleFactor) method to your guage.
  • When myGuage.resize is called, resize your guage to the scaleFactor.
  • Create a “grabber” group
  • Add a circle to the group that is located to the right of your guage (this is the actual grabber)
  • Add a line to the group that connects the grabber-circle with your guage.
  • Add a dragmove event handler to the grabber-circle
  • When the grabber-circle moves, resize the guage by calling myGuage.resize(scaleFactor).
  • When the grabber-circle moves, reconnect the grabber-connecting-line.

Here is code an a Fiddle: http://jsfiddle.net/m1erickson/cLmAZ/

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

Upvotes: 1

Related Questions