使用p5.js开发绘图应用时遇createColorPicker未定义错误求助

问题描述 #

开发大学项目绘图应用时，参照p5.js官方文档使用createColorPicker()函数，已在HTML中引入p5相关库，但运行时控制台报错：

Uncaught ReferenceError: createColorPicker is not defined
错误出现在sketch.js文件第25行。

项目代码 #

index.html

<html>
  <head>
    <script src="lib/p5.min.js"></script>
    <script src="lib/p5.dom.js"></script>

    <script src="sketch.js"></script>

    <!-- add extra scripts below -->
    <script src="toolbox.js"></script>
    <script src="colourPalette.js"></script>
    <script src="helperFunctions.js"></script>

    <script src="freehandTool.js"></script>
    <script src="lineToTool.js"></script>
    <script src="sprayCanTool.js"></script>
    <script src="mirrorDrawTool.js"></script>
    <script src="circleTool.js"></script>
    <script src="stampTool.js"></script>
    <script src="eraserTool.js"></script>
    <script src="editableShapes.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="box header">My Drawing App

        <button id="clearButton">Clear</button>
        <button id="saveImageButton">Save Image</button>
      </div>
      <div class="box" id="sidebar"></div>
      <div id="content"></div>
      <div class="box colourPalette"></div>
      <div class="box colorPicker"><p>Color Picker</p></div>
      <div class="box options" id="option1"></div>
      <div class="box options2" id="optionsSize"></div>
      </div>
  </body>
</html>

sketch.js

//global variables that will store the toolbox colour palette
//amnd the helper functions
var toolbox = null;
var colourP = null;
var helpers = null;
var circleTool = null;
var circleImg;
var stampTool;
var colorPicker;
//needed to control the fill/unfill button of circleTool
var circleButtonState; 
var c;

function preload() {
    circleImg = loadImage("./assets/amongus.png");
    stampTool = new StampTool();
    stampTool.image = loadImage("./assets/amongus.png");
}

function setup() {
    //create a canvas to fill the content div from index.html
    canvasContainer = select('#content');
    c = createCanvas(canvasContainer.size().width, canvasContainer.size().height);
    c.parent("content");
    colorPicker = createColorPicker('deeppink');
    colorPicker.parent('colorPicker');
    //create helper functions and the colour palette
    helpers = new HelperFunctions();
    colourP = new ColourPalette();
    circleTool = new CircleTool();
    circleButtonState = false;
    //create a toolbox for storing the tools
    toolbox = new Toolbox();

    //add the tools to the toolbox.
    toolbox.addTool(new FreehandTool());
    toolbox.addTool(new LineToTool());
    toolbox.addTool(new SprayCanTool());
    toolbox.addTool(new mirrorDrawTool());
    toolbox.addTool(circleTool);
    toolbox.addTool(stampTool);
    toolbox.addTool(new EraserTool());
    toolbox.addTool(new EditableShapes());
    background(255);

}

function draw() {
    //call the draw function from the selected tool.
    //hasOwnProperty is a javascript function that tests
    //if an object contains a particular method or property
    //if there isn't a draw method the app will alert the user
    if (toolbox.selectedTool.hasOwnProperty("draw")) {
        toolbox.selectedTool.draw();
    } else {
        alert("it doesn't look like your tool has a draw method!");
    }   
    
}

问题排查与解决方法 #

• 检查p5.dom.js的版本与引入顺序
  createColorPicker()是p5.dom库提供的API，必须保证p5.min.js先于p5.dom.js引入，且两者版本完全一致。版本不匹配会导致API无法被正确识别，前往p5.js官网下载同版本的核心库和dom库，替换项目lib文件夹中的文件。

• 验证p5.dom.js文件路径有效性
  确认src="lib/p5.dom.js"的路径正确，文件确实存在于项目的lib目录下。打开浏览器开发者工具的"网络"标签，刷新页面后查看该文件的加载状态：如果显示404，说明路径错误，需修正路径或移动文件到对应目录。

• 排查自定义工具类的代码问题
  检查所有自定义工具文件（如toolbox.js、colourPalette.js等），确保没有在p5生命周期函数（preload()/setup()/draw()）之外调用p5的DOM相关API。如果工具类在初始化时就调用了p5 API，会因为p5.dom库还未加载完成而报错。

• 强制清除浏览器缓存
  浏览器缓存可能导致旧版本的js文件未被更新，按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存后重新加载项目。

内容的提问来源于stack exchange，提问作者AlexSt