Search code examples
drag-and-dropresizehtml5-canvaskineticjs

Best structure setup to resize tool using kineticjs

I am making a drawing/designing tool in canvas using kineticjs library.

I can't figure out which is the best way for the objects structure order (groups, shapes, layers). I need to resize an object with dragging the selection nodes.

Here is what I have tried so far and the problem with it: enter image description here

I have the rectangle (grey fill, black border) as the object I need to resize and I have the 8 selection nodes (brown rectangles). The problem with this setup is that rectangle needs to be draggable but the selection nodes must be positioned in the same time with the rectangle. So I have put all these in a single layer. The problem is that only layer can be draggable, not groups and shapes, so when I press the selection node to resize, it acts like I am dragging the whole layer.

What do you suggest, what setup should I use? Thanks!

Solution

  • If your design permits, you can toggle the selector(s) on/off.

    If the selector is OFF, the layer drags normally.

    If the selector is ON (is resizing), dragging the selector resizes the rect.

    Here's one way to do that

    Add an "isResizing" flag to each selector:

    selector1.isResizing=false;

    Listen for click events on the selector and then toggle that selector ON/OFF:

    selector1.on("click",function(e){
    this.isResizing = !this.isResizing;
});

    When any selector turns ON:

    layer.setDragging(false);
selector1.setDragging(true);

    When any selector turns OFF:

    layer.setDragging(true);
selector1.setDragging(false);

    This way, when any selector turns ON you can listen to its dragmove events to resize the rect

    Here is illustrating code and a Fiddle: http://jsfiddle.net/m1erickson/Y2m2z/

    <!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.2.min.js"></script>

<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    layer.setDraggable(true);
    stage.add(layer);

    var rect = new Kinetic.Rect({
        x:50,
        y:50,
        width:100,
        height:100,
        fill: 'blue',
        strokeWidth: 4,
        draggable: false
    });
    layer.add(rect);

    var circle1 = new Kinetic.Circle({
        x:150,
        y:150,
        radius: 10,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        draggable: false
    });
    circle1.isResizing=false;
    circle1.on("click",function(e){
        // toggle resizing true/false
        var isResizing=!this.isResizing;
        this.setDraggable(isResizing);
        layer.setDraggable(!isResizing);
        this.setFill((isResizing?"green":"red"));
        this.isResizing=isResizing;
        layer.draw();
    });
    circle1.on("dragmove",function(){ 
        if(this.isResizing){
            var pos = this.getPosition();
            var x = pos.x;
            var y = pos.y;
            var rectX=rect.getX();
            var rectY=rect.getY();
                rect.setSize(x-rectX,y-rectY);
                layer.draw();
        }
    });
    layer.add(circle1);
    layer.draw();


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

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>