IOS: GLPaint erase an imageview - ios

I'm usin GLPaint to paint inside an UIView, but not I want to using an erasing brush.
I know that the code to have a erase brush is:
glBlendFunc(GL_ONE, GL_ZERO);
glColor4f(0, 0, 0, 0.0);
but if I put in my UIView an imageView I want to delete it also...is it possible?

There are several possible ways to do this, but here's what I would try first. Inside your PaintingView, draw a textured quad with the image textured onto it. Then draw a textured quad over that with your paint strokes on it. Set the blending mode to the normal over mode (glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);). Then wherever the source alpha is 0, you'll see the textured quad with the image through it.

Related

How to set a outer geometry mask in d2d so d2d only draws outside that geometry

I am working on API which requires me set up a outer geometry mask on ID2D1Rendertarget such that any draw call after that only draws portion of drawings which lies outside this geometry.
https://msdn.microsoft.com/en-us/library/windows/desktop/dd756675(v=vs.85).aspx explains how can we setup a inner geometry mask on ID2D1Rendertarget such that any draw call after that only draws portion of drawings which lies inside this geometry.I want to implement just opposite of that. Is this possible? Any help is deeply appreciated.
One way to do this is to subtract your geometry from a rectangle that fills the entire render target. Check out the MSDN page on combining geometries. I have a small code example below:
ComPtr<ID2D1PathGeometry> invertedGeometry;
ComPtr<ID2D1RectangleGeometry> rectangleGeometry;
d2dFactory->CreateRectangleGeometry(
{ 0, 0, targetWidth, targetHeight },
&rectangleGeometry
);
ComPtr<ID2D1GeometrySink> geometrySink;
d2dFactory->CreatePathGeometry(&invertedGeometry);
invertedGeometry->Open(&geometrySink);
rectangleGeometry->CombineWithGeometry(
pathGeometry.Get(),
D2D1_COMBINE_MODE_EXCLUDE,
D2D1::Matrix3x2F::Identity(),
geometrySink.Get()
);
geometrySink->Close();
Use the inverted geometry as the geometric mask instead of the original path geometry.
A second way to do this is to rasterize your geometry to a bitmap and use it as an opacity mask. You can flip the colors depending on whether or not you want the inside or outside to mask.

Circle Progress View like activity app

I am trying to create an animated radial chart that looks like the activity app created by Apple. I provide an image to show what I would like as result:
Do you know how to obtain this result? If you have any idea could you please focus on the following points?
Create the gradient inside each circle
Create the shadow on the head of the circle
Thank you very much in advance.
Check out my custom control, I tried to make it as close as possible to the Activity app design, and everything is customizable.
https://github.com/maxkonovalov/MKRingProgressView
The basic idea behind the algorithm is quite simple.
To draw arc line with changing color:
Generate a conical gradient image
You can use a prerendered image from Photoshop or generate your own dynamically. I use a gradient image generator from here: https://github.com/maxkonovalov/MKGradientView.
Clip gradient image to show only the arc
CGContextSaveGState(ctx)
CGContextAddPath(ctx, arcPath)
CGContextClip(ctx)
CGContextDrawImage(ctx, gradientRect, gradientImage)
CGContextRestoreGState(ctx)
Drawing the shadow is even simpler:
Draw shadow behind your progress arc (shown with 50% opacity here)
I draw a circle shape matching arc's end for the shadow.
CGContextSetShadow(ctx, offset, shadowRadius)
CGContextAddPath(ctx, shadowPath)
CGContextSetFillColorWithColor(ctx, shadowColor)
CGContextFillPath(ctx)
Clip the shadow to fit into the progress circle
CGContextSaveGState(ctx)
CGContextAddPath(ctx, circlePath)
CGContextClip(ctx)
// Draw shadow...
CGContextRestoreGState(ctx)
And the final result looks like this:
This isn't quite what you need as it appears to generate the image for you, but you could get some good info from the source.
https://github.com/hmaidasani/RadialChartImageGenerator

How to clear out Color of pixel at a point in OpenGL ES 2.0?

I am working on OpenGLES 2.0. When i tap on screen i am getting point i want to remove the color at the tapped point. Which means i want to remove the whatever it is initially has.
glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_FLOAT, GL_FALSE, sizeof(LineVertex), &vertices[0].color);
I have tried the above line, this will fill the area with the color provided, but i want to remove the color so that i can see the background, like erase the color at the given point.
To do this, you should create a texture in GL_RGBA format that covers the window. Then you can edit the alpha channel of the pixels in the texture at the touch coordinates and then update the texture with glTexImage2d().

OpenGL ES 2.0 texture is transparent, but does not show OpenGL content behind

Using OpenGL ES 2.0 on iOS 4.
I have an OpenGL view that inherits from UIView. It is in front of a UIImageView that provides a background.
I have a .png image with transparency that I am using for an OpenGL texture.
The problem I am having is the transparency of the image in the OpenGL view shows through to the image in the UIImageView background. I would like to show content in the OpenGL view that is behind the elements with the transparent texture.
The underneath OpenGL texture is being rendered, but any portion that has the transparent texture on top does not show the underneath OpenGL texture. It shows the UIImageView background.
What do I need to do so that the transparency will show content in the OpenGL view that is behind the transparent content?
EDIT:
I restructured the index array so all elements with transparent textures come at the end and should be rendered after all opaque elements when I call glDrawElements.
Still having the problem with the transparency.
I set up some data so that I have 4 vertices and 6 indices for 2 triangles to draw a square with the opaque texture.
There are also 4 vertices and 6 indices for 2 triangles to draw a square with the transparent texture which come after the other entries in the vertex/index arrays. The transparent element coordinates render it in front of the opaque element.
I can see the transparent element, and I can also see the edges of the opaque element sticking out from behind.
However, instead of showing the opaque element which lies immediately behind the transparent element, the transparency goes right through and shows the background of the view behind the OpenGL view.
Opaque yellow square:
Transparent test image:
The transparent image covers the opaque image but the transparency shows the background not the opaque image behind:
Did you try using some blending? Something like this:
//draw your background scene here
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
//draw your foreground scene here
glDisable(GL_BLEND);
-----------------EDIT on comment----------------
So you want to do the blending in fragment shader:
vec4 color1 = texture2D(backgroundTexture, ...);
vec4 color2 = colorYouGetFromSecondaryTextureOrSomeOtherElement;
vec4 outputColor = color1*(1.0-color2.a) + color2*(color2.a);
outputColor.a = 1.0; //or some function of color1.a and color2.a
gl_FragColor = outputColor;
-----------------EDIT 2-------------------------
Also considering your results I would say that you forgot something in your pipeline. You probably use 2 or more textures but only your second is binded resulting in the fragment snippet I posted to be all black but your foreground.. Are you using "active texture"? Something like this:
- (void)bindFirstTexture {
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_1D, firstTextureID);
}
- (void)bindSecondTexture {
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, secondTextureID);
}
You need such binding in both, before creating and before drawing multiple textures.

OpenGL ES 1.1 clearColor drawing

How can I draw with [UIColor clearColor] in OpenGL ES 1.1? I want to create eraser tool...
You can create a masked image. There are many ways to do this and here is what worked for me:
I created an image that has a black circle and all the rest is transparent. I create a texture from this image and draw it as a simple textured square but using this blend func:
glBlendFunc(GL_ZERO, GL_ONE_MINUS_SRC_ALPHA);
Do not forget to enable blend and after the draw call is done restore your blend func (or disable the blend if you don't use it anywhere else)

Resources