像梦一样奔驰|Vue + Canvas 实现流畅的钢笔涂鸦效果( 三 ) 疫情期间

<= steps; i++) {const t = i / steps;const cx = this.point(t,this.startPoint.x,this.endPoint.x,this.control1.x,this.control2.x);const cy = this.point(t,this.startPoint.y,this.endPoint.y,this.control1.y,this.control2.y);if (i > 0) {const dx = cx - px,dy = cy - py;length += Math.sqrt(dx * dx + dy * dy);}px = cx;py = cy;}return length; }/*** 三次贝塞尔曲线的路径计算公式(点插值):* B(t) = ((1-t)^3 * p0)*+ (3 * (1-t)^2 * t * p1)*+ (3 * (1-t) * t^2 * p2)*+ (t^3 * p3)* t 的取值范围为 [0, 1] 之间* @param t 辅助值* @param start 起始点* @param end 结束点* @param c1 控制点1* @param c2 控制点2*/ protected point(t: number,start: number,end: number,c1: number,c2: number ): number {return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))+ (3.0 * c1 * (1.0 - t) * (1.0 -t) * t)+ (3.0 * c2 * (1.0 - t) * t * t)+ (end * t * t * t); }}节流控制 Throttle
节流控制类
坐标类 Point【像梦一样奔驰|Vue + Canvas 实现流畅的钢笔涂鸦效果】export interface MiPoint { x: number; y: number; time: number;}export class Point implements MiPoint { public x: number; public y: number; public time: number;constructor(x: number, y: number, time?: number) {this.x = x;this.y = y;this.time = time || Date.now(); }/*** 两点直线距离.* @param start*/ public distanceTo(start: MiPoint): number {return Math.sqrt(Math.pow(this.x - start.x, 2)+ Math.pow(this.y - start.y, 2)); }/*** 判断相等.* @param point*/ public equals(point: MiPoint): boolean {return this.x === point.x}/*** 划线的速度(时间差).* @param start*/ public velocityFrom(start: MiPoint): number {return this.time !== start.time? this.distanceTo(start) / (this.time - start.time): 0; } }