在VueJS中正确实现自定义类？

如何解决在VueJS中正确实现自定义类？

我想知道在Vue方面有经验的人能否指出我正确的方向。

我正在尝试在VueJS中导入一个自定义类（我正在使用Nuxt），但我不确定我是否正确地执行了此操作，此刻我的主要问题是mouseOver Effects arent与Vanilla JS和我无法改变类的半径（可以在Vanilla JS中使用它）。

下面是我的Vue文件：

<template id="breath">
  <div id="page__home">
    <v-row dense>
      <v-col cols="12" align="center" justify="center">
        <h1 class="card__header">
          <v-icon large color="black">
            mdi-comment-question-outline
          </v-icon>
          Mindful Breath
        </h1>
        <div class="canv_wrap">
          <canvas id="canvas" width="550" height="450" @mouseover="mouseMove">
          </canvas>
          <h1 class="instructions">{{ breathText[0] }}</h1>
        </div>
        <v-container fluid class="container">
          <v-row align="center" justify="center">
            <v-spacer></v-spacer>
            <v-btn fab medium color="secondary">
              <v-icon color="black">
                mdi-volume-high
              </v-icon>
            </v-btn>
            <v-spacer></v-spacer>
            <v-btn fab x-large color="primary" @click="start">
              <v-icon large color="white">
                mdi-play
              </v-icon>
            </v-btn>
            <v-spacer></v-spacer>
            <v-btn fab medium color="secondary">
              <v-icon color="black">
                mdi-tune-vertical
              </v-icon>
            </v-btn>
            <v-spacer></v-spacer>
          </v-row>
        </v-container>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import Blob from "../assets/content/Blob_Point"
import { Point } from "../assets/content/Blob_Point"
let oldMousePoint = { x: 0,y: 0 }
let blob = new Blob()
let hover = false
let canvas = document.getElementById("canvas")
export default {
  data() {
    return {
      canvas: null,x: 0,y: 0,ticker: undefined,timer: undefined,timerState: "stopped",breathText: ["Inhale","Hold","Exhale","Hold"],}
  },mounted() {
    let canvas = document.getElementById("canvas")
    this.canvas = canvas.getContext("2d")
    canvas.setAttribute("touch-action","none")
    blob = new Blob(this.color,this.canvas,this.radius)
    blob.color = "#8CE5EA"
    blob.canvas = canvas
    blob.radius = 50
    blob.init()
    blob.render()
  },created() {
    window.addEventListener("pointermove",this.mouseMove)
    window.addEventListener("mousemove",this.mouseMove)
    window.addEventListener("resize",this.resize)
  },methods: {
    start() {
      if (this.timerState !== "running") {
        this.tick()
        this.timerState = "running"
      } else {
        window.clearInterval(this.timer)
        this.timerState = "stopped"
      }
    },// ------ Text Change methods + Timer ---------//
    tick() {
      this.timer = window.setInterval(() => {
        this.textChange()
        this.f_varySize()
      },5)
    },textChange() {
      const first = this.breathText.shift()
      this.breathText = this.breathText.concat(first)
    },// -------- Radius Change (Not Working) ---- //
    f_varySize() {
      console.log(this.radius)
      let dir = 0.25
      if (blob.radius > 300) {
        dir = -0.25
        //console.log(g_radius);
      }
      if (blob.radius < 200) {
        dir = 0.25
        //console.log(g_radius);
      } else {
        blob.radius += dir
      }
    },resize() {
      console.log("resized")
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    },// -------- spring/wave animation on mouseOver of blob ----//
    mouseMove(e) {
      let pos = blob.center
      let diff = { x: e.clientX - pos.x,y: e.clientY - pos.y }
      let distx = diff.x * diff.x
      let disty = diff.y * diff.y
      let dist = Math.sqrt(distx + disty)
      let angle = null
      blob.mousePos = {
        x: pos.x - e.clientX,y: pos.y - e.clientY,}
      if (dist < blob.radius && hover === false) {
        let vector = {
          x: e.clientX - pos.x,y: e.clientY - pos.y,}
        angle = Math.atan2(vector.y,vector.x)
        hover = true
      } else if (dist > blob.radius && hover === true) {
        let vector = {
          x: e.clientX - pos.x,}

        angle = Math.atan2(vector.y,vector.x)
        hover = false
        blob.color = null
      }
      if (typeof angle == "number") {
        let nearestPoint = null
        let distanceFromPoint = 100
        blob.points.forEach((point) => {
          if (Math.abs(angle - point.azimuth) < distanceFromPoint) {
            nearestPoint = point
            distanceFromPoint = Math.abs(angle - point.azimuth)
          }
        })
        if (nearestPoint) {
          let strength = {
            x: oldMousePoint.x - e.clientX,y: oldMousePoint.y - e.clientY,}
          let strX = strength.x * strength.x
          let strY = strength.y * strength.y
          strength = Math.sqrt(strX + strY) * 1
          if (strength > 100) strength = 100
          let strDiv = strength / 100
          nearestPoint.acceleration = strDiv * (hover ? -1 : 1)
        }
      }
      oldMousePoint.x = e.clientX
      oldMousePoint.y = e.clientY
    },// ------ Blob initialisation ------//
    init() {
      for (let i = 0; i < this.numPoints; i++) {
        let point = new Point(this.divisional * (i + 1),this)
        //point.acceleration = -1 + Math.random() * 2
        this.push(point)
      }
    },//---------//
  },}
</script>

<style scoped>
#canvas {
  width: 100%;
  height: auto;
  position: relative;
  border: 1px solid grey;
  z-index: 0;
}
.instructions {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 100;
}
.container {
  z-index: 100;
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}
.canv_wrap {
  position: relative;
}
</style>

下面是带有Blob类的JS文件：

/* eslint-disable */

// Blob Class
export default class Blob {
  // setup function
  constructor(color,canvas) {
    //the objects setup
    // 'this' is a reference to the current class
    this.points = []
    this._color = color
    this.canvas = canvas
  }
  init() {
    for (let i = 0; i < this.numPoints; i++) {
      let point = new Point(this.divisional * (i + 1),this)
      //point.acceleration = -1 + Math.random() * 2;
      this.push(point)
    }
  }
  render() {
    let canvas = this.canvas
    let ctx = this.ctx
    let position = this.position
    let pointsArray = this.points
    let radius = this.radius
    let points = this.numPoints
    let divisional = this.divisional
    let center = this.center
    ctx.clearRect(0,canvas.width,canvas.height)
    pointsArray[0].solveWith(pointsArray[points - 1],pointsArray[1])
    let p0 = pointsArray[points - 1].position
    let p1 = pointsArray[0].position
    let _p2 = p1
    // this is the draw
    ctx.beginPath()
    ctx.moveTo(center.x,center.y)
    ctx.moveTo((p0.x + p1.x) / 2,(p0.y + p1.y) / 2)
    for (let i = 1; i < points; i++) {
      pointsArray[i].solveWith(
        pointsArray[i - 1],pointsArray[i + 1] || pointsArray[0]
      )
      let p2 = pointsArray[i].position
      var xc = (p1.x + p2.x) / 2
      var yc = (p1.y + p2.y) / 2
      ctx.quadraticCurveTo(p1.x,p1.y,xc,yc)
      // ctx.lineTo(p2.x,p2.y);
      //ctx.fillStyle = this.color;
      // ctx.fillRect(p1.x-2.5,p1.y-2.5,5,5);
      p1 = p2
    }

    var xc = (p1.x + _p2.x) / 2
    var yc = (p1.y + _p2.y) / 2
    ctx.quadraticCurveTo(p1.x,yc)
    ctx.lineTo(_p2.x,_p2.y)

    ctx.closePath()
    ctx.fillStyle = this.color
    ctx.fill()
    ctx.strokeStyle = this.color
    // ctx.stroke();

    /*
    ctx.fillStyle = '#000000';
    if(this.mousePos) {
    let angle = Math.atan2(this.mousePos.y,this.mousePos.x) + Math.PI;
    ctx.fillRect(center.x + Math.cos(angle) * this.radius,center.y + Math.sin(angle) * this.radius,5);
    }*/
    requestAnimationFrame(this.render.bind(this))
  }

  push(item) {
    if (item instanceof Point) {
      this.points.push(item)
    }
  }
  set color(value) {
    this._color = value
  }
  get color() {
    return this._color
  }
  set canvas(value) {
    if (
      value instanceof HTMLElement &&
      value.tagName.toLowerCase() === "canvas"
    ) {
      this._canvas = canvas
      this.ctx = this._canvas.getContext("2d")
    }
  }
  get canvas() {
    return this._canvas
  }
  set numPoints(value) {
    if (value > 10) {
      this._points = value
    }
  }
  get numPoints() {
    return this._points || 32
  }
  set radius(value) {
    if (value > 0) {
      this._radius = value
    }
  }
  get radius() {
    return this._radius || 50
  }
  set position(value) {
    if (typeof value == "object" && value.x && value.y) {
      this._position = value
    }
  }
  get position() {
    return this._position || { x: 0.5,y: 0.5 }
  }
  get divisional() {
    return Math.PI * 2 / this.numPoints
  }
  get center() {
    return {
      x: this.canvas.width * this.position.x,y: this.canvas.height * this.position.y,}
  }
  set running(value) {
    this._running = value === true
  }
  get running() {
    return this.running !== false
  }
  
  f_varySize() {
    if (this.radius > 300) {
    dir = -.25;
    console.log(this.radius);
  }
  if (this.radius < 200) {
    dir = .25;
    console.log(this.radius);
  }
  this.radius += dir;
  
  } 
}
// Point Class
export class Point {
  constructor(azimuth,parent) {
    this.parent = parent
    this.azimuth = Math.PI - azimuth
    this._components = {
      x: Math.cos(this.azimuth),y: Math.sin(this.azimuth),}
    this.acceleration = -0.3 + Math.random() * 0.6
  }
  solveWith(leftPoint,rightPoint) {
    this.acceleration =
      (-0.3 * this.radialEffect +
        (leftPoint.radialEffect - this.radialEffect) +
        (rightPoint.radialEffect - this.radialEffect)) *
        this.elasticity -
      this.speed * this.friction
  }
  set acceleration(value) {
    if (typeof value == "number") {
      this._acceleration = value
      this.speed += this._acceleration * 2
    }
  }
  get acceleration() {
    return this._acceleration || 0
  }
  set speed(value) {
    if (typeof value == "number") {
      this._speed = value
      this.radialEffect += this._speed * 3
    }
  }
  get speed() {
    return this._speed || 0
  }
  set radialEffect(value) {
    if (typeof value == "number") {
      this._radialEffect = value
    }
  }
  get radialEffect() {
    return this._radialEffect || 0
  }
  get position() {
    return {
      x:
        this.parent.center.x +
        this.components.x * (this.parent.radius + this.radialEffect),y:
        this.parent.center.y +
        this.components.y * (this.parent.radius + this.radialEffect),}
  }
  get components() {
    return this._components
  }
  set elasticity(value) {
    if (typeof value === "number") {
      this._elasticity = value
    }
  }
  get elasticity() {
    return this._elasticity || 0.001
  }
  set friction(value) {
    if (typeof value === "number") {
      this._friction = value
    }
  }
  get friction() {
    return this._friction || 0.0085
  }
}

这个想法是基于Liam Egan的草图： https://codepen.io/shubniggurath/pen/EmMzpp

这是单击“播放”按钮时控制台的屏幕截图，该按钮触发了start（）方法，该方法中有一个功能可以更改文本（有效）并更改半径（无效） 。 Console Log

感谢您的帮助/指导/建议