时间戳

首页 > 解决方案 > 如何使 p5 中的滑块与 webpack 一起使用？

javascript - 如何使 p5 中的滑块与 webpack 一起使用？

问题描述

我正在使用 p5.js 库和 webpack，它工作得很好。但是，当我尝试createSlider从 p5.dom 导入时，它失败了

import p5 from "./p5";
import * as dom from './addons/p5.dom'
import {createSlider} from './addons/p5.dom'


const s = (p) => {
    p.setup = function () {
        p.createCanvas(200,200);
        slider = createSlider(0, 360, 60, 40);
        slider.position(10, 10);
        slider.style('width', '80px');
    };

};

let myp5 = new p5(s, 'p5cont');

我试过dom.createSlider()没有成功。在这两种情况下，控制台都会报告createSlider is not a function. 怎么了？

标签： javascriptp5.js

解决方案

截至最新的 p5.js（撰写本文时为 v1.1.9），p5.dom 是主 p5.js 库的一部分。也就是说，你不需要单独导入 p5.dom 来使用createSlider().

以下代码使 p5 的滑块与 webpack 一起工作。

import p5 from "./p5.min.js"

let sketch = function(p){
    p.setup=function(){
        p.createCanvas(500,500)
        p.background('blue')
        p.createSlider(0,100)
    }
}

let myp5 = new p5(sketch)

推荐阅读