created by http://livecoding.io

README.md

View this code at http://livecoding.io/5923109

options.json

{
    "libraries": [
        "KineticJS"
    ],
    "mode": "html",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

/* css goes here */
.kineticjs-content {
border:3px solid black;
}

water.html

<!-- html goes here -->
<div id="container"></div>

water.js

function update(active_anchor) {
  console.log('in update');
  var group = active_anchor.getParent();
  
  var top_left = group.get('.top_left')[0];
  var top_right = group.get('.top_right')[0];
  var bottom_left = group.get('.bottom_left')[0];
  var bottom_right = group.get('.bottom_right')[0];
  var image = group.get('.image')[0];
  
  var anchor_x = active_anchor.getX();
  var anchor_y = active_anchor.getY();
  
  // update the anchor positions
  switch (active_anchor.getName()) {
    case 'top_left':
      top_right.setY(anchor_y);
      bottom_left.setX(anchor_x);
      break;
    case: 'top_right':
      top_left.setY(anchor_y);
      bottom_right.setX(anchor_x);
      break;
    case: 'bottom_left':
      bottom_right.setY(anchor_y);
      top_left.setX(anchor_x);
      break;
    case: 'bottom_right':
      bottom_left.setY(anchor_y);
      top_right.setX(anchor_x);
      break;
  }
  image.setPosition(top_left.getPosition());
  
  var width = top_right.getX() - top_left.getX();
  var height = bottom_left.getY() - top_left.getY(); 
  if (width && height) {
    image.setSize(width,height);
  }
}
function loadImages(sources, callback) {
	var images = {};
	var image_count = 0;
	var loaded_count = 0;
	for (var src in sources)
		++image_count;
	for (var src in sources) {
		images[src] = new Image();
		images[src].onload = function() {
			if (++loaded_count >= image_count)
				callback(images);
		};
		images[src].src = sources[src];
	}
}
sources = {
    t_shirt: 'http://tools.j-kerr.com/t-shirt.jpg'
	//hello: 'http://tools.j-kerr.com/hello.png',
	//shrimp: 'http://tools.j-kerr.com/shrimp.jpg'
}
function heightFromWidth(image_obj, desired_width) {
  var ratio = image_obj.width / image_obj.height;
  return {width: desired_width, height: desired_width / ratio};
}
function addAnchor(group, x, y, name) {
  console.log("adding anchor");
  var stage = group.getStage();
  var layer = group.getLayer();
  var anchor = new Kinetic.Rect({
    width: 8,
    height: 8,
    x: x,
    y: y,
    fill: 'blue',
    name: name,
    draggable: true,
    dragOnTop: false
  });
  anchor.on('dragmove', function(){
    update(this);
    layer.draw();
  });
  anchor.on('mousedown touchstart', function() {
    group.setDraggable(false);
    this.moveToTop();
  });
  anchor.on('dragend', function() {
    group.setDraggable(true);
    layer.draw();
  });
  anchor.on('mouseover', function(){
    var layer = this.getLayer();
    document.body.style.cursor = 'pointer';
    layer.draw();
  });
  group.add(anchor);
}
function initStage(images) {
var stage = new Kinetic.Stage({
    container: 'container',
    width: 400,
    height: 400
  });
  // Background
  var background_width = 400;
  var backgroundImage = new Kinetic.Image({
    image: images['t_shirt'],
    width: background_width,
    name: 'image',
    height: heightFromWidth(images['t_shirt'], background_width).height
  });
  var shirt_group = new Kinetic.Group({
    draggable: true
  });
  shirt_group.add(backgroundImage);
  var layer = new Kinetic.Layer();
  layer.add(shirt_group);
  console.log('about to add anchor');
  addAnchor(shirt_group, 0, 0, 'top_left');
  addAnchor(shirt_group, 400, 0, 'top_right');
  addAnchor(shirt_group, 400, 400, 'bottom_right');
  addAnchor(shirt_group, 0, 400, 'bottom_left');
  
  stage.add(layer);
}

loadImages(sources, initStage);

water.json

{ }