像梦一样奔驰|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; } }
推荐阅读
- 芒种风向标|奔驰全新S级的内饰好看吗？不得不说优秀全靠同行衬托
- 奔驰E级|奔驰E级：开始清仓，为什么降到35万还有库存
- 光明论|劳动者的尊严不能像证件一样被“扔”在地上
- 懂车善用|如今跌破22万，比奔驰C漂亮，22万开出50万面子，曾经卖60万
- 有车以后|2 万多！，最便宜的奔驰 SUV 新款上市，价格又便宜了
- 胖哥汽车频道|或取消2.0T发动机，奔驰国产全新C级谍照曝光
- 科技日日说|realme真我X7全方位评测：不一样的颜值，不一样的体验！，原创
- 王者荣耀|没有明世隐的“狼狗”不能玩？正确玩法教给你一样凯瑞全场！
- 像梦一样奔驰|51WDP开发者平台五大工具全面开放，让数字孪生触手可及
- 虎扑足球|巴黎也是一样，莱昂纳多：任何俱乐部要签人都得先卖人