·  阅读 2220

# 0x02 绘制公路

``````ctx.save();
ctx.beginPath();
ctx.lineJoin = 'round';
// ctx.lineCap = 'round';
points.forEach(({
x,
y
}, index) => {
ctx[index ? 'lineTo' : 'moveTo'](x, y);
})

ctx.lineWidth = width;
ctx.strokeStyle = sideColor;
ctx.stroke();
ctx.globalCompositeOperation = 'source-over';
ctx.lineWidth = width * 0.5;
ctx.strokeStyle = midColor;
ctx.stroke();

``````export function createSmoothCurvePoints(
points,
tension = 0.5,
closed = false,
numberOfSegments = 16
) {
if (points.length < 2) {
return points;
}
//  展开数组
points = expandPointArr(points);

let ps = points.slice(0), // clone array so we don't change the original
result = [], // result points
x,
y, // our x,y coords
t1x,
t2x,
t1y,
t2y, // tension vectors
c1,
c2,
c3,
c4, // cardinal points
st,
t,
i; // steps based on number of segments

// 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 (closed) {
ps.unshift(points[points.length - 1]);
ps.unshift(points[points.length - 2]);
ps.unshift(points[points.length - 1]);
ps.unshift(points[points.length - 2]);
ps.push(points[0]);
ps.push(points[1]);
} else {
ps.unshift(points[1]); // copy 1st point and insert at beginning
ps.unshift(points[0]);
ps.push(points[points.length - 2]); // copy last point and append
ps.push(points[points.length - 1]);
}

// 1. loop goes through point array
// 2. loop goes through each segment between the 2 points + 1e point before and after
for (i = 2; i < ps.length - 4; i += 2) {
// calculate tension vectors
t1x = (ps[i + 2] - ps[i - 2]) * tension;
t2x = (ps[i + 4] - ps[i - 0]) * tension;
t1y = (ps[i + 3] - ps[i - 1]) * tension;
t2y = (ps[i + 5] - ps[i + 1]) * tension;

for (t = 0; t <= numberOfSegments; t++) {
// calculate step
st = t / numberOfSegments;

// calculate 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);

// calculate x and y cords with common control vectors
x = c1 * ps[i] + c2 * ps[i + 2] + c3 * t1x + c4 * t2x;
y = c1 * ps[i + 1] + c2 * ps[i + 3] + c3 * t1y + c4 * t2y;

//store points in array
result.push(x);
result.push(y);
}
}
return contractPointArr(result);

# 0x03 门架的绘制

## 绘制立方体

``````/**
* 3d坐标转2d坐标
*
* @param {Object} point - 3d坐标
* @param {Object} offset - 一点偏移
* @returns {Object} - 2d坐标
*/
getProjectionPoint(point) {
const network = this._network,
p = vec3.create(),
itMat = network.getMVMatrix();
vec3.transformMat4(
p,
[point.x, point.y, point.z],
itMat
);
const {
x,
y
} = this.getLocation()
return {
x: p[0] + x,
y: -p[1] + y
};
}

`````` drawSide(ctx, points, isFill = false, color = "#00ccff") {
ctx.save();
ctx[isFill ? 'fillStyle' : 'strokeStyle'] = color;
ctx.lineWidth = 1;
ctx.beginPath();
points.forEach(({
x,
y
}, index) => {
ctx[index ? 'lineTo' : 'moveTo'](x, y);
})
ctx.closePath();
ctx[isFill ? 'fill' : 'stroke']();
ctx.restore();
}

# 0x06 最终效果

terry.tan@servasoft.com