how to draw smooth line through multiple points civil 3d

A flake late, but for the record.

You can achieve smooth lines by using primal splines (aka canonical spline) to draw polish curves that goes through the points.

I made this function for canvas - it's split into three function to increase versatility. The master wrapper part looks like this:

          role 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<ptsa.length-1;i+=two)                  ctx.rect(ptsa[i] - two, ptsa[i+1] - two, four, 4);     } }                  

To draw a curve accept an array with x, y points in the lodge: x1,y1, x2,y2, ...xn,yn.

Use information technology like this:

          var myPoints = [10,10, forty,thirty, 100,x]; //minimum two points var tension = i;  drawCurve(ctx, myPoints); //default tension=0.v drawCurve(ctx, myPoints, tension);                  

The function above calls two sub-functions, ane to calculate the smoothed points. This returns an array with new points - this is the core role which calculates the smoothed points:

          function getCurvePoints(pts, tension, isClosed, numOfSegments) {      // utilise input value if provided, or use a default value        tension = (typeof tension != 'undefined') ? tension : 0.5;     isClosed = isClosed ? isClosed : false;     numOfSegments = numOfSegments ? numOfSegments : sixteen;      var _pts = [], res = [],    // clone assortment         10, y,           // our x,y coords         t1x, t2x, t1y, t2y, // tension vectors         c1, c2, c3, c4,     // central points         st, t, i;       // steps based on num. of segments      // clone array so we don't alter the original     //     _pts = pts.piece(0);      // The algorithm require a previous and side by side point to the actual point array.     // Check if we volition depict closed or open up curve.     // If airtight, copy cease points to get-go and first points to terminate     // If open up, duplicate first points to befinning, end points to terminate     if (isClosed) {         _pts.unshift(pts[pts.length - ane]);         _pts.unshift(pts[pts.length - two]);         _pts.unshift(pts[pts.length - 1]);         _pts.unshift(pts[pts.length - 2]);         _pts.push(pts[0]);         _pts.push(pts[1]);     }     else {         _pts.unshift(pts[i]);   //copy i. indicate and insert at commencement         _pts.unshift(pts[0]);         _pts.push button(pts[pts.length - two]); //copy terminal indicate and append         _pts.button(pts[pts.length - 1]);     }      // ok, lets get-go..      // 1. loop goes through betoken array     // 2. loop goes through each segment between the 2 pts + 1e point before and afterward     for (i=two; i < (_pts.length - 4); i+=two) {         for (t=0; t <= numOfSegments; t++) {              // calc tension vectors             t1x = (_pts[i+2] - _pts[i-two]) * tension;             t2x = (_pts[i+4] - _pts[i]) * tension;              t1y = (_pts[i+3] - _pts[i-i]) * tension;             t2y = (_pts[i+five] - _pts[i+1]) * tension;              // calc step             st = t / numOfSegments;              // calc cardinals             c1 =   2 * Math.pow(st, 3)  - 3 * Math.pw(st, 2) + 1;              c2 = -(two * Math.pow(st, 3)) + 3 * Math.pw(st, 2);              c3 =       Math.pow(st, 3)  - two * Math.pow(st, 2) + st;              c4 =       Math.prisoner of war(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 assortment             res.push(x);             res.push(y);          }     }      render res; }                  

And to actually depict the points as a smoothed curve (or any other segmented lines as long as y'all have an x,y array):

          office drawLines(ctx, pts) {     ctx.moveTo(pts[0], pts[i]);     for(i=2;i<pts.length-1;i+=2) ctx.lineTo(pts[i], pts[i+1]); }                  

This results in this:

Y'all tin can easily extend the canvas and so yous tin can call information technology like this instead:

          ctx.drawCurve(myPoints);                  

Add the post-obit to the javascript:

          if (CanvasRenderingContext2D != 'undefined') {     CanvasRenderingContext2D.prototype.drawCurve =          function(pts, tension, isClosed, numOfSegments, showPoints) {        drawCurve(this, pts, tension, isClosed, numOfSegments, showPoints)} }                  

You tin can find a more optimized version of this on NPM (npm i cardinal-spline-js) or on GitLab.

stclairhowits1990.blogspot.com

Source: https://stackoverflow.com/questions/7054272/how-to-draw-smooth-curve-through-n-points-using-javascript-html5-canvas

Share this post