文章目录
- 前言
- 一、用途
- 二、使用步骤
-
- 1.轨迹代码
- 2.运行
前言
HTML + js 生成一个线路走向图
例如：用来记录用户到达那一站了，可以标记总共有多少站，用户到达第几站了
提示：以下是本篇文章正文内容，下面案例可供参考
一、用途
用来记录用户到达那一站了，可以标记总共有多少站，用户到达第几站了
二、使用步骤
1.轨迹代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轨迹</title>
</head>
<body>
<div id="track-box" style="position: relative; width: 100%; height: 300px;"></div>
<script>
class Track {
SVG_NS = 'http://www.w3.org/2000/svg'
SVG_LINK_NS = 'http://www.w3.org/1999/xlink'
STROKE_COLOR = '#deb0bd'
STROKE_WIDTH = 10
constructor(el, points) {
this.parent = el
this.bounds = this._getBoundary(points)
this.points = this._pointConvert(points)
this.viewBox = [0, this.bounds.maxY - el.clientHeight, el.clientWidth, el.clientHeight]
this._isMouseDown = false
this._moveStart = {
x: 0, y: 0 }
this._offset = {
x: 0, y: 0 }
this.init()
}
init() {
if (this.svg) return
const {
SVG_NS, SVG_LINK_NS, STROKE_COLOR, viewBox, _moveStart, _offset } = this
const svg = document.createElementNS(SVG_NS, 'svg')
svg.
