logo标签列表

每像素颜色混合

java
4

我正在尝试理解图形学。现在我遇到了颜色混合的问题。我尝试使用一些基本算法将RGB颜色合并。现在我想要像现实生活中那样合并它们，例如黄色+蓝色=绿色。我有一个类似这样的方法。

package com.boxonix.light.utils;

public class Utils {

   public static int rgbToHex(int r, int g, int b) {
      return (1048576 * r) + (255 * g) + b;
   }

   public static int blendPixels(int r, int g, int b, double alpha, int bgPixel){   
      return 0;
   }

   public static int getRed(int color) {
      int red = Math.floorDiv(color, 1048576);
      return red;
   }

   public static int getGreen(int color) {
      int green = Math.floorDiv(color % 65536, 256);
      return green;
   }

   public static int getBlue(int color) {
      int blue = Math.floorDiv(color % 1048576, 256);
      return blue;
   }
}

r、g、b是代表覆盖背景像素(bgPix)的颜色(色素)，而alpha则表示透明度(0.0 - 1.0)。我已经能够将bgPix转换为r1、g1、b1。现在我需要将它们混合在一起，请帮忙！:D

1
"混合"两种颜色实际上意味着对它们进行加权平均。这是错误的。平均会产生糟糕、非常丑陋的结果。如果你想像现实一样混合两种颜色，使用公式sqrt(ColA^2 + ColB^2)/2。 - Guillaume F.
2
迷你物理学为您呈现：https://www.youtube.com/watch?v=LKnqECcg6Gw - Guillaume F.
1
这让我注意到上述公式中的一个错误，正确的公式是 sqrt((ColA^2 + ColB^2)/2)，正如视频中所示。 - Guillaume F.
1
sqrt(((AlphaA*ColA)^2 + (AlphaB*ColB)^2)/(AlphaA + AlphaB)) - Guillaume F.
2
一个小提示：这些计算看起来很奇怪。你不应该使用这些“神奇”的常量。十六进制代码具有“可视化”显示哪些字节被剪切的好属性。或者，您可以将相关部分移入相关字节中。例如，要从RGB值中获取绿色分量（作为0...255中的值），可以使用int g = (rgb >> 8) & 0xFF。 - Marco13
显示剩余5条评论
2个回答
0

看起来你正在尝试将前景颜色与背景颜色进行alpha混合。令人高兴的是，这很简单：

alpha * foregroundColor + (1 - alpha) * backgroundColor

这个想法是只有部分颜色来自前景颜色，另外的 (1 - alpha) 来自背景。如果你从直觉上考虑它，就能看出来：如果 alpha 是 0，那么所有的颜色都来自于背景；如果 alpha 是 1，那么所有颜色都来自于前景。

使用您上面定义的方法的示例代码:

public static int blendPixels(int r, int g, int b, double alpha, int bgPixel) {   
   int blendedRed = (int)Math.round(alpha * r + (1.0 - alpha) * getRed(bgPixel));
   int blendedGreen = (int)Math.round(alpha * g + (1.0 - alpha) * getGreen(bgPixel));
   int blendedBlue = (int)Math.round(alpha * b + (1.0 - alpha) * getBlue(bgPixel));
   return rgbToHex(blendedRed, blendedGreen, blendedBlue);
}

希望这能有所帮助！
2
很确定你必须分别处理每个通道。我在评论中给出的例子是0.75黑色+0.25白色...你的代码写成了0.25*0xFFFFFF，这将会是0x400000（相当暗的红色）或者0x3FFFFF（电气蓝-青色），具体取决于你如何四舍五入。不是灰色。 - dcsohl
@dcsohl 对不起，你说得完全正确。我回答得有点太快了。我刚刚已经相应地编辑了我的答案。 - Eric Galluzzo
0

虽然不是答案，但这里有一个根据公式每像素进行颜色混合的快速实现：

alpha * foregroundColor + (1 - alpha) * backgroundColor

这个公式似乎是错误的——看一下截图——请随意使用该代码进行测试。

截图：

pixel blending done wrong

代码：

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JSlider;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.util.Locale;
import java.util.Random;

public class Program {
    static JFrame mainFrame;
    static JPanel view;
    static JLabel fgLabel;
    static JSlider fgTrack;
    static JLabel alphaLabel;
    static JSlider alphaTrack;
    static JLabel bgLabel;
    static JSlider bgTrack;

    static int fg;
    static float alpha;
    static int blend;
    static int bg;

    public static void main(String[] args) {
        //setup application
        mainFrame = new JFrame() {{
            setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            setContentPane(new JPanel() {{
                setLayout(new BorderLayout());
                setSize(640, 480);
                setPreferredSize(getSize());
                add(new JPanel() {{
                    setLayout(new FlowLayout());
                    add(fgLabel = new JLabel());
                    add(fgTrack = new JSlider(0, 100) {{
                        setOrientation(JSlider.VERTICAL);
                        setMajorTickSpacing(25);
                        setMinorTickSpacing(5);
                        setPaintTrack(true);
                        setPaintTicks(true);
                        addChangeListener(e -> {
                            fg = Color.getHSBColor(getValue() / 100f, 1f, 1f).getRGB();
                            fgLabel.setText("fg=" + rgbToString(fg));
                            view.repaint();
                        });
                    }});
                    add(alphaLabel = new JLabel());
                    add(alphaTrack = new JSlider(0, 100) {{
                        setOrientation(JSlider.VERTICAL);
                        setMajorTickSpacing(25);
                        setMinorTickSpacing(5);
                        setPaintTrack(true);
                        setPaintTicks(true);
                        addChangeListener(e -> {
                            alpha = getValue() / 100f;
                            blend = blendPixels(fg, alpha, bg);
                            alphaLabel.setText("<html>alpha=" + alpha+"<br>blend=" + rgbToString(blend));
                            view.repaint();
                        });
                    }});
                    add(bgLabel = new JLabel());
                    add(bgTrack = new JSlider(0, 100) {{
                        setOrientation(JSlider.VERTICAL);
                        setMajorTickSpacing(25);
                        setMinorTickSpacing(5);
                        setPaintTrack(true);
                        setPaintTicks(true);
                        addChangeListener(e -> {
                            bg = Color.getHSBColor(getValue() / 100f, 1f, 1f).getRGB();
                            bgLabel.setText("bg=" + rgbToString(bg));
                            view.repaint();
                        });
                    }});
                }}, BorderLayout.NORTH);
                add(view = new JPanel() {
                    @Override
                    public void paintComponent(Graphics g) {
                        super.paintComponent(g);

                        Graphics2D g2 = (Graphics2D) g;
                        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

                        //"transparent" background
                        final int m = 8;
                        for (int r = 0, x = 0; x < getWidth(); r++, x += m) {
                            for (int c = 0, y = 0; y < getHeight(); c++, y += m) {
                                g2.setColor((r + c) % 2 == 0 ? Color.WHITE : Color.LIGHT_GRAY);
                                g2.fillRect(x, y, m, m);
                            }
                        }

                        //circles
                        final int d = Math.min(getWidth() / 2, getHeight());
                        g2.setColor(new Color(bg));
                        g2.fillOval(d, 0, d, d);
                        g2.setColor(new Color(blend));
                        g2.fillOval(d / 2, 0, d, d);
                        g2.setColor(new Color(fg));
                        g2.fillOval(0, 0, d, d);
                    }
                }, BorderLayout.CENTER);
            }});
        }};

        //randomize values
        Random rng = new Random();
        fgTrack.setValue(rng.nextInt(100));
        alphaTrack.setValue(rng.nextInt(100));
        bgTrack.setValue(rng.nextInt(100));

        //display
        mainFrame.pack();
        mainFrame.setLocationRelativeTo(null);
        mainFrame.setVisible(true);
    }

    public static String rgbToString(int rgb) {
        return Integer.toHexString(rgb).toUpperCase(Locale.ROOT);
    }

    public static int rgbToHex(int r, int g, int b) {
        return (1 << 16) * r
                + (1 << 8) * g
                + (1 << 0) * b;
    }

    public static int blendPixels(int fgPixel, float alpha, int bgPixel) {
        return rgbToHex(
                blendPixelComponent(getRed(fgPixel), alpha, getRed(bgPixel)),
                blendPixelComponent(getGreen(fgPixel), alpha, getGreen(bgPixel)),
                blendPixelComponent(getBlue(fgPixel), alpha, getBlue(bgPixel))
        );
    }

    public static int blendPixelComponent(int fgComp, float alpha, int bgComp) {
        final float beta = 1 - alpha;
        return Math.round(alpha * fgComp + beta * bgComp);
    }

    public static int getRed(int color) {
        return (color >> 16) & 0xFF;
    }

    public static int getGreen(int color) {
        return (color >> 8) & 0xFF;
    }

    public static int getBlue(int color) {
        return (color >> 0) & 0xFF;
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接