如何解决如何允许用户为画布2D中输入的数据选择颜色
我有用于生成条形图的代码,用户可以在其中选择条形图的值。目前,这些条的颜色已经过硬编码,可以在红色和蓝色之间交替显示。我想要帮助的是如何让用户在设置值时选择每个条的颜色。任何建议将不胜感激。
这是我到目前为止所拥有的;
const fetchPlaylist = (playlistId) => {
fetch(`https://api.spotify.com/v1/playlists/${playlistId}?fields=external_urls%2C%20name%2C%20tracks(items(track(name%2Chref%2Cduration_ms%2C%20artists(name))))%2Ctotal&limit=10`,requestPlaylist)
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
setTracks(result.tracks);
// setItems(result.items);
setUrl(result.external_urls);
setTotal(result.total);
setName(result.name);
},// Error handling
(error) => {
setIsLoaded(true);
setError(error);
}
)
}
解决方法
可能不会完全符合您的要求,但是如果您想自己做,则可以使用范围输入
您需要做的就是添加一个eventListener(onchange)并获取颜色输入字段的值,以将其存储在变量中(或将其传递给函数),然后使用此变量设置ctx.fillStyle
favcolor.onchange=(e)=>{
mycolor=e.target.value;
}
var barVals = [];
let mycolor = "rgb(200,200,200)";
function draw() {
var ctx = canvas.getContext("2d");
// calculate highest bar value (used to scale the rest)
var highest = 0;
for (var b = 0; b < barVals.length; b++) {
if (barVals[b] > highest)
highest = barVals[b];
}
// we have 8 horizontal lines so calculate an appropriate scale
var lineSpacing = 1;
var highestLine = 7 * lineSpacing;
while (highestLine < highest) {
lineSpacing *= 10;
highestLine = 7 * lineSpacing;
}
// grey background
ctx.fillStyle = "rgb(200,200)";
ctx.fillRect(0,600,450);
// draw and (if we have any data to scale from) label horizontal lines
var lineNum = 0;
ctx.fillStyle = "white";
ctx.font = "16px sans-serif";
for (y = 0; y <= 350; y += 50) {
// line
ctx.beginPath();
ctx.moveTo(50,y + 50);
ctx.lineTo(550,y + 50);
ctx.stroke();
// label (the 6 is an offset to centre the text vertically on the line)
if (barVals.length > 0) {
ctx.fillText(lineSpacing * lineNum,10,400 - y + 6);
lineNum++;
}
}
// draw boxes (widths based on how many we have)
var barWidth = 500 / barVals.length;
var halfBarWidth = barWidth / 2;
for (b = 0; b < barVals.length; b++) {
// calculate size of box and draw it
var x = 60 + b * barWidth;
var hgt = (barVals[b] / highestLine) * 350; // as fraction of highest line
ctx.fillStyle = mycolor
ctx.fillRect(x,400 - hgt,barWidth,hgt);
// calculate position of text and draw it
ctx.fillStyle = "white";
var metrics = ctx.measureText(barVals[b]);
var halfTextWidth = metrics.width / 2;
x = 60 + halfBarWidth + (b * barWidth) - halfTextWidth;
ctx.fillText(barVals[b],x,420 - hgt);
}
}
function addBar() {
var textBoxObj = document.getElementById("barVal");
barVals.push(parseInt(textBoxObj.value)); // add new value to end of array. As an integer not a string!!
draw(); // redraw
textBoxObj.value = 0;
}
function removeBar() {
var textBoxObj = document.getElementById("removeBarVal");
barVals.splice(parseInt(textBoxObj.value),1); // choose which object to remove from the array by specifying the index
draw(); // redraw
}
function editBar() {
var textBoxObj = document.getElementById("editBarVal");
barVals.replace(parseInt(textBoxObj.value),1);
draw(); // redraw
}
favcolor.onchange=(e)=>{
mycolor=e.target.value;
}
<body onload="draw()";
<center>
<canvas id="canvas" width="600" height="450"></canvas>
<form>
<br>
<input type=button value='Add Bar' onclick='addBar();'> <input id='barVal' value=0>
<input type="color" id="favcolor" name="favcolor" value="#ff0000"><input type=button value="Submit" onclick="addBar();">
<input type=button value='Remove Bar' onclick='removeBar();'> <input id='removeBarVal' value=0>
<input type=button value='Edit Bar' onclick='editBar();'> <input id='editBarVal' value=0>
</form>
</center>
在其他情况下,您可以使用javascript扩展程序来帮助您选择hsl或rgb颜色
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。