我正在为一个大学项目创建一个绘图应用程序，当我创建了该应用程序的html并使用p5.js网站中的文档时，每当我尝试运行它时，我都会在控制台中收到未定义的错误： “未捕获的引用错误：createColorPicker 未定义”
通常，错误发生在我调用 createColorPicker() 函数的行上，在本例中，错误发生在我的草图文件的第 25 行上。我做错了什么？我似乎无法理解为什么会收到未定义的错误，我的 html 中有所有 p5 库。请看下面的代码：
索引文件：
<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.min.js 文件找到了解决方案。
项目附加的文件非常旧，似乎不包含与此功能相关的功能。