bezier-editor/index.html at master · 123hurray/bezier-editor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Bezier-editor-demo</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="bezier-editor.js"></script>
	<script type="text/javascript" src="bezier-animation.js"></script>
	<style type="text/css">
		html, body {
			margin:0;
			padding:0;
		}
		#left {
			float:left;
			width:50%;
		}
		#right {
			float:left;
			width:50%;
			left:50%;
		}
		#container {
			height:400px;
			width:400px;
		}
		#test {
			background:#FF0000;
			height:10px;
			width:10px;
			margin-top:-5px;
			margin-left:-5px;
			border-radius:5px;
			position:relative;
		}
		canvas {
			margin-top:-5px;
		}
	</style>
</head>
<body>
	<h1>Draw the bezier curve below like in Photoshop</h1>
	<div>
		<div id="test"></div>
		<canvas id="bezier-canvas" width="640" height="480"></canvas>
	</div>
	<div>
		<span>Animation time:</span><input type="text" id="time" value="5000"/>
		<button id="export">Export</button>
		<textarea name="" id="result" cols="30" rows="10"></textarea>
		<button id="execute">Execute</button>
	</div>
	<!--Local file system access. REFERENCE:http://www.html5rocks.com/en/tutorials/file/dndfiles/-->
	<input type="file" id="files" name="files[]" multiple />
	<output id="list"></output>

	<script type="text/javascript">
		var editor = new bezierEditor("bezier-canvas");
		editor.draw();
		$('#export').bind("click",function() {
			var time = $('#time').val();
			if(time)
				$("#result").val(editor.exportBezier(time));
		});
		$('#execute').bind('click', function(){
		var t = new Date();
			eval("$('#test')" + $("#result").val() + '');

		});
	</script>
<script type="text/javascript">
	function handleFileSelect(evt) {
		var files = evt.target.files;
		var f = files[0];
		var reader = new FileReader();
		reader.onload = (function(theFile) {
			return function(e) {
				editor.loadImage(e.target.result);
			};
		})(f);
		reader.readAsDataURL(f);
	}
	document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>