我正在尝试在已就位图像的顶部绘制一个组合形状的透明 mask 。我已经通过本文中包含的对话代码提供了我正在尝试的技术示例。这是它生成的屏幕截图。
示例 1(左上)突出显示了我要解决的问题,我希望有 2 个圆圈或任何相交的形状/弧线,都以相同的 alpha 级别绘制在一起,即没有由绘制引起的复合不透明彼此的顶部。
示例 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();
}
}
最佳答案
我能够使用 Sean Bright 描述的方法得到想要的结果这里:https://stackoverflow.com/a/15685473/6245535 .
基本上:
- 我们创建一个图像
src
并使用gc
我们用透明颜色填充它 - 我们用纯色画椭圆
- 我们得到了生成的图像数据:现在,图像的像素数据数组 (
imageData.data
) 也将包含 alpha 值,而图像的 alpha 数据数组 (imageData.alphaData
) 为null
- 我们通过从
imageData.data
中提取正确位置的 alpha 值来手动修复imageData.alphaData
;这部分假设我们正在使用 32 位颜色深度;否则它不会工作 - 现在
imageData
的alphaData
是固定的,我们用它创建一个图像processedImage
- 通过
gc
,我们最终绘制了部分透明的processedImage
这是代码(这是 Sean 的代码,有一些变化):
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();
}
结果如下:
关于java - 使用 SWT Graphics 在另一个图像上绘制动态透明图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52950289/