/**
* Javascript/html5 canvas demo of using SplineAlignedImage.js
*
* by Petri Leskinen,
* April 2011, Helsinki, Finland
* petri[dot]leskinen{at}aalto[dot]fi
*/
var
// canvas element on html
elem,
// graphics context of canvas
context,
// grips on the stage
showGrips=true,
grips = [
new Grip(400,100),
new Grip(100,170),
new Grip(100,300),
new Grip(250,500),
new Grip(400,500),
new Grip(700,400),
new Grip(700,300),
new Grip(600,100)
],
// see SplineAlignedImage.js
splineImage,
// link to the grip on canvas currently being dragged
dragged=null;
/**
* A method called when page fully loaded,
*
*/
window.addEventListener('load', init, false);
function init () {
// check that canvas-element and its graphics context exists
elem = document.getElementById('splineImageCanvas');
if (!elem || !elem.getContext) return;
context = elem.getContext('2d');
if (!context) return;
// if everything is ok so far, define the SplineAlignedImage-object and set image source for it
splineImage = new SplineAlignedImage(context);
// default image for splineImageGradient
var img = new Image();
img.src = "Images/Barbwire.png";
// when loaded, update the canvas
img.onload = function() {
splineImage.image = img;
redraw();
};
// add listener on image thumbnails to change the source
var images = document.getElementById('imageTable');
if (images) {
images.addEventListener("click", function (e) {
splineImage.image = e.target;
redraw();
},
false);
}
// add listeners for dragging the grips
elem.addEventListener("click", onMouseUp, false);
elem.addEventListener("mousemove", onMouseMove, false);
elem.addEventListener("mousedown", onMouseDown, false);
}
/**
* Update the stage; clears and generates the spline with change settings
*/
function redraw() {
context.save();
// fill with background color
context.fillStyle= '#888';
context.fillRect(0,0, elem.width,elem.height);
// for drawing on a transparent background:
context.clearRect(0,0, elem.width,elem.height);
// all these variables are coordinate pairs (x,y)
var x0 = grips[0].point,
// this makes the point set continuously loop around,
// count the first controls point by last grip.
x1 = grips[0].point.scaled(2).subtract(grips[7].point),
x2 = grips[1].point,
x3 = grips[2].point;
splineImage.moveTo(x0.x, x0.y);
splineImage.bezierCurveTo(x1.x,x1.y, x2.x,x2.y, x3.x,x3.y);
splineImage.bezierCurveTo(
null, null,
grips[3].point.x, grips[3].point.y,
grips[4].point.x, grips[4].point.y
);
splineImage.bezierCurveTo(
null, null,
grips[5].point.x, grips[5].point.y,
grips[6].point.x, grips[6].point.y
);
splineImage.bezierCurveTo(
null, null,
grips[7].point.x, grips[7].point.y,
grips[0].point.x, grips[0].point.y
);
if (showGrips) {
for (var i=0; i