So zeichnen Sie die Zeitleiste mit Vue+Canvas

<Vorlage>
  <div>
    <canvas id="Zeitleiste" width="1200" height="27"></canvas>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: 'pathwaytrack',
  Daten() {
    zurückkehren {
      Bildschirmbreite: Dokument.Textkörper.Clientbreite
    }
  },
  montiert() {
    lass das = dies
    das.carveTimeScale(1200, 1, 10, 0, 10)
    Leinwandfarbe = "#999999"
    lass initTime = 12000
    setzeIntervall(() => {
      initTime += 1000
      that.carveTimeScale(1200, 1, 10, initTime, 10)
    }, 1000);
  },
  Methoden: {
    /**
     * Pixelskala teilen* width: Breite in ms: Anzahl der Millisekunden für eine kleine Skala pxMs: 10 Pixel für eine kleine Skala pageShowStartTime: Anfangszeit (Millisekunden) eine große Intervalldauer (Sekunden)
     */
    carveTimeScale(Breite, ms, pxMs, SeitenanzeigeStartzeit, Intervallzeit) {
      let canvasId = document.getElementById('Zeitleiste')
      lass ctx = canvasId.getContext('2d')
      ctx.clearRect(0, 0, 1200, 60)
      ctx.fillStyle = "#999999"
      // Um ​​eine anormale Anzeige auf Apple 2X-Bildschirmen zu verhindern // Um ​​eine anormale Anzeige auf Apple 2X-Bildschirmen zu verhindern var getPixelRatio = function (context) {
        var backingStore = Kontext.backingStorePixelRatio ||
          Kontext.webkitBackingStorePixelRatio ||
          Kontext.mozBackingStorePixelRatio ||
          Kontext.msBackingStorePixelRatio ||
          Kontext.oBackingStorePixelRatio ||
          Kontext.backingStorePixelRatio || 1
        Rückgabewert (window.devicePixelRatio || 1) / backingStore
      }
      let-Verhältnis = getPixelRatio(ctx)
      let msOffset = this.startOffsetTime(pageShowStartTime, ms) // Start-Offset-Zeit ms
      let pxOffset = msOffset / 1000 * pxMs // Start-Offset-Distanz px
      let leftDistance = 0 // Abstand nach links let leftDistanceTime = 0 // Zeit nach links let beginX = 0
      lass beginY = 0
      für (sei i = 0; i < Breite / (ms * pxMs); i++) {
        leftDistance = pxOffset + i * (ms * pxMs) // Distanz = Start-Offset-Distanz + Anzahl der Raster * px/Raster leftDistanceTime = pageShowStartTime + msOffset + i * ms // Zeit = linke Startzeit + Offset-Zeit + Anzahl der Raster * ms
        beginX = pxOffset + i * (ms * pxMs)
        Leinwandfarbe lassen
        let showTime = pageShowStartTime + beginX / pxMs * 1000
        wenn (showTime % (Intervallzeit * 1000) === 0) {
          beginY = 0
          ctx.font = "12px Arial"
          ctx.fillText(diese.changeTime(showTime, 1), beginX + 10, 22)
          Leinwandfarbe = "#999999"
          ctx.fillStyle = "#B1B1B1"
          this.drawLine(linkerAbstand, beginY, linkerAbstand, 20, Leinwandfarbe, 1)
        } sonst wenn (showTime % Intervallzeit == 0) {
          beginY = 0
          Leinwandfarbe = "#999999"
          this.drawLine(linkerAbstand, beginY, linkerAbstand, 10, Leinwandfarbe, 1)
        }
      }
    },
    /**
     * Linien entsprechend den übergebenen Parametern zeichnen */
    drawLine(beginX, beginY, endX, endY, Farbe, Breite) {
      let canvasId = document.getElementById('time_line');
      Lassen Sie ctx = canvasId.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(beginnX, beginY);
      ctx.lineTo(endeX, endY);
      ctx.strokeStyle = Farbe;
      ctx.lineWidth = Breite;
      ctx.stroke();
    },
    /**
     * Der Offset der linken Startzeit, zurückgegeben in ms
     */
    startOffsetTime(Zeitstempel, Schritt) {
      let remainder = Zeitstempel % Schritt
      Rest zurückgeben? Schritt - Rest: 0
    },
    /**
     *Rückkehrzeit */
    changeTime(Zeit, Zahl) {
      lass Stunde = 0
      let minute = 0
      sei Sekunde = 0
      Sekunde = Zeit / 1000
      wenn (Sekunde >= 3600) {
        Minute = (Sekunde - (Sekunde % 60)) / 60
        Stunde = parseInt((Minute / 60).toString())
        Minute = Minute % 60
        /* eslint-deaktivieren */
        Stunde >= 10 ? Stunde : Stunde = '0' + Stunde
        Minute >= 10? Minute : Minute = '0' + Minute
        Sekunde = Sekunde % 60
        Sekunde >= 10? Sekunde : Sekunde = '0' + Sekunde
        /* eslint-aktivieren */
        returniere Stunde + ':' + Minute + ':' + Sekunde
      }
      if (Sekunde < 3600 && Sekunde >= 60) {
        Stunde = '00'
        Minute = parseInt((Sekunde / 60).toString())
        /* eslint-deaktivieren */
        Minute >= 10? Minute : Minute = '0' + Minute
        Sekunde = Sekunde % 60
        Sekunde >= 10? Sekunde : Sekunde = '0' + Sekunde
        /* eslint-aktivieren */
        returniere Stunde + ':' + Minute + ':' + Sekunde
      }
      wenn (Sekunde < 60) {
        Stunde = '00'
        Minute = '00'
        Sekunde = parseInt(Sekunde)
        /* eslint-deaktivieren */
        Sekunde >= 10? Sekunde : Sekunde = '0' + Sekunde
        /* eslint-aktivieren */
        returniere Stunde + ':' + Minute + ':' + Sekunde
      }
    }
  }
}
</Skript>

<style lang="less" scoped>
  Leinwand {
    Hintergrund: schwarz;
  }
</Stil>