+
2
|
list
|
skin
|
login
|
editor
α-wwwiki
::
bezier
user:none
(5529 bytes)
{h1 bézier cubic curve} {canvas {@ id="bez_canvas" height="400" width="600" style="border:1px solid grey;"}} {pre {@ id="bezier"} code} {input {@ type="submit" value="click to init" onclick="°° (function() { var canvas, ctx, code, point, style, drag = null, dPoint; // define initial points function Init(quadratic) { point = { p1: { x:100, y:250 }, p2: { x:400, y:250 } }; if (quadratic) { point.cp1 = { x: 250, y: 100 }; } else { point.cp1 = { x: 150, y: 100 }; point.cp2 = { x: 350, y: 100 }; } // default styles style = { curve: { width: 6, color: '#333' }, cpline: { width: 1, color: '#C00' }, point: { radius: 10, width: 2, color: '#900', fill: 'rgba(200,200,200,0.5)', arc1: 0, arc2: 2 * Math.PI } } // line style defaults ctx.lineCap = 'round'; ctx.lineJoin = 'round'; // event handlers canvas.onmousedown = DragStart; canvas.onmousemove = Dragging; canvas.onmouseup = canvas.onmouseout = DragEnd; // canvas.addEventListener('mousedown', DragStart, false); // canvas.addEventListener('mousemove', Dragging, false); // canvas.addEventListener('mouseup', DragEnd, false); DrawCanvas(); } // draw canvas function DrawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); // control lines ctx.lineWidth = style.cpline.width; ctx.strokeStyle = style.cpline.color; ctx.beginPath(); ctx.moveTo(point.p1.x, point.p1.y); ctx.lineTo(point.cp1.x, point.cp1.y); if (point.cp2) { ctx.moveTo(point.p2.x, point.p2.y); ctx.lineTo(point.cp2.x, point.cp2.y); } else { ctx.lineTo(point.p2.x, point.p2.y); } ctx.stroke(); // curve ctx.lineWidth = style.curve.width; ctx.strokeStyle = style.curve.color; ctx.beginPath(); ctx.moveTo(point.p1.x, point.p1.y); if (point.cp2) { ctx.bezierCurveTo(point.cp1.x, point.cp1.y, point.cp2.x, point.cp2.y, point.p2.x, point.p2.y); } else { ctx.quadraticCurveTo(point.cp1.x, point.cp1.y, point.p2.x, point.p2.y); } ctx.stroke(); // control points for (var p in point) { ctx.lineWidth = style.point.width; ctx.strokeStyle = style.point.color; ctx.fillStyle = style.point.fill; ctx.beginPath(); ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true); ctx.fill(); ctx.stroke(); } ShowCode(); } // show canvas code function ShowCode() { if (code) { //code.firstChild.nodeValue = code.innerHTML = 'canvas = getId(\'canvas\');\n'+ 'ctx = canvas.getContext(\'2d\')\n'+ 'ctx.lineWidth = ' + style.curve.width + ';\nctx.strokeStyle = \'' + style.curve.color + '\';\nctx.beginPath();\n' + 'ctx.moveTo(' + point.p1.x + ', ' + point.p1.y +');\n' + (point.cp2 ? 'ctx.bezierCurveTo('+point.cp1.x+', '+point.cp1.y+', '+point.cp2.x+', '+point.cp2.y+', '+point.p2.x+', '+point.p2.y+');' : 'ctx.quadraticCurveTo('+point.cp1.x+', '+point.cp1.y+', '+point.p2.x+', '+point.p2.y+');' ) + '\nctx.stroke();' ; } } // start dragging function DragStart(e) { e = MousePos(e); var dx, dy; for (var p in point) { dx = point[p].x - e.x; dy = point[p].y - e.y; if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) { drag = p; dPoint = e; canvas.style.cursor = 'move'; return; } } } // dragging function Dragging(e) { if (drag) { e = MousePos(e); point[drag].x += e.x - dPoint.x; point[drag].y += e.y - dPoint.y; dPoint = e; DrawCanvas(); } } // end dragging function DragEnd(e) { drag = null; canvas.style.cursor = 'default'; DrawCanvas(); } // event parser (with thanks to ryan-artecona) function relMouseCoords(event){ var totalOffsetX = 0, totalOffsetY = 0, canvasX = 0, canvasY = 0; var currentElement = this; do { totalOffsetX += currentElement.offsetLeft; totalOffsetY += currentElement.offsetTop; } while(currentElement = currentElement.offsetParent) canvasX = event.pageX - totalOffsetX; canvasY = event.pageY - totalOffsetY; return { x:canvasX, y:canvasY } } HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords; function MousePos(event) { coords = canvas.relMouseCoords(event); return {x:coords.x, y:coords.y } } // start canvas = getId('bez_canvas'); code = getId('bezier'); if (canvas.getContext) { ctx = canvas.getContext('2d'); Init(canvas.className == 'quadratic'); } })(); °°"}} , then play with control points {pre /* * Canvas curves example * * By Craig Buckler, http://twitter.com/craigbuckler * of OptimalWorks.net http://optimalworks.net/ * for SitePoint.com http://sitepoint.com/ * * Refer to: * http://blogs.sitepoint.com/html5-canvas-draw-quadratic-curves/ * http://blogs.sitepoint.com/html5-canvas-draw-bezier-curves/ * * This code can be used without restriction. * with thanks to Ryan Artecona for the function relMouseCoords(event) * (http://stackoverflow.com/users/671915/ryan-artecona) */ }