Since drawing fonts is quite expensive in terms of CPU,
many developers use a rasterized font to draw text on video games; that's what I did too.
Using additive blending when drawing the text works fine regarding glyph edges,
these merge nicely with the background color.
But it brought another issue,
I decided to implement a 'color' parameter for drawing the font, instead of producing glyphs bitmaps for each color, otherwise memory usage might be an issue soon; depending how many glyphs and colors are needed but also the font size and since it supports Unicode, there can be thousands of glyphs needed depending the language.
Now when I blend, say a 'Green' font on a 'Red' background, it goes 'Orange' !
Which is the purpose of additive blending, but trying to bypass this went a little more complicate than expected. Obviously it doesn't happen when background is 'Black' but it might not be that color in the end.
How can I recolor my 'White' font to 'Any' color, while still retaining additive blending over 'Any' color ?
Thanks a lot :D
I have fixed it, here's the answer !
Related
I am working on an application, in which I export an image with different shapes (rectangles, circles, polygons and etc). Each shape has its own unique color. Currently, the colors are solid and have no transparency and this gives me a strong limitation: If a shape is placed over another shape, the shape below the first one is lost. This is really bad, because, sometimes there is a very large object, that stays on top and hides more than 100 smaller elements below it. Example image:
The used colors are solid red(255, 0, 0), green(0, 255, 0) and blue(0, 0, 255)
I have an idea how to fix that, but I don't know if it is possible and this is why I am asking here. I want to try to set transparency to each shape (e.g. 0.3/1) and by doing this, I will be able to see all shapes. Example image:
What I want to do, is to find a way to destructure all colors, that compose a particular pixel. For example - in the middle of the picture where all three shapes are overlayed, the color that is generated is a solid one with RGB(163, 124, 141). I want to be able to extract the following colors: RGBA(255,0,0,0.3), RGBA(0,255,0,0.3), RGBA(0,0,255,0.3). Let's say that the Alpha component will be a constant and set to 0.3 if that helps.
As I said, I don't know if this is possible, but any suggestion will be highly appreciated. The programming languages that I use in my project are C#, Go and JavaScript, but any suggestion in another language will be appreciated as well.
I'm currently creating a Xamarin.Forms app. One of my pages uses SkiaSharp to allow users to highlight parts of an image in a text marker style (i.e. a yellow brush with low opacity).
This is how the related SKPaint object is defined:
var strokePaint = new SKPaint()
{
Color = Color.FromRgba(255, 255, 0, 100).ToSKColor(),
Style = SKPaintStyle.Stroke,
StrokeWidth = StrokeWidth
};
That's working fine so far, but what bothers me is that the opacity "increases" when I have multiple overlapping paths, until at some point the underlying picture isn't visible anymore.
What could I do to avoid this overlapping? I was thinking about merging all paths into one, but that doesn't seem to work because the user is allowed to change StrokeWidth in between strokes and I didn't see any way of drawing paths with varying width.
I hope any of you guys has some help for me. Any idea is appreciated!
I'm not super familiar with Skia, but I took a look at the documentation for SKPaint, and it looks like it has a BlendMode property. Based on how similar things work in other systems, that should control how colors are combined. You might have to try different values to get the effect you are looking for. Dst, or Modulate look like good candidates. – Bradley Uffner
Thanks for your answer Bradley! I went with the Darken blend mode and set opacity to 255, which creates a very nice effect when highlighting text (only the darker color is visible, so dark text on a light background becomes dark text on a background of my marker color).
This is a work project. I inherited some code using SharpDX (a DirectX layer). One of my tasks is to fix a piece of code where certain image effects are applying to a geometric shape containing a fill. If the filter is applied to the fill itself, it doesn't conform to the edges. I've figured out the code to pull out an excerpt using the Geometry of the object. For various reasons, they want to keep the fill that exists outside of the shape (namely, we have some distortion effects that pull in pixels outside of the shape), so I need to overlay it over the background. The problem I'm running into is that I'm getting this single-pixel border...
Applying the Soft Edge filter to the visible part
The background with the shape cut out
The two composited together in the program
What I'm actually getting
I can't share a good bit of the code, due to parts of it being proprietary, but the mask is a byte array. I'm building it using the following code:
SingleChannelBitmap mask = new SingleChannelBitmap(MaxRequiredPixels.Width, MaxRequiredPixels.Height, 255);
mask.FillShape(new RectangleF(new PointF(0,0), mask.Size), this.Geometry, 0);
255 is the maximum Alpha value (transparent). I invert it to take the slice out of the background. The only thing I can think of is that, when I do the masking, it's not including the outer edge of the Geometry. I'm going to try expanding the mask by one pixel in the crudest way possible (basically, scanning through and taking anything which is 0 transparency and adding a 0 transparency pixel to the left, right, up, and down), but I know there has to be a more elegant solution.
This has to work for the 3D Edge bevel filter as well, so doing an arbitrarily large whitespace probably won't work for me either.
What you describe is essentially the same haloing problem that sometimes occurs with displaying PNG images. The PNG export process from several programs will store a solid color for any portions of the PNG that has zero alpha, instead of the actual color at those pixels. This makes them function similar to other image formats (GIF) which use a specific color to encode transparent pixels. This significantly reduces the size of the file, however, can cause issues when sampling the image.
Your situation is similar. Although the masked pixels have zero alpha, when doing bilinear sampling, you may sample in between pixels, mixing both color and alpha values (unless pixel and texel centers are perfectly aligned). For example, if you have a 100% alpha, white pixel, next to a 0% alpha red pixel, and sample in between both, the result will be a pink pixel at 50% alpha.
There are several possible solutions:
You could extend the borders of the color layer, such that the 0% alpha border has the same color as its non-0% alpha adjacent pixels.
Intentionally line up the pixel and texel centers, although this can be tricky and/or not possible, depending on your requirements (mostly dependent on resolution).
Use 'nearest' sampling, instead of bilinear when displaying the image. This way, you will never blend in a 0% alpha pixel. However, this may also not be desirable, because your image will likely exhibit more aliasing effects.
This may seem like a strange question, but I have a set of pictures I want to use as a fading screen saver, and I want each picture to have an accompanying quote, but each quote will be in a different place, relative to the picture.
Rather than coding a Rectangle for the area of each image, it would be easier just to draw a rectangle in the image, and have it drawn in there.
Now, the drawn shape would be a stark, uniform coloured border (lime green, for instance) because the colour doesn't appear in the pictures, and it would be on a solid coloured background, like black for instance.
My question is: If I draw a lime green rectangle on each image, how could I then, using C#, find that rectangle in the image, get the dimensions of it, and replace the lime green with the background colour, so in the end product, it'd look like the shape was never there to begin with?
I have not tried anything, I have no code to show, because it's an idea I had and though I'm sure it must be possible, I don't even know what to start searching for.
I hope this is possible, if it isn't, then I'll just draw a rectangle for each one, but that's a last resort. :)
Have you thought about using either the emgucv or aforge libraries? They are able to detect shapes in images quite easily. Though they don't detect edges perfectly, if all you want to detect is a rectangle, either one should work well.
Here are two tutorials on shape detection for emgu cv and aforge. Once you have the shape detected, then you can easily cut it out for the background. Say, for example, that you used the aforge Detection of quadrilaterals (in the link), then you could easily get the rectangles position and size by the calling of blobs[i].Rectangle; and create a rectangle with same size and position with picture background color.
If you need more clarification please feel free to comment. Nice idea!
I have an image like below.
What I want is a monochrome image such that white parts are kept white, the rest is black. However, the tricky part is that I also want to reduce the white parts to be one pixel in thickness.
It's the second part that I'm stuck with.
My first thought was to do a simple threshold, then use a sort of "Game of Life" type iterative process where a white pixel was removed if it had neighbours on one side but not the other (i.e. it's an edge) however I have a feeling this would reduce ends of lines to nothing over time so I'd end up with a blank image.
What algorithm can I use to get the image I want, given the original image?
(My language of choice is C#, but anything is fine)
Original Image:
After detecting the morphological extended maxima of a given height:
and then thinning gives:
You can also manipulate the height parameter, or prune the thinned image.
Code in Mathematica:
img = ColorConvert[Import["http://i.stack.imgur.com/zPtl6.png"], "Grayscale"];
max = MaxDetect[img, .55]
Thinning[max]
EDIT I followed my own advice and a height of .4 gives segments which are more precisely localized:
I suggest that you look into Binary Morphological transformations such as Erosion and Dilation. Graphics libraries such as OpenCV() http://opencv.willowgarage.com/wiki/ and that statistical/matrix tool Gnu Octave http://octave.sourceforge.net/image/function/bwmorph.html support these operations.