Team:Peking/drawingcurvetest
From 2013.igem.org
(Difference between revisions)
XingjiePan (Talk | contribs) (Blanked the page) |
XingjiePan (Talk | contribs) |
||
Line 1: | Line 1: | ||
+ | <html> | ||
+ | <canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #d3d3d3;"> | ||
+ | Your browser does not support the HTML5 canvas tag. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | |||
+ | var c=document.getElementById("myCanvas"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | |||
+ | |||
+ | |||
+ | var myPoints = [10,10, 40,30, 300,300]; //minimum two points | ||
+ | var tension = 1; | ||
+ | |||
+ | drawCurve(ctx, myPoints); //default tension=0.5 | ||
+ | |||
+ | function drawCurve(ctx, ptsa, tension, isClosed, numOfSegments, showPoints) { | ||
+ | |||
+ | |||
+ | showPoints = showPoints ? showPoints : false; | ||
+ | |||
+ | ctx.beginPath(); | ||
+ | |||
+ | drawLines(ctx, getCurvePoints(ptsa, tension, isClosed, numOfSegments)); | ||
+ | |||
+ | if (showPoints) { | ||
+ | ctx.stroke(); | ||
+ | ctx.beginPath(); | ||
+ | for(var i=0;i<pts.length-1;i+=2) | ||
+ | ctx.rect(pts[i] - 2, pts[i+1] - 2, 4, 4); | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | function getCurvePoints(ptsa, tension, isClosed, numOfSegments) { | ||
+ | |||
+ | |||
+ | // use input value if provided, or use a default value | ||
+ | tension = (typeof tension != 'undefined') ? tension : 0.5; | ||
+ | isClosed = isClosed ? isClosed : false; | ||
+ | numOfSegments = numOfSegments ? numOfSegments : 16; | ||
+ | |||
+ | var _pts = [], res = [], // clone array | ||
+ | x, y, // our x,y coords | ||
+ | t1x, t2x, t1y, t2y, // tension vectors | ||
+ | c1, c2, c3, c4, // cardinal points | ||
+ | st, t, i; // steps based on num. of segments | ||
+ | |||
+ | // clone array so we don't change the original | ||
+ | |||
+ | _pts = ptsa.slice(0); | ||
+ | |||
+ | // The algorithm require a previous and next point to the actual point array. | ||
+ | // Check if we will draw closed or open curve. | ||
+ | // If closed, copy end points to beginning and first points to end | ||
+ | // If open, duplicate first points to befinning, end points to end | ||
+ | if (isClosed) { | ||
+ | _pts.unshift(ptsa[ptsa.length - 1]); | ||
+ | _pts.unshift(ptsa[ptsa.length - 2]); | ||
+ | _pts.unshift(ptsa[ptsa.length - 1]); | ||
+ | _pts.unshift(ptsa[ptsa.length - 2]); | ||
+ | _pts.push(_pts[0]); | ||
+ | _pts.push(_pts[1]); | ||
+ | } | ||
+ | else { | ||
+ | _pts.unshift(ptsa[1]); //copy 1. point and insert at beginning | ||
+ | _pts.unshift(ptsa[0]); | ||
+ | _pts.push(ptsa[ptsa.length - 2]); //copy last point and append | ||
+ | _pts.push(ptsa[ptsa.length - 1]); | ||
+ | } | ||
+ | |||
+ | // ok, lets start.. | ||
+ | |||
+ | // 1. loop goes through point array | ||
+ | // 2. loop goes through each segment between the 2 pts + 1e point before and after | ||
+ | for (i=2; i < (_pts.length - 4); i+=2) { | ||
+ | for (t=0; t <= numOfSegments; t++) { | ||
+ | |||
+ | // calc tension vectors | ||
+ | t1x = (_pts[i+2] - _pts[i-2]) * tension; | ||
+ | t2x = (_pts[i+4] - _pts[i]) * tension; | ||
+ | |||
+ | t1y = (_pts[i+3] - _pts[i-1]) * tension; | ||
+ | t2y = (_pts[i+5] - _pts[i+1]) * tension; | ||
+ | |||
+ | // calc step | ||
+ | st = t / numOfSegments; | ||
+ | |||
+ | // calc cardinals | ||
+ | c1 = 2 * Math.pow(st, 3) - 3 * Math.pow(st, 2) + 1; | ||
+ | c2 = -(2 * Math.pow(st, 3)) + 3 * Math.pow(st, 2); | ||
+ | c3 = Math.pow(st, 3) - 2 * Math.pow(st, 2) + st; | ||
+ | c4 = Math.pow(st, 3) - Math.pow(st, 2); | ||
+ | |||
+ | // calc x and y cords with common control vectors | ||
+ | x = c1 * _pts[i] + c2 * _pts[i+2] + c3 * t1x + c4 * t2x; | ||
+ | y = c1 * _pts[i+1] + c2 * _pts[i+3] + c3 * t1y + c4 * t2y; | ||
+ | |||
+ | //store points in array | ||
+ | res.push(x); | ||
+ | res.push(y); | ||
+ | |||
+ | } | ||
+ | } | ||
+ | |||
+ | return res; | ||
+ | } | ||
+ | |||
+ | function drawLines(ctx, pts) { | ||
+ | ctx.beginPath(); | ||
+ | |||
+ | |||
+ | ctx.moveTo(pts[0], pts[1]); | ||
+ | |||
+ | for(i=2;i<pts.length-1;i+=2) | ||
+ | { | ||
+ | |||
+ | ctx.lineTo(pts[i], pts[i+1]); | ||
+ | } | ||
+ | ctx.stroke(); | ||
+ | } | ||
+ | |||
+ | |||
+ | </script> | ||
+ | |||
+ | </html> |
Revision as of 13:56, 17 September 2013