Question

Till now I have used the example on http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/ as basis for the resizing functionality. However, in the new release of kineticjs (4.3.0+) a special layer for dragging is introduced. This also requires an update of the script above. I have updated the script above, which resulted in the script below. The main difference is that I call the dragged anchor directly instead of accessing it via the group (which used to be on the same layer). The script works well, however there is now a delay. The anchor moves slower then the image resizes. Anyone has an idea how to solve this? Thanks in advance.

function update(group, activeAnchor) {
    var topLeft = group.get(".topLeft")[0];
    var topRight = group.get(".topRight")[0];
    var bottomRight = group.get(".bottomRight")[0];
    var bottomLeft = group.get(".bottomLeft")[0];
    var image = group.get(".image")[0];

    switch (activeAnchor.getName()) {
      case "topLeft":
        var topLeft = activeAnchor;
        topRight.attrs.y = activeAnchor.attrs.y;
        bottomLeft.attrs.x = activeAnchor.attrs.x;
        break;
      case "topRight":
        var topRight = activeAnchor;
        topLeft.attrs.y = activeAnchor.attrs.y;
        bottomRight.attrs.x = activeAnchor.attrs.x;
        break;
      case "bottomRight":
        var bottomRight = activeAnchor;
        bottomLeft.attrs.y = activeAnchor.attrs.y;
        topRight.attrs.x = activeAnchor.attrs.x;
        break;
      case "bottomLeft":
        var bottomLeft = activeAnchor;
        bottomRight.attrs.y = activeAnchor.attrs.y;
        topLeft.attrs.x = activeAnchor.attrs.x;
        break;
    } 

    image.setPosition(topLeft.attrs.x, topLeft.attrs.y);

    var height = bottomLeft.attrs.y - topLeft.attrs.y;
    var width = image.getWidth()*height/image.getHeight();

    topRight.attrs.x = topLeft.attrs.x + width;
    topRight.attrs.y = topLeft.attrs.y;
    bottomRight.attrs.x = topLeft.attrs.x + width;
    bottomRight.attrs.y = topLeft.attrs.y + height;

    if(width && height) {
      image.setSize(width, height);
    }
  }
  function addAnchor(group, x, y, name) {
    var stage = group.getStage();
    var layer = group.getLayer();

    var anchor = new Kinetic.Circle({
      x: x,
      y: y,
      stroke: "#666",
      fill: "#ddd",
      strokeWidth: 2,
      radius: 8,
      name: name,
      draggable: true
    });

    anchor.on("dragmove", function() {
      update(group, this);
      layer.draw();
    });
    anchor.on("mousedown touchstart", function() {
      group.setDraggable(false);
      this.moveToTop();
    });
    anchor.on("dragend", function() {
      group.setDraggable(true);
      layer.draw();
    });
    // add hover styling
    anchor.on("mouseover", function() {
      var layer = this.getLayer();
      document.body.style.cursor = "pointer";
      this.setStrokeWidth(4);
      layer.draw();
    });
    anchor.on("mouseout", function() {
      var layer = this.getLayer();
      document.body.style.cursor = "default";
      this.setStrokeWidth(2);
      layer.draw();
    });

    group.add(anchor);
  }
  function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }
  function initStage(images) {
    var stage = new Kinetic.Stage({
      container: "container",
      width: 578,
      height: 400
    });

    var yodaGroup = new Kinetic.Group({
      x: 100,
      y: 110,
      draggable: true
    });
    var layer = new Kinetic.Layer();

    /*
     * go ahead and add the groups
     * to the layer and the layer to the
     * stage so that the groups have knowledge
     * of its layer and stage
     */

    layer.add(yodaGroup);
    stage.add(layer);

    // darth vader

    // yoda
    var yodaImg = new Kinetic.Rect({
      x: 0,
      y: 0,
      fill: 'blue',
      width: 93,
      height: 104,
      name: "image"
    });

    yodaGroup.add(yodaImg);
    addAnchor(yodaGroup, 0, 0, "topLeft");
    addAnchor(yodaGroup, 93, 0, "topRight");
    addAnchor(yodaGroup, 93, 104, "bottomRight");
    addAnchor(yodaGroup, 0, 104, "bottomLeft");

    yodaGroup.on("dragstart", function() {
      this.moveToTop();
    });

    stage.draw();

  }

$(document).ready(function(){

var sources = {
      darthVader: "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg",
      yoda: "http://www.html5canvastutorials.com/demos/assets/yoda.jpg"
    };
    loadImages(sources, initStage);

Answer 1

http://jsfiddle.net/fQepn/

I looked at the tutorial you provided and made on small change. It seems your issue is related to the new drag layer. You’ll have to upgrade to 4.3.1, http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.1.js , where you can turn off the functionality of the new drag layer.

Simply add:

  dragOnTop: false

inside of the anchor config

  var anchor = new Kinetic.Cir......({x: , y: , ... , dragOnTop: false});

this will prevent the item from being placed in the drag layer.