问题描述
我想知道在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
感谢您的帮助/指导/建议
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）