我真的很努力去理解 javascript,我受到了 Jay Weekes 的这段代码的启发:查看源代码:http://jayweeks.com/sketchy-structures-html5-canvas/#/ <|:{
我正在尝试了解如何让用户选择 strokeStyle 颜色。 我不太清楚该怎么做。我试过了,不透明度停止工作,颜色变黑了……
我使用了一个带有 id 和函数的按钮。不工作。我决定前来寻求帮助。
我不知道我是否表达得很好。如果我不是,请告诉我。
非常感谢! :)
最佳答案
对于这个问题的一个可能的解决方案,我有一个粗略的开始。结果是 here at this jsFiddle .
我的想法是首先添加一个简单的 UI 元素来选择颜色。我能想到的最简单的事情就是链接列表。
<div id="sketch-color">
<ul class="colorList">
<li><a href="#" data-color="black">Black</a></li>
<li><a href="#" data-color="red">Red</a></li>
<li><a href="#" data-color="green">Green</a></li>
<li><a href="#" data-color="blue">Blue</a></li>
</ul>
</div>
您会注意到我开始考虑使用 HTML5 数据,但没有按照我应该的方式进行。我编辑了 CSS 文件以使链接更加明显:
#sketch-color li:first-of-type a { color:black; }
...
然后,按照原来的逻辑,我在基本的 UI readout 中添加了一行:
<li>pen color: <span id="current-color"></span></li>
从那时起,它就只是 javascript 了。我在“当前”元素列表中添加了另一个变量并将其默认设置为“黑色”:
var currOpacity = document.getElementById( 'current-opacity' ),
currDensity = document.getElementById( 'current-density' ),
currCache = document.getElementById( 'current-cache' ),
currColor = document.getElementById( 'current-color' );
currCache.innerHTML = '0';
currColor.innerHTML = "Black";
然后我需要获取所有新链接,关闭它们的默认点击事件处理程序,并添加我自己的。我习惯了 jQuery,所以我可能没有以最有效的方式执行此操作。
// Color Events
var colorListItems = document.getElementById( 'sketch-color' ).getElementsByTagName('ul')[0].children;
var colorLinks = [];
for(var i = 0; i < colorListItems.length; i++)
{
colorLinks.push(colorListItems[i].children[0]);
}
for(var i = 0; i < colorLinks.length; i++)
{
colorLinks[i].removeEventListener("click");
colorLinks[i].addEventListener("click", onClickColorChange, false);
}
然后我定义了事件处理程序:
//event handlers
function onClickColorChange( e ) {
e.preventDefault();
currColor.innerHTML = e.target.innerHTML;
return false;
}
好的,那太好了。我可以更改 span
中的文本。不是很有趣。我需要破解 Jay 的绘图代码才能让它发挥作用。我注意到在调用 Point.connect()
函数之前不会发生设置颜色的决定,因此我更改了该函数中的关键线以调用新函数来设置线型:
if( totDist < maxDist*5 && drawDist < maxDist ){
ctx.strokeStyle = currentStrokeStyle();
ctx.line( this.x, this.y, p.x, p.y );
} else { break; }
然后定义了这个新函数:
function currentStrokeStyle() {
var curr_color = currColor.innerHTML;
var red = 0, green = 0, blue = 0;
switch(curr_color) {
case "Red": red = 255; break;
case "Green": green = 255; break;
case "Blue": blue = 255; break;
};
return 'rgba( ' + red + ',' + green + ',' + blue + ','+ uiOpacity.opacity +' )';
}
然后奇迹发生了。
我意识到这里有很大的改进空间。应该有一个 rgb slider 或类似的东西,我应该使用 HTML5 数据属性而不是关闭 innerHTML
。也就是说,我正在提交我开始工作的第一个版本。我邀请你 fork the jsfiddle并让它变得更好。
更新
我很抱歉没有说清楚如何通过这种安排添加新颜色。基本上,我们需要将新链接添加到 UI 中的颜色列表,然后将新案例添加到 currentStrokeStyle() 函数中的 switch 语句。因此,要添加橙色选项:
<div id="sketch-color">
<ul class="colorList">
<li><a href="#" data-color="black">Black</a></li>
<li><a href="#" data-color="red">Red</a></li>
<li><a href="#" data-color="green">Green</a></li>
<li><a href="#" data-color="blue">Blue</a></li>
<li><a href="#" data-color="orange">Orange</a></li>
</ul>
</div>
和:
function currentStrokeStyle() {
var curr_color = currColor.innerHTML;
var red = 0, green = 0, blue = 0;
switch(curr_color) {
case "Red": red = 255; break;
case "Green": green = 255; break;
case "Blue": blue = 255; break;
case "Orange": red = 255; green = 128; break;
};
return 'rgba( ' + red + ',' + green + ',' + blue + ','+ uiOpacity.opacity +' )';
}
如果您希望链接也显示为橙色,则需要再次更改 CSS:
#sketch-color li:nth-child(4) a { color:blue; }
#sketch-color li:nth-child(5) a { color:orange; }
现在应该可以了。同样,如果我使用 HTML5 数据属性将 rgb 值直接传递给 currentStrokeStyle()
,这将更容易更改,但我很懒,而且已经晚了。
并且添加了新颜色to the jsFiddle .
关于html5 Canvas 涂鸦改变颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15123193/