λ-wiki
::
canvas:bezier
+
| 1 |
help
|
pages
|
skin
|
login
|
code
www!k! v.20120610
! CE SITE NECESSITE JAVASCRIPT !
λ-wiki :: éditeur
{h1 canvas:bézier } {canvas {@ id:canvas; height:400; width:500; border:1px solid grey;}} {br } {submit {@ code:bezier; value:draw and drag;} } {br } {pre {@ id=:code; margin-bottom:10px;} code} {pre {@ id:bezier;} °° /* * 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) */ (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 = "canvas = $(\"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 http://stackoverflow.com/users/671915/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 = $("canvas"); code = $("bezier"); if (canvas.getContext) { ctx = canvas.getContext("2d"); Init(canvas.className == "quadratic"); } })(); °°}