Declaración del problema : ¿Cómo puedo cambiar el valor de myText en dessin.js desde el archivo Nombres.vue ?
Estoy tratando de usar p5.js en un proyecto de Quasar y tengo problemas para interactuar desde vues con mi boceto.
Siguiendo la técnica del modo de instancia explicada aquí , hasta ahora he logrado que mi boceto se muestre en mi página.
Mi página es Nombre.vue (y está insertada en una página principal de MainLayout.vue ...) y su contenido es:
<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> En un archivo dessin.js , tengo todo el código para el boceto en una función 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); }; }Puede dar las variables vue como un parámetro para su función. Resolví esto importando los archivos js y no los requiero.
Como esto:
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;Luego, en su archivo dessin.js puede obtener esas variables como:
export function randomOpacity(element, imageToShow) { return function (p) { const p5Canvas = element;Espero que esto ayude.