为绘制笔画设置混合模式?
Posted
技术标签:
【中文标题】为绘制笔画设置混合模式?【英文标题】:Set blendmode for drawing strokes? 【发布时间】:2011-02-08 22:52:33 【问题描述】:我看了一点,认为我的问题的答案是“不”,但这里是:
使用 javascript 和 canvas 标签,我可以用stroke()
绘制漂亮的 alpha 混合线条。
这很有趣,但我想更进一步,为笔画设置混合模式。 例如,它看起来像是在使用经典的 src * (alpha) + dst * (1 - alpha), 我想要像 src + dst 这样的东西,以获得添加剂混合。
此页面:http://www.andersriggelsen.dk/OpenGL 似乎正在逐像素混合, 我真的很想避免。
【问题讨论】:
【参考方案1】:html5 Canvas 上下文本机支持的唯一“混合模式”是Global Composite Operations:
source-atop
source-in
source-out
source-over
destination-atop
destination-in
destination-out
destination-over
lighter
darker
xor
copy
请参阅this link,了解这些模式的出色动画交互示例。但是,您想要的添加/屏幕模式不在其中。
如果此功能对您很重要,我已编写 free context-blender library 以使用 Photoshop 风格的混合模式将两个画布(或其区域)混合在一起。正如您所说,它的内部(必然)执行逐像素操作。它没有原生合成模式那么快,但也不慢。它仍然允许您在一个(通常是屏幕外)画布上执行原生笔触和填充操作,然后将屏幕外画布合成到另一个画布上。
是的,上下文混合器支持“屏幕”和“添加”混合模式。 :)
【讨论】:
你是对的 - 提供的操作并没有真正给出“添加”,尽管我可能会调查“Lighter”,看看它是否足够接近我所追求的。 .. 甜的 !很近 !我也会看看你的搅拌机库。这可能是两者的结合可以同时获得速度和足够的准确性供我使用。再次感谢。 令人难以置信的是画布没有添加混合模式。所有混合模式中最简单的实现,拥有如此重要! “打火机”是附加的。这只是一个非常糟糕的名字。以上是关于为绘制笔画设置混合模式?的主要内容,如果未能解决你的问题,请参考以下文章
在 draw() 循环中重新使用 currentDrawable.texture 时的 MTKView 混合问题