Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"></script>
    <script>
      function update(group, activeHandle) {
        var topLeft = group.get(".topLeft")[0],
            topRight = group.get(".topRight")[0],
            bottomRight = group.get(".bottomRight")[0],
            bottomLeft = group.get(".bottomLeft")[0],
            image = group.get(".image")[0],
            activeHandleName = activeHandle.getName(),
            newWidth,
            newHeight,
            imageX,
            imageY;
​
        // Update the positions of handles during drag.
        // This needs to happen so the dimension calculation can use the
        // handle positions to determine the new width/height.
        switch (activeHandleName) {
            case "topLeft":
                topRight.setY(activeHandle.getY());
                bottomLeft.setX(activeHandle.getX());
                break;
            case "topRight":
                topLeft.setY(activeHandle.getY());
                bottomRight.setX(activeHandle.getX());
                break;
            case "bottomRight":
                bottomLeft.setY(activeHandle.getY());
                topRight.setX(activeHandle.getX());
                break;
            case "bottomLeft":
                bottomRight.setY(activeHandle.getY());
                topLeft.setX(activeHandle.getX());
                break;
        }
​
        // Calculate new dimensions. Height is simply the dy of the handles.
        // Width is increased/decreased by a factor of how much the height changed.
        newHeight = bottomLeft.getY() - topLeft.getY();
        newWidth = image.getWidth() * newHeight / image.getHeight();
​
        // Move the image to adjust for the new dimensions.
        // The position calculation changes depending on where it is anchored.
        // ie. When dragging on the right, it is anchored to the top left,
        //     when dragging on the left, it is anchored to the top right.
        if(activeHandleName === "topRight" || activeHandleName === "bottomRight") {
            image.setPosition(topLeft.getX(), topLeft.getY());
        } else if(activeHandleName === "topLeft" || activeHandleName === "bottomLeft") {
            image.setPosition(topRight.getX() - newWidth, topRight.getY());
        }
​
        imageX = image.getX();
        imageY = image.getY();
​
        // Update handle positions to reflect new image dimensions
        topLeft.setPosition(imageX, imageY);
        topRight.setPosition(imageX + newWidth, imageY);
        bottomRight.setPosition(imageX + newWidth, imageY + newHeight);
        bottomLeft.setPosition(imageX, imageY + newHeight);
​
        // Set the image's size to the newly calculated dimensions
        if(newWidth && newHeight) {
            image.setSize(newWidth, newHeight);
        }
      }
      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 darthVaderGroup = new Kinetic.Group({
          x: 270,
          y: 100,
          draggable: true
        });
        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(darthVaderGroup);
        layer.add(yodaGroup);
        stage.add(layer);
​
        // darth vader
        var darthVaderImg = new Kinetic.Image({
          x: 0,
          y: 0,
          image: images.darthVader,
          width: 200,
          height: 138,
          name: "image"
        });
​
        darthVaderGroup.add(darthVaderImg);
        addAnchor(darthVaderGroup, 0, 0, "topLeft");
        addAnchor(darthVaderGroup, 200, 0, "topRight");
        addAnchor(darthVaderGroup, 200, 138, "bottomRight");
        addAnchor(darthVaderGroup, 0, 138, "bottomLeft");
​
        darthVaderGroup.on("dragstart", function() {
          this.moveToTop();
        });
        // yoda
        var yodaImg = new Kinetic.Image({
          x: 0,
          y: 0,
          image: images.yoda,
          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();
      }
​
      window.onload = 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);
      };
​
    </script>
  </head>
  <body onmousedown="return false;">
    <div id="container"></div>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers