kastner · September 24, 2010 02:40
diff --git a/bez.html b/bez.html
 <!DOCTYPE HTML> 
 <html> 
 <head>
        <!-- adapted from: http://iamchenghan.wordpress.com/2010/06/01/html5-canvas-jquery-cubic-bezier-drawing-tool/ -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>HTML5 Canvas, jQuery Cubic Bezier Drawing Tool</title> 
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
        <script type="text/javascript"> 
                var canvas, context, ctrlpts = new Array();
                $(function() {
                    canvas = document.getElementById("cubic_bezier");
                    context = canvas.getContext("2d");
                    $("#cubic_bezier").mousedown(function(evt) {
                        
                        
                        var xpos = evt.pageX-$(this).offset().left;
                        var ypos = evt.pageY-$(this).offset().top;
                        // if (ctrlpts.length <= 6) {
                        for (i = 0; i < ctrlpts.length; i+=2) {
                            if (xpos > ctrlpts[i]-3 && xpos < ctrlpts[i]+3 && ypos > ctrlpts[i+1]-3 && ypos < ctrlpts[i+1]+3) {
                                $(this).bind("mousemove", {index: i}, move_ctrlpts);
                                return;
                                break;
                            }
                        }
                        
                        // draw point
                        ctrlpts[ctrlpts.length] = xpos;
                        ctrlpts[ctrlpts.length] = ypos;
                        context.fillStyle = "#0000ff";
                        context.fillRect(ctrlpts[ctrlpts.length-2]-2, ctrlpts[ctrlpts.length-1]-2, 4, 4);
                        
                        if (ctrlpts.length % 8 == 0) {
                            draw_cubic_bezier();
                        }
                    });
                    $("#cubic_bezier").mouseup(function() {
                        $(this).unbind("mousemove", move_ctrlpts);
                    });
                    
                });
                
                setInterval(function() {$("#points").html(nicePoints());}, 200);
                
                function nicePoints() {
                    var str = "";
                    for (i = 0; i < ctrlpts.length; i+=8) {
                        str += "&target=drawCurve(";
                        for (j=i; j<Math.min(i+8, ctrlpts.length); j+=2) {
                            if (j>i) { str += ","; }
                            str += "" + ctrlpts[j] / context.canvas.width + ",";
                            str += "" + ctrlpts[j+1] / context.canvas.height;
                        }
                        str += ")";
                    }
                    return str;
                }
                
                function draw_cubic_bezier() {
                    for (i = 0; i < ctrlpts.length; i+=8) {
                        console.log(ctrlpts);
                        context.beginPath();
                        context.moveTo(ctrlpts[0+i], ctrlpts[1+i]);
                        context.lineTo(ctrlpts[2+i], ctrlpts[3+i]);
                        context.lineTo(ctrlpts[4+i], ctrlpts[5+i]);
                        context.lineTo(ctrlpts[6+i], ctrlpts[7+i]);
                        context.strokeStyle = "#00ff00";
                        context.stroke();
                        context.beginPath();
                        context.moveTo(ctrlpts[0+i], ctrlpts[1+i]);
                        context.bezierCurveTo(ctrlpts[2+i], ctrlpts[3+i], ctrlpts[4+i], ctrlpts[5+i], ctrlpts[6+i], ctrlpts[7+i]);
                        context.strokeStyle = "#ff0000";
                        context.stroke();
                    }
                }
                function move_ctrlpts(evt) {
                        ctrlpts[evt.data.index] = evt.pageX-$(this).offset().left;
                        ctrlpts[evt.data.index+1] = evt.pageY-$(this).offset().top;
                        canvas.width = canvas.width;
                        context.fillStyle = "#0000ff";
                        for (i = 0; i < ctrlpts.length; i+=2) 
                                context.fillRect(ctrlpts[i]-2, ctrlpts[i+1]-2, 4, 4);
                        draw_cubic_bezier();
                }
        </script> 
 </head> 
 <body> 
    <canvas id="cubic_bezier" width="600" height="400" style="border: 1px solid #777777;"></canvas> 
    <p id="points"></p>
 </body> 
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<!-- adapted from: http://iamchenghan.wordpress.com/2010/06/01/html5-canvas-jquery-cubic-bezier-drawing-tool/ -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>HTML5 Canvas, jQuery Cubic Bezier Drawing Tool</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
	var canvas, context, ctrlpts = new Array();
	$(function() {
	canvas = document.getElementById("cubic_bezier");
	context = canvas.getContext("2d");
	$("#cubic_bezier").mousedown(function(evt) {


	var xpos = evt.pageX-$(this).offset().left;
	var ypos = evt.pageY-$(this).offset().top;
	// if (ctrlpts.length <= 6) {
	for (i = 0; i < ctrlpts.length; i+=2) {
	if (xpos > ctrlpts[i]-3 && xpos < ctrlpts[i]+3 && ypos > ctrlpts[i+1]-3 && ypos < ctrlpts[i+1]+3) {
	$(this).bind("mousemove", {index: i}, move_ctrlpts);
	return;
	break;
	}
	}

	// draw point
	ctrlpts[ctrlpts.length] = xpos;
	ctrlpts[ctrlpts.length] = ypos;
	context.fillStyle = "#0000ff";
	context.fillRect(ctrlpts[ctrlpts.length-2]-2, ctrlpts[ctrlpts.length-1]-2, 4, 4);

	if (ctrlpts.length % 8 == 0) {
	draw_cubic_bezier();
	}
	});
	$("#cubic_bezier").mouseup(function() {
	$(this).unbind("mousemove", move_ctrlpts);
	});

	});

	setInterval(function() {$("#points").html(nicePoints());}, 200);

	function nicePoints() {
	var str = "";
	for (i = 0; i < ctrlpts.length; i+=8) {
	str += "&target=drawCurve(";
	for (j=i; j<Math.min(i+8, ctrlpts.length); j+=2) {
	if (j>i) { str += ","; }
	str += "" + ctrlpts[j] / context.canvas.width + ",";
	str += "" + ctrlpts[j+1] / context.canvas.height;
	}
	str += ")";
	}
	return str;
	}

	function draw_cubic_bezier() {
	for (i = 0; i < ctrlpts.length; i+=8) {
	console.log(ctrlpts);
	context.beginPath();
	context.moveTo(ctrlpts[0+i], ctrlpts[1+i]);
	context.lineTo(ctrlpts[2+i], ctrlpts[3+i]);
	context.lineTo(ctrlpts[4+i], ctrlpts[5+i]);
	context.lineTo(ctrlpts[6+i], ctrlpts[7+i]);
	context.strokeStyle = "#00ff00";
	context.stroke();
	context.beginPath();
	context.moveTo(ctrlpts[0+i], ctrlpts[1+i]);
	context.bezierCurveTo(ctrlpts[2+i], ctrlpts[3+i], ctrlpts[4+i], ctrlpts[5+i], ctrlpts[6+i], ctrlpts[7+i]);
	context.strokeStyle = "#ff0000";
	context.stroke();
	}
	}
	function move_ctrlpts(evt) {
	ctrlpts[evt.data.index] = evt.pageX-$(this).offset().left;
	ctrlpts[evt.data.index+1] = evt.pageY-$(this).offset().top;
	canvas.width = canvas.width;
	context.fillStyle = "#0000ff";
	for (i = 0; i < ctrlpts.length; i+=2)
	context.fillRect(ctrlpts[i]-2, ctrlpts[i+1]-2, 4, 4);
	draw_cubic_bezier();
	}
	</script>
	</head>
	<body>
	<canvas id="cubic_bezier" width="600" height="400" style="border: 1px solid #777777;"></canvas>
	<p id="points"></p>
	</body>
	</html>