当前位置：首页 > article >正文

HTML + js 生成一个线路走向图，可以标记总共有多少站，用户到达第几站了

article 2024/9/27 21:26:15

文章目录

前言
一、用途
二、使用步骤
- 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.