从 vue 文件更改 p5 实例内的变量值

Question

问题陈述：如何从 Nombres.vue 文件更改 dessin.js 中 myText 的值？

我正在尝试在 Quasar 项目中使用 p5.js 并且我有从 vues 与我的草图交互时遇到麻烦。

遵循此处解释的实例模式技术，我'到目前为止，我的草图已成功显示在我的页面中。

我的页面是 Nombre.vue （它被插入到 MainLayout.vue 父页面中...），其内容是：

<template>
  <q-page padding class="bg-primary">
    <div class="row items-center justify-center">
      <div id="p5Canvas" container class="col justify-center"></div>
    </div>
  </q-page>
</template>

<script>
const P5 = require("p5");
const dessin = require("../js/dessin.js");
export default {
  name: "Nombres",
  mounted() {
    // NOTE: Use p5 as an instance mode
    new P5(dessin.main);
  },
};
</script>

在 dessin.js 文件中，我在 main 函数中拥有草图的所有代码：

let p5;
let myText = "foo"
export function main(_p5) {
  p5 = _p5;
  let fontFixed,
    tailleFonte = 120,
    couleurFond = 0,
    xText = 0;
  p5.preload = () => {
    fontFixed = p5.loadFont("/fonts/manti_fixed.otf");
  };
  p5.setup = () => {
    let canvas = p5.createCanvas(p5.windowWidth * 0.9, 500);
    canvas.parent("p5Canvas");
    // Set text characteristics
    p5.textFont(fontFixed);
    p5.textSize(tailleFonte);
    p5.textAlign(p5.CENTER, p5.CENTER);
    xText = (p5.windowWidth * 0.9) / 2;
  };
  p5.draw = () => {
    p5.background(couleurFond);
    p5.fill(250);
    p5.text(myText, xText, 250);
  };
}

Answer 1

您可以将 vue 变量作为函数的参数。我已经通过导入 js 文件解决了这个问题，而不需要它们。

像这样：

import P5 from 'p5';
import { fromCenter } from '../scripts/algorithms/fromCenter';
import { circlePacking } from '../scripts/algorithms/circlePacking';
import { mazeGenerator } from '../scripts/algorithms/mazeGenerator';
import { colorDistance } from '../scripts/algorithms/colorDistance';
import { shrinkingCircles } from '../scripts/algorithms/shrinkingCircles';
import { randomOpacity } from '../scripts/algorithms/randomOpacity';

export default {
    name: 'Game',
    data() {
        return {
            averageColor: {},
            method: 5,
            image: 'src/components/icons/koe.jpg',

        };

    },
    mounted() {
        let p5;
        let game = document.getElementById('game');
        switch (this.method) {
            case 0:
                p5 = new P5(fromCenter(game, this.image));
                break;
            case 1:
                p5 = new P5(circlePacking(game, this.image));
                break;
            case 2:
                p5 = new P5(mazeGenerator(game, this.image));
                break;
            case 3:
                p5 = new P5(colorDistance(game, this.image));
                break;
            case 4:
                p5 = new P5(shrinkingCircles(game, this.image));
                break;
            case 5:
                p5 = new P5(randomOpacity(game, this.image));
                break;

然后在你的 dessin.js 文件中你可以得到这些变量，比如：

export function randomOpacity(element, imageToShow) {
return function (p) {
    const p5Canvas = element;

希望这有帮助。