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

Question

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

example of running dialog

Пример 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();
    }

}

java swt eclipse-rcp alpha-transparency

6

Link19 23 Окт 2018 в 16:25

Answer 1

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

В основном:

мы создаем изображение src и с помощью gc заливаем его прозрачным цветом
рисуем овалы сплошным цветом
мы получаем результирующие данные изображения: теперь массив пиксельных данных изображения (imageData.data) также будет содержать альфа-значения, в то время как массив альфа-данных изображения (imageData.alphaData) будет {{ X2 } }
мы вручную исправляем imageData.alphaData, извлекая альфа-значения в правильных позициях из imageData.data; в этой части предполагается, что мы работаем с 32-битной глубиной цвета; иначе не пойдет
теперь, когда alphaData из imageData исправлено, мы создаем изображение processedImage с ним
с 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();

}

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

swt transpaency

3

Loris Securo 25 Окт 2018 в 22:02

Answer 2

Вы можете использовать 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();
}

И результат:

swt transparency

3

Loris Securo 26 Окт 2018 в 20:28

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

2 ответа

Похожие вопросы

Новые вопросы

java