Рисование динамического прозрачного изображения поверх другого изображения с использованием SWT Graphics

Question

Я пытаюсь нарисовать прозрачную маску комбинированных фигур поверх уже на месте изображения.Я привел пример техник, которые я пробую, с помощью диалогового кода, включенного в этот пост.Вот скриншот того, что он производит.

Пример 1 (вверху слева) выделяет проблему, которую я хочу решить, я хочу иметь 2 круга или любые пересекающиеся фигуры / дуги, всерисовать вместе с тем же уровнем альфа, то есть без непрозрачности смешивания, вызванной рисованием поверх друг друга.

Пример 3 (внизу слева) - моя попытка решить проблему, создав отдельное изображение с теломформирует изображение, а затем делает все изображение прозрачным, и я думаю, что при использовании этого метода изображение становится белым, так как белый цвет рассматривается как прозрачный цвет, поэтому край круга смешивается с белым, поэтому при его рисовании на немвызывает «ореол» вокруг фигуры.

Пример 2 (вверху слева) еще больше подчеркивает эту проблему, рисуя круги на изображении как прозрачные, поэтому вы можете увидеть более розовый цвет, вызванный выделением.

Мой вопрос: без знания цвета фона и без отключения сглаживания, как мне добиться эффекта, к которому я стремлюсь?Есть ли способ, потому что все мои исследования не работают?Может быть, мне нужно использовать другое решение для рисования изображений и перенести обратно на SWT?Я знаю, что он способен рисовать прозрачные изображения, если загружен непосредственно из файла, поэтому я знаю, что он может содержать данные такого рода, но как мне его создать?

import org.eclipse.jface.dialogs.Dialog;
import org.eclipse.swt.SWT;

import org.eclipse.swt.events.PaintEvent;
import org.eclipse.swt.events.PaintListener;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.graphics.GC;
import org.eclipse.swt.graphics.Image;
import org.eclipse.swt.graphics.ImageData;
import org.eclipse.swt.graphics.Point;
import org.eclipse.swt.graphics.RGB;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Canvas;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Control;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

public class FMLDialog extends Dialog
{   
    private Color red;
    private Color blue;

    public FMLDialog(Shell parentShell)
    {
        super(parentShell);
    }



    @Override
    protected void configureShell(Shell shell)
    {
        red = new Color(shell.getDisplay(), new RGB(255,0,0));
        blue = new Color(shell.getDisplay(), new RGB(0,100,255));
        super.configureShell(shell);
        shell.setSize(new Point(450,550));
        shell.setText("FML");
    }   

    @Override
    public Control createDialogArea(final Composite comp)
    {

        Composite content = (Composite) super.createDialogArea(comp);
        Composite parent = new Composite(content, SWT.NONE);        

        GridLayout gridLayout2 = new GridLayout(1, false);
        parent.setLayout(gridLayout2);
        parent.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));           

        final Canvas c = new Canvas(parent, SWT.BORDER);
        c.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));
        c.addPaintListener(new PaintListener() {

            @Override
            public void paintControl(PaintEvent e) {
                e.gc.setAntialias(SWT.ON);
                drawFirstLayer(e.gc, 0, 0);
                drawFirstLayer(e.gc, 210, 0);
                drawFirstLayer(e.gc, 210, 210);
                drawFirstLayer(e.gc, 0, 210);

                drawSecondLayerTake1(e.gc, 0, 0);
                drawSecondLayerTake2(e.gc, 210, 0);
                drawSecondLayerTake3(e.gc, 0, 210);
                drawSecondLayerTake4(e.gc, 210, 210); 
            }
        });

        return content;     

    }

    private void drawFirstLayer(GC gc, int x, int y) {
        gc.setBackground(blue);
        gc.fillOval(x, y, 200 , 200);
    }

    private void drawSecondLayerTake1(GC gc, int x, int y) {
        // Simply draw 2 transparent circles
        // Issue here is the overlap between circles where the Alpha layers up
        gc.setAlpha(100);
        gc.setBackground(red);
        gc.fillOval(x + 70, y + 70, 60 , 60);
        gc.fillOval(x + 100, y + 100, 60 , 60);
        gc.setAlpha(255);
    }

    private void drawSecondLayerTake2(GC gc, int x, int y) {
        // Create an image with 2 transparent circles
        // Issue here is the overlap between circles where the Alpha layers up from the first
        // PLUS becasue my transparent colour is fixed to white the alpa on the circles is blended in to the white
        final Image src = new Image(null, 300, 300);
        final ImageData imageData = src.getImageData();
        imageData.transparentPixel = imageData.getPixel(0, 0);
        src.dispose();
        final Image processedImage = new Image(Display.getCurrent(), imageData);
        final GC imageGC = new GC(processedImage);      
        imageGC.setAntialias(SWT.ON);
        imageGC.setAlpha(100);
        imageGC.setBackground(red);
        imageGC.fillOval(70, 70, 60 , 60);
        imageGC.fillOval(100, 100, 60 , 60);
        imageGC.dispose();

        gc.drawImage(processedImage, x + 0, y + 0);

    }

    private void drawSecondLayerTake3(GC gc, int x, int y) {
        // Create an image with 2 solid circles, then draw that image on to the canvas with Alpha values.
        // Overlap issue goes away because the whole image is being made transparent together HOWEVER
        // there is a Halo effect around the edge of the red where the original circles were antialiased to blend into the "white"
        // background.

        final Image src = new Image(null, 300, 300);
        final ImageData imageData = src.getImageData();
        imageData.transparentPixel = imageData.getPixel(0, 0);
        src.dispose();
        final Image processedImage = new Image(Display.getCurrent(), imageData);
        final GC imageGC = new GC(processedImage);      
        imageGC.setAntialias(SWT.ON);
        imageGC.setBackground(red);
        imageGC.fillOval(70, 70, 60 , 60);
        imageGC.fillOval(100, 100, 60 , 60);
        imageGC.dispose();

        gc.setAlpha(100);
        gc.drawImage(processedImage, x + 0, y + 0);

    }

    private void drawSecondLayerTake4(GC gc, int x, int y) {
        // I need this one to draw like take 3 but without the white "halo" effect on the edge
        // How?!
    }

    public static void main(String[] args) {
        Display d = new Display();
        Shell s = new Shell();

        FMLDialog fml = new FMLDialog(s);
        fml.open();
    }

}

Answer 1

Вы можете использовать Path, чтобы объединить 2 круга в один объект и затем залить его прозрачным цветом.

Это гораздо более простое решение, чем мой предыдущий ответ и эффект ореола отсутствует.

Код:

private void drawSecondLayerTake4(GC gc, int x, int y) {

    final Path path = new Path(Display.getCurrent());
    path.addArc(x + 70, y + 70, 60, 60, 0, 360);
    path.addArc(x + 100, y + 100, 60, 60, 0, 360);

    gc.setAlpha(100);
    gc.setBackground(red);

    // needed to avoid holes in the path
    gc.setFillRule(SWT.FILL_WINDING);

    gc.fillPath(path);

    path.dispose();
}

И результат:

Answer 2

Мне удалось получить желаемый результат, используя метод, описанный Шон Брайт здесь: https://stackoverflow.com/a/15685473/6245535.

В основном:

1. мы создаем изображениеsrc и gc заполняем его прозрачным цветом
2. рисуем овалы сплошным цветом
3. получаем данные результирующего изображения: теперь массив данных пикселей изображения (imageData.data) также будет содержать альфа-значения, в то время как массив альфа-данных изображения (imageData.alphaData) равен null
4. , мы вручную фиксируем imageData.alphaData, извлекая альфа-значения справапозиции от imageData.data;эта часть предполагает, что мы работаем с глубиной цвета 32 бита;иначе он не будет работать
5. теперь, когда alphaData из imageData зафиксирован, мы создаем изображение processedImage с ним
6. с gc мы наконец рисуем processedImageс частичной прозрачностью

Вот код (это код Шона с некоторыми изменениями):

private void drawSecondLayerTake4(GC gc, int x, int y) {

    final int width = 300;
    final int height = 300;

    final Image src = new Image(null, width, height);

    final GC imageGC = new GC(src);

    imageGC.setAntialias(SWT.ON);

    // This sets the alpha on the entire canvas to transparent
    imageGC.setAlpha(0);
    imageGC.fillRectangle(0, 0, width, height);

    // Reset our alpha and draw the ovals
    imageGC.setAlpha(255);
    imageGC.setBackground(red);
    imageGC.fillOval(70, 70, 60, 60);
    imageGC.fillOval(100, 100, 60, 60);

    // We're done with the GC, so dispose of it
    imageGC.dispose();

    final ImageData imageData = src.getImageData();
    imageData.alphaData = new byte[width * height];

    // This is the hacky bit that is making assumptions about
    // the underlying ImageData.  In my case it is 32 bit data
    // so every 4th byte in the data array is the alpha for that
    // pixel...
    for (int idx = 0; idx < (width * height); idx++) {
        final int coord = (idx * 4) + 3;
        imageData.alphaData[idx] = imageData.data[coord];
    }

    // Now that we've set the alphaData, we can create our
    // final image
    final Image processedImage = new Image(Display.getCurrent(), imageData);

    gc.setAlpha(100);
    gc.drawImage(processedImage, x + 0, y + 0);

    // And get rid of the canvas
    src.dispose();

}

И вот результат: