使用 canvas 繪制 跟隨鼠標(biāo)自定義路線 或 點使用貝塞爾曲線 自動繪制

示例使用 angular 可自行修改 核心代碼不變

基礎(chǔ) html 參考

<div class="container" id="container" (mousedown)="addEventListen($event)" (mouseup)="removeEventListen()"[ngStyle]="{'width': snadTable.width + 'px' , 'height': snadTable.height + 'px'}" id="edit-canvas"><img class="bg" id="bgImg" [width]="snadTable.width" [height]="snadTable.height" [src]="snadTable.background.url"><!-- 新路徑 canvas 模式 --><canvas class="way" (click)="handleNewPosition($event)" (mousedown)="$event.preventDefault()"[ngStyle]="{'z-index': canvasZIndex}" #way id="way" [width]="snadTable.width" [height]="snadTable.height"></canvas><!-- 線路上的 關(guān)鍵點 icon --><div *ngFor="let line of snadTable.paths"><div class="line" *ngFor="let keyPoint of line.points" [ngClass]="{'activity': currKeyPoint.uid === keyPoint.uid }"[ngStyle]="{'left': keyPoint?.position?.x - (keyPoint?.width / 2) + 'px' , 'top': keyPoint?.position?.y - (keyPoint?.height / 2) + 'px', 'transform': 'scale(' + keyPoint.scale + ') rotate(' +keyPoint.rotate + 'deg)'}"(click)="onSetKeyPoint(keyPoint)" (click)="$event.preventDefault()" (mousedown)="$event.preventDefault()"><img class=" " [src]="keyPoint.url"[ngStyle]="{'width': keyPoint.width + 'px', 'height': keyPoint.height + 'px' }"></div></div><!-- 新 關(guān)鍵點 --><div class="line" *ngIf="currKeyPoint?.uid"[ngStyle]="{'left': currKeyPoint?.position?.x - (currKeyPoint?.width / 2) + 'px' , 'top': currKeyPoint?.position?.y - (currKeyPoint?.height / 2) + 'px', 'transform': 'scale(' + currKeyPoint.scale + ') rotate(' +currKeyPoint.rotate + 'deg)'}"(mousedown)="$event.preventDefault()"><img class="" [src]="currKeyPoint.url"[ngStyle]="{'width': currKeyPoint.width + 'px', 'height': currKeyPoint.height + 'px'}"></div> </div>

css 加一些定位就行

ts 邏輯

/** 創(chuàng)建畫布 配置樣式 */createdCtx(): void {this.ctx = this.way.nativeElement.getContext("2d");console.log(this.ctx);// this.ctx.strokeStyle = 'rgb(255,221,0)';// const that = this;// var img = new Image();// img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';// img.onload = function () {// var pattern = that.ctx.createPattern(img, 'repeat');// that.ctx.strokeStyle = pattern;// // that.ctx.fillRect(0, 0, 400, 400);// };this.ctx.setLineDash([15, 5]);this.ctx.shadowOffsetX = 0;this.ctx.shadowOffsetY = 0;// this.ctx.shadowBlur = 10;// this.ctx.shadowColor = "#55514c";this.ctx.lineWidth = 10;// this.ctx.lineDashOffset = 3// this.ctx.strokeStyle = "red"} /** 監(jiān)聽開始滑動 */ addEventListen(e): void {this.canvasZIndex = 99; // 處于最高層級， 使操作跟手document.getElementById("way").addEventListener('mousemove', this.handleMapPositin, false);} /** 移除監(jiān)聽事件 */ removeEventListen(): void {document.getElementById("way").removeEventListener('mousemove', this.handleMapPositin, false);this.canvasZIndex = 0; //this.isAddEventListen = false;}/** * 觸摸中處理邏輯函數(shù) 自定義* 該處 使用 貝塞爾函數(shù)輔助劃線 * 不使用的 可直接進行賦值繪畫，則為自定義畫*/handleMapPositin = (e) => {this.currKeyPoint.position = { x: e.layerX, y: e.layerY };this.bzCurve();// this.drawWay(e.layerX, e.layerY); // 自定義畫} /** 不使用貝塞爾曲線繪制函數(shù) */drawWay(x: number, y: number): void {if (this.isMoveTo) {this.ctx.moveTo(x, y);this.isMoveTo = false;} else {this.ctx.lineTo(x, y);}this.ctx.stroke();} /** 使用貝塞爾曲線 */bzCurve(f: number = .3, t: number = .5) {this.ctx.clearRect(0, 0, this.snadTable.width, this.snadTable.height); // 每次繪制重置畫布防殘留，配合下面的延時 setTimeout 一起使用if (this.snadTable.paths?.length > 0) { // 多條不連續(xù)路線循環(huán)繪制setTimeout(() => {for (const line of this.snadTable.paths) {if (line.points?.length > 0) {const points = line.points.map(val => val.position);// console.log(points);this.ctx.strokeStyle = line.color;this.ctx.beginPath();this.ctx.moveTo(points[0].x, points[0].y);let m = 0;let dx1 = 0;let dy1 = 0;let preP = points[0];let dx2 = 0;let dy2 = 0;for (var i = 1; i < points.length; i++) {let curP = points[i];const nexP = points[i + 1];if (nexP) {m = this.gradient(preP, nexP);dx2 = (nexP.x - curP.x) * -f;dy2 = (nexP.y - curP.y) * -f; // dx2 * m * t;} else {dx2 = 0;dy2 = 0;}this.ctx.bezierCurveTo(preP.x - dx1, preP.y - dy1,curP.x + dx2, curP.y + dy2,curP.x, curP.y);dx1 = dx2;dy1 = dy2;preP = curP;}this.ctx.stroke();}}}, 1);}}/** 兩點的斜率 */gradient(a, b): number {return (b.y - a.y) / (b.x - a.x);}

總結(jié)

以上是生活随笔為你收集整理的js 使用 canvas 绘制地图路线的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。