SWT GC drawText auf halbtransparentem Image

[Fetzhai]

Hallo zusammen,

ich habe mehrere Labels deren Inhalt ein mit setImage gesetztes Bild ist.
Nun muss ich den Bildern noch eine weitere Information hinzufügen (eine 2 stellige Dezimalzahl).

Zuerst kam ich auf die Idee mit CLabel zu arbeiten. Da dort der Text aber neben dem Bild steht und ich nur begrenzt Platz habe, kam dies doch nicht in Frage.

Mein zweiter Ansatz war nun, die Zahl einfach mit GC auf das Bild zu schreiben:

				// Setze ToolTip auf Name des Items
				this.items.get(slot).setToolTipText(Main.DB.getItemName(id));
				// Image erzeugen
				Image img = getImage(id);
				GC gc = new GC(img);
				gc.setForeground(this.inventory.getDisplay().getSystemColor(SWT.COLOR_WHITE));
				gc.drawText(tag.getTag(new NBTSelector("Count")).getValue().toString(), 0, 0, true); // Anzahl der Items auf das Image schreiben
				gc.dispose();
				this.items.get(slot).setImage(img);

Das funktioniert soweit auch ganz gut, nur ist die Zahl nie komplett sichtbar, da meine Images alle teilweise transparent sind und drawText die Alphawerte nicht ändert, also auch ein großer Teil des Textes transparent bleibt.

Hat von euch jemand eine Idee, wie ich dieses Problem umgehen könnte?

Gruß Fetzhai

 

[Fetzhai]

Falls es wen interessiert:

Habe nun alle Bilder die kleiner als 25x25px waren mit folgendem Code auf die richtige Größe skaliert:

public static void resizeImageWithAlpha(String filename, int newWidth, int newHeight) {
		ImageData img = new ImageData("images/" + filename);
		int height = img.height;
		int width = img.width;
		
		if(height >= newHeight && width >= newWidth) {
			System.out.println(filename + " okay.");
			return;
		}
		
		ImageData newImg = new ImageData(newWidth, newHeight, img.depth, img.palette);
		
		for(int i=0; i<height; ++i) {
			int[] pixels = new int[width];
			byte[] alphas = new byte[width];
			
			img.getPixels(0, i, width, pixels, 0);
			newImg.setPixels(0, i, width, pixels, 0);
			
			img.getAlphas(0, i, width, alphas, 0);
			newImg.setAlphas(0, i, width, alphas, 0);
			
			// set the other pixels
			for(int j=width; j<newWidth; ++j) {
				newImg.setPixel(j, i, 0);
				newImg.setAlpha(j, i, 0);
			}
		}
		
		for(int i=height; i<newHeight; ++i) {
			for(int j=0; j<newWidth; ++j) {
				newImg.setPixel(j, i, 0);
				newImg.setAlpha(j, i, 0);
			}
		}
		
		ImageLoader imageSaver = new ImageLoader();
		imageSaver.data = new ImageData[]{newImg};
		imageSaver.save("images/" + filename, SWT.IMAGE_PNG);
	}

Und nehme nun setBackgroundImage und setText.

Gruß,
Fetzhai

 

[lumo]

kannst du mit dem alpha auch halbtransparent zeichnen (sodass der hintergrund der parent klasse noch sichtbar ist? oder warum arbeitest du mit transparent?)

ich hab bis jetzt einfach die transparentcolor auf Color(255,0,255) gesetzt und die sachen die transparent sein sollen mit dieser farbe bemalt... spart mir das durchforsten eines zweiten arrays... allerdings geht dann nur transparent oder nicht also ohne abstufungen... darum meine frage... gehts MIT abstufungen denn auch?

 

[Fetzhai]

Hallo lumo,

mit den alphas kannst du diese Halbtransparenz erreichen.
Mein Problem war dabei, dass ein BackgroundImage in SWT keine Transparenz unterstützt (zumindest nicht bei Labels).
Setzt man das Bild jedoch mit setImage als Inhalt des Labels, so funktioniert sowohl die komplette Transparenz, als auch die Abstufungen mit Hilfe von Alphawerten.

Daher Ja, es geht mit Abstufungen.

Gruß Fetzhai

 

[lumo]

Fetzhai, werde das gleich mal ausprobieren!

dein code zum 'skalieren'... der macht das bild zwar größer. aber er skaliert es doch nicht... er fügt nur nen rand hinzu oder seh ich da was falsch?

klappt wirklich, aber nicht wenn man damit eine shell zeichnen will - schade

 

[lumo]

kann SWT wirklich keine alpha kanäle aus png's mitladen? muss man da echt ein zweites bild mit alphakanal laden??

 

[Pascal.]

Hallo lumo,
habe mich nun mal angemeldet, um nicht dauernd als Gast schreiben zu müssen.

dein code zum 'skalieren'... der macht das bild zwar größer. aber er skaliert es doch nicht... er fügt nur nen rand hinzu oder seh ich da was falsch?

Das siehst du richtig und das war von mir auch so gewollt. In meinem speziellen Fall ist dies auch sinnvoll gewesen.

kann SWT wirklich keine alpha kanäle aus png's mitladen?

Tut es das bei dir nicht?
Meine PNGs haben alle Alpha Kanäle. Das war auch der Hauptgrund warum ich mit Alphas statt mit der Transparent Color gearbeitet habe.

Gruß Pascal

 

[lumo]

Doch tut es; beim zeichnen meiner controls hab ich fälschlicherweise keine transparenten sondern einen normalen weißen hintergrund erstellt... Darum ging's bei mir nicht Arr!

 

[lumo]

wird beim drawImage der alpha kanal nicht mit gesetzt??
bzw kann ich im alpha-kanal auch zeichnen, wenn ja, wie?

 

[Pascal.]

Habe gerade mal einen Test mit drawImage und einer PNG mit Alpha-Kanal gemacht:

	    final Image image = new Image(display, "rgba8.png");
	    final Rectangle rect = image.getBounds();
	    shell.addListener(SWT.Paint, new Listener() {
	      public void handleEvent(Event event) {
	        GC gc = event.gc;
	        gc.drawImage(image, 0, 0, rect.width, rect.height, 0, 0,
	            rect.width, rect.height);
	      }
	    });

Funktioniert super mit Transparenz.

bzw kann ich im alpha-kanal auch zeichnen, wenn ja, wie?

Wie meinst du das?

 

[lumo]

Ich meine ich erstelle mir ein transparentes Bild zeichne dann ein anderes Bild drauf, aber die Transparenz wird nicht mitgerechnet was natürlich das Resultat hat, dass man nichts sieht weil ja das Bild transparent erstellt wurde; die Pixel haben trotzdem die richtige Farbe...

 

[Pascal.]

Ah ich verstehe. Das ist genau mein Ausgangsproblem in diesem Thread, da ich mit GC und drawText auf ein transparentes Bild schreiben wollte.

drawText und drawImage scheinen hier dasselbe Problem zu haben. Ich hatte schon einige Sachen ausprobiert, um das zu umgehen, kam aber bisher noch zu keinem Ergebnis.
Leider gibt auch Google & co zu dem Thema nur wenig her.

 

[lumo]

Okay, dann kann ich JETZT dein Problem nachvollziehen; wenn ich eine Lösung finde, lasse ich es dich wissen!

 

[lumo]

EUREKA!

	public static Image drawAlphaImage(Image targetImage, Image alphaImage,
			int x, int y) {
		GC gc = new GC(targetImage);
		gc.drawImage(alphaImage, x, y);
		gc.dispose();
		// draw the alpha values too
		byte[] alphas = new byte[alphaImage.getBounds().width];
		System.out.println("content of alphas:");
		ImageData srcImageData = alphaImage.getImageData();
		ImageData dstImageData = targetImage.getImageData();
		for (int i = 0; i < alphaImage.getBounds().height; i++) {
			srcImageData.getAlphas(0, i, alphaImage.getBounds().width, alphas,
					0);
			dstImageData.setAlphas(x, y + i, alphaImage.getBounds().width,
					alphas, 0);
		}
		Image transparentImage = new Image(Display.getDefault(),
				(ImageData) dstImageData.clone());
		targetImage.dispose();
		return transparentImage;
	}

	public static Image getTransparentImage(int width, int height) {
		Image image = new Image(Display.getDefault(), width, height);
		ImageData newImg = image.getImageData();
		for (int i = 0; i < height; ++i) {
			int[] pixels = new int[width];
			byte[] alphas = new byte[width];
			for (int j = 0; j < alphas.length; j++) {
				alphas[j] = (byte) 0;
			}
			newImg.setPixels(0, i, width, pixels, 0);
			newImg.setAlphas(0, i, width, alphas, 0);
		}
		// i DO need to create a new image from the data... SAD!
		Image transparentImage = new Image(Display.getDefault(),
				(ImageData) newImg.clone());
		image.dispose();
		return transparentImage;
	}

und in der anwendung:

@Override
	public void paintControl(PaintEvent e) {
		Image backBuffer = ImageCache.getTransparentImage(100, 100);
		backBuffer = ImageCache.drawAlphaImage(backBuffer, transparentImage, 0, 0);
		
		e.gc.drawImage(backBuffer, 0, 0);
		e.gc.drawText("drawn", 10, 110);
	}

das mit dem text hab ich auch schon im kopf, muss nur noch umgesetzt werden

 

[lumo]

@Pascal. ich hab jetzt auch das mit dem text implementiert...

public static Image drawAlphaText(Image dstImage, int x, int y,
			String string, Font font, Color color) {
		// calculate size of text
		Image tmp = getTransparentImage(1, 1);
		GC tmpGC = new GC(tmp);
		if (font != null) {
			tmpGC.setFont(font);
		}
		if (color != null) {
			tmpGC.setForeground(color);
		}
		Image alphaImage = getTransparentImage(FontUtils.getStringDim(tmpGC,
				string));
		tmpGC.dispose();
		tmp.dispose();

		// now draw text and copy alpha
		GC dstGC = new GC(dstImage);
		GC alphaGC = new GC(alphaImage);
		if (font != null) {
			dstGC.setFont(font);
			alphaGC.setFont(font);
		}
		if (color != null) {
			dstGC.setForeground(color);
		}
		alphaGC.setForeground(ColorCache.getInstance().getWhite());
		// alphaGC.setForeground(ColorCache.getInstance().getColor(255, 0, 0));
		alphaGC.setBackground(ColorCache.getInstance().getBlack());

		dstGC.drawText(string, x, y, true);
		dstGC.dispose();

		alphaGC.drawText(string, 0, 0, false);
		ImageData dstImageData = dstImage.getImageData();
		ImageData alphaImageData = alphaImage.getImageData();
		int width = alphaImage.getBounds().width;
		int height = alphaImage.getBounds().height;

		for (int line = 0; line < height; line++) {
			byte[] srcAlphas = new byte[width];
			byte[] dstAlphas = new byte[width];

			dstImageData.getAlphas(x, y + line, width, dstAlphas, 0);
			for (int column = 0; column < width; column++) {
				RGB rgb = alphaImageData.palette.getRGB(alphaImageData
						.getPixel(column, line));
				srcAlphas[column] = (byte) (dstAlphas[column] | (byte) (rgb.red));
			}
			try {
				System.out.println(y + line);
				dstImageData.setAlphas(x, y + line, width, srcAlphas, 0);
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		alphaGC.dispose();
		Image newAlphaImage = new Image(Display.getDefault(), dstImageData);
		dstImage.dispose();
		return newAlphaImage;
	}

import org.eclipse.draw2d.geometry.Dimension;
import org.eclipse.swt.graphics.GC;
import org.eclipse.swt.graphics.Image;
import org.eclipse.swt.widgets.Display;

public class FontUtils {
	public static int getStringWidth(String string) {
		Image img = new Image(Display.getDefault(), 1, 1);
		GC gc = new GC(img);
		char[] chars = string.toCharArray();
		int width = 0;
		for (char c : chars) {
			// width += gc.getCharWidth(c) + 1;
			width += gc.getAdvanceWidth(c);
		}
		gc.dispose();
		img.dispose();
		return width;
	}

	public static Dimension getStringDim(GC gc, String string) {
		Dimension dim = new Dimension();
		char[] chars = string.toCharArray();
		dim.width = 0;
		for (char c : chars) {
			dim.width += gc.getAdvanceWidth(c);
		}
		dim.height = gc.getFontMetrics().getHeight();
		return dim;
	}
}

in der anwendung ists dann nur noch:

backBuffer = ImageCache.drawAlphaText(backBuffer, 0, 25, "XXXXXXXXXXX",
				null, ColorCache.getInstance().getColor(255, 0, 0));

im anhang der beweis.
das bild ist transparent, das ergebnis ist text drauf

 

[Pascal.]

Sieht gut aus.
Habs eben mal getestet und funktionieren tut es.

Ich werde mir nachher mal genau anschauen wie du es gelöst hast. Vielleicht fällt mir noch was dazu ein.

Danke schonmal!

Pascal

 

[lumo]

achja, sollte auch mit anti aliasing bei der font klappen, da der transparentz wert aus der gerenderten font genommen wird

 

[Pascal.]

Hab mir nochmal alles angeschaut und etwas rumprobiert.

Ich weiß nicht genau wozu du in drawAlphaText die Fore- und Backgroundfarbe änderst:

        alphaGC.setForeground(ColorCache.getInstance().getWhite());
        // alphaGC.setForeground(ColorCache.getInstance().getColor(255, 0, 0));
        alphaGC.setBackground(ColorCache.getInstance().getBlack());

Ist das nicht egal? Jedenfalls habe ich keine Probleme, wenn ich diesen Teil auskommentiere.

Da mein eclipse kein

org.eclipse.draw2d.geometry.Dimension

kannte, habe ich mir das selbst definiert.
Ansonsten klappt nun alles sehr gut und die Schrift wird korrekt auf dem Bild dargestellt.

 

[lumo]

die dimension ist nur ein wrapper, kannst genauso point verwenden (dimension hat halt breite/höhe und point x,y)
wenn white und black default von GC sind als back/foreground dann sind die zwei zeilen wirklich überflüssig

edit: habs nochmal getestet, bei mir muss das mit dem vorder/background setzen drin sein, sonst funktionierts nicht.

schau dir das mal genau an, das resultat mein ich...
wenn du den fore&background nicht setzt, dann bekommst folgendes:
(da wird der alpha vom src-image behalten )

ABER:
wenn du code sparen willst, du kannst ein kompettes array weglassen:

for (int line = 0; line < height; line++) {
			byte[] dstAlphas = new byte[width];

			dstImageData.getAlphas(x, y + line, width, dstAlphas, 0);
			for (int column = 0; column < width; column++) {
				RGB rgb = alphaImageData.palette.getRGB(alphaImageData
						.getPixel(column, line));
				dstAlphas[column] = (byte) (dstAlphas[column] | (byte) (rgb.red));
			}
			try {
				System.out.println(y + line);
				dstImageData.setAlphas(x, y + line, width, dstAlphas, 0);
			} catch (Exception e) {
				e.printStackTrace();
			}
		}

 

[Pascal.]

Mh... ich glaube, dass es bei mir auch ohne die beiden Zeilen klappt, liegt einfach daran, dass ich mein ursprüngliches Testbild aus Versehen mit einem ohne Transparenz überschrieben habe.

Also die beiden Zeilen wieder dazugenommen, die optimierte for-Schleife eingebaut und es klappt.

 

[lumo]

OFF TOPIC:
habe jetzt noch eine alte anwendung von mir rausgegraben, die mit bildern arbeitet... damals hatte ich (auf dem selben rechner wie jetzt) zwischen 20 und 25 fps bei den weniger aufwändigen sachen;
habe das jetzt alles umgeschrieben und bekomme jetzt zwischen 80 und 125 fps bei den selben ergebnissen!
die aufändigen sachen wie Motion Bur geben mir leider immer noch nur 2fps...

hab das mit einem kernel der über ein array geschickt wird implementiert, gibts da effizientere lösungen?

vielleicht doch noch nicht off-topic.
du brauchst das zeug für ne gallery oder?

gib mal nen screenshot von deiner app

 

[Pascal.]

Zum Motion Blur:
Ich hatte letztens einen Artikel auf eclipse.org zu Bildeffekten gefunden. Ich schau mal nach ob ich den wieder finde.

EDIT: Hier ist der Artikel den ich meinte.

Und ne Gallery ist es nur bedingt. Ich wollte etwas rumexperimentieren und einer meiner Freunde hatte die Idee, ich solle das Inventar aus den Level-Dateien seines Minecraft-Spiels auslesen. Screenshot angehängt.