SVG alpha滤镜更改像素颜色

Question

我正在使用JS和<canvas>渲染等距场景。我正在使用此SVG滤镜，以便图块具有清晰的像素边缘：

<svg width="0" height="0" style="position:absolute;z-index:-1;">
  <defs>
    <filter id="remove-alpha" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncA type="linear" slope="255"></feFuncA>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>

这将强制所有半透明像素渲染为不透明。但这也会稍微改变受影响像素的颜色，因此它们与图块的其余部分明显不同。我才刚刚开始使用svg滤镜，有没有办法修改它以免改变像素的颜色？

Answer 1

某些抗锯齿方案使用源rgb值以外的rgb值（例如，用于字体渲染的子像素抗锯齿与灰度抗锯齿）。在这些方案中，当提高这些像素的不透明度时，最终可能会得到不同的颜色。

在纯SVG中，您将使用shape-rendering = crispEdges消除抗锯齿。但是Canvas没有这样的选择。

这里的一种解决方案-您可以尝试消除它们，而不是提高抗锯齿像素的不透明度，所以只能保留（几乎）完全不透明的像素。您可以使用其他feComponentTransfer进行此操作。下方的此过滤器将每个低于.96的不透明度设置为0，并将高于0.99的每个不透明度设置为1。

class Foo : MonoBehaviour {
   public Button lastButton; 
   public Image []images;
}

[CustomEditor(typeof(Foo))]
class FooEditor : Editor {

    public override void OnInspectorGUI()
    {
        DrawDefaultInspector();

        Foo foo = (Foo)target;
        if(GUILayout.Button("Bind last Button and all Images")) {
           /* how to bind programatically last foo.GetComponentsInChildren<Button>(); 
              to foo.gameObject.scene's 
                 foo.gameObject.GetComponent<Foo>().lastButton 
              in edit mode's property window 
                 (without have to drag on the editor)?
           */
           /* and how to bind programatically all foo.GetComponentsInChildren<Image>(); 
              to foo.gameObject.scene's 
                 foo.gameObject.GetComponent<Foo>().images 
              in edit mode's property window 
                 (without have to drag all one by one)?
           */
        }
    }
}