I want to fill a polygon shape that I have drawn via Core Graphics with a linear CGGradient. The CGContextDrawLinearGradient function draws a gradient from one point to another but it fills the entire view. How can I display the gradient only inside the polygon shape I have drawn?
You can construct a CGMutablePath in your desired shape then use it to clip to the region you want to display, something like...
// Construct yourClipPath
CGContextAddPath(yourContext, yourClipPath);
CGContextClosePath(yourContext);
CGContextClip(yourContext);
// Draw Your Gradient
Related
I have a problem with drawing my vector shapes - when I zoom enough, it looks like some coordinates are skipped and the shape gets distorted - see the attached picture:
The shape is loaded from geojson file, where it's defined like:
"coordinates":[[[18.58235,49.81784],[18.58545,49.81738],[18.59252,49.81296]
,[18.59279,49.80395],[18.59986,49.79953],[18.60013,49.79051]
,[18.60719,49.78609],[18.61425,49.78168],[18.61093,49.7663]
,[18.07565,49.432],[18.07509,49.43198],[18.06119,49.43289]
,[18.04734,49.43411],[18.03356,49.43564],[18.01987,49.43747]
,[18.00628,49.4396],[17.99281,49.44204],[17.98218,49.44422]]]
Any idea, what's wrong?
Marek
Your polygon geometry is invalid. You have to add another coordinate pair at the end, with the same values as the first coordinate pair:
"coordinates":[[[18.58235,49.81784],[18.58545,49.81738],[18.59252,49.81296]
,[18.59279,49.80395],[18.59986,49.79953],[18.60013,49.79051]
,[18.60719,49.78609],[18.61425,49.78168],[18.61093,49.7663]
,[18.07565,49.432],[18.07509,49.43198],[18.06119,49.43289]
,[18.04734,49.43411],[18.03356,49.43564],[18.01987,49.43747]
,[18.00628,49.4396],[17.99281,49.44204],[17.98218,49.44422]
,[18.58235,49.81784]]]
I executed the 3D alpha shape function with CGAL and I got unexpected results.
My input data was a set of 3D points (x, y, z) that represents one building (box) in a flat area (with some noise in the coordinates - small ones). I supposed I would get as a result only the surface triangles that represent the building (walls and roof) and the ground.
But, as a result I got triangles forming a convex hull of the surface.
I tried to change the "optimal alpha value" but it was the same.
Is there any filtering process or parameter that I can set to get the surface triangles only?
You need to find the tetrahedons on the surface of the shape first. Then you can try alpha shapes and remove the edges exceeding alpha. In CGAL you Then check all tetrahedons if they are connected with a super tetrahedon. These are the tetrahedons on the surface of the shape. Then apply alpha shapes.
I have to implement a depth image base rendering. Given a 2D image and a depth map, the algorithm will generate a virtual view - what the scene would look like if a camera was placed in a different position. I wrote this function, V is the matrix with the pixel of 2d view, D the pixels from depth map and camera shift a parameter.
Z=1.1-D./255; is a normalization. I try to follow this instruction:
For each pixel in the depth map, compute the disparity that results from the depth, For each pixel in the source 2D image, find a new location for it in the virtual view: old location + disparity of that specific pixel.
The function doesnt work very well, what's wrong?
function[virtualView]=renderViews(V,D,camerashift)
Z=1.1-D./255;
[M,N]=size(Z);
for m=1:M
for n=1:N
d=camerashift/Z(m,n);
shift=round(abs(d));
V2(m,n)=V(m+shift,n);
end
end
imshow(V2)
I fallowed #Stefan Monov tutorial in this question. And everything works, but I need to make it working with my brush. I need to do so:
// Next, we want a blendfunc that doesn't change the color of any pixels,
// but rather replaces the framebuffer alpha values with values based
// on the whiteness of the mask. In other words, if a pixel is white in the mask,
// then the corresponding framebuffer pixel's alpha will be set to 1.
glBlendFuncSeparate(GL_ZERO, GL_ONE, GL_SRC_COLOR, GL_ZERO);
// Now "draw" the mask (again, this doesn't produce a visible result, it just
// changes the alpha values in the framebuffer)
drawQuad(maskTexture);
would be not a static texture, but dynamic shape. I mean, i'm trying to implement brush witch is doing such a thing that is written by #Stefan Monov. So I need that this place could be implemented in other - (void) function, so that it could be called, when coordinates changes (when user draws). I tried a variety of ways to change the sequence of your code, but it does not work correctly then. Now my bursh code is:
glEnable(GL_BLEND);
glBlendFuncSeparate(GL_ZERO, GL_ONE, GL_SRC_COLOR, GL_ZERO);
glPointSize(100);
glBegin(GL_POINTS);
glColorMask(1.0,1.0,1.0, 1.0);
glVertex2f(loc.x, loc.y);
glEnd();
glDisable(GL_BLEND);
It is called when mouse is dragged. "loc" is dragged mouse coordinates. Afcourse its not working now at all, because of blendFunc and code's sequence. When I leave sequence as #Stefan Monov described, it works, but it draws one point and drags it when mouse is dragged. Becouse after drawing point, other textures is being redrawed too. Any, at least similar, solution for it?
To make it more clear i'll show how I want my APP to work.
Here is the original code:
glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ZERO);
drawQuad(backgroundTexture);
glBlendFuncSeparate(GL_ZERO, GL_ONE, GL_SRC_COLOR, GL_ZERO);
drawQuad(maskTexture);
glBlendFunc(GL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHA);
drawQuad(foregroundTexture);
Now its working like this:
Draws background
Draws mask
Draws foreground
I need it to work like this:
Draws bacground
Draws foreground
Draws mask
But if i change the order of drawings it stops working. Ignores mask.
Expected result foto:
Your attempt to draw the mask last makes no sense really.
Drawing the mask only modifies what's in the alpha channel, and the alpha channel itself is not visible in any way in the final image.
The only use of the mask is to modify what's drawn after it.
I'm trying to draw a "conical"/"arcing" gradient (I don't know what would be the correct term for this) (Photoshop calls it an "angle" gradient —your friendly neighborhood stackoverflow editor) using Objective-C (IOS), pretty much exactly like the image shown in the following thread.
After days of googling and searching the internet to no avail, I've decided to ask for help here.
A little background on what I'm trying to do. My objective is to create a custom UIView, which is circular progress bar, a ring basicly, somewhat similar to the activity indicator as seen in the TweetBot iPhone app (displays when you drag to refresh, which can be seen in action here, around 17-18 seconds into the video, on top of the iphone screen). I want the progress indicator (the fill of the ring) to be a simple two color gradient, which can be set programmatically, and the view to be resizable.
Filling the ring shape with a gradient that "follows" the arc of the ring is where I'm stuck. The answers that I get from googling, reading Apple's Core Graphics documentation on gradients and searching on SO are either about radial gradients or linear/axial gradients, which is not what I'm trying to achieve.
The thread linked above suggests using pre-made images, but this isn't an option because the colors of the gradient should be settable, the view should be resizable and the fill of the progress bar isn't always 100% full obviously (which would be the state of the gradient as shown in the picture in the thread above).
The only solution that I've come up with is to draw the gradient "manually", so without using a CGGradientRef, clipping small slices of the gradient with single solid color fills within a circular path. I don't know exactly how well this will perform when the bar is being animated though, it shouldn't be that bad, but it might be a problem.
So my first question:
Is there an easier/different solution to draw a conical/arcing gradient in Objective-C (IOS) than the solution I've come up with?
Second question:
If I have to draw the gradient manually in my view using the solution I came up with, how can I determine or calculate (if this is even possible) the value (HEX or RGBA) of each color "slice" of the gradient that I'm trying to draw, as illustrated in the image below.
(Can't link image) gradient slice illustration
Looks to me like a job for a pixel shader. I remember seeing a Quartz Composer example that simulated a radar sweep, and that used a pixel shader to produce an effect like you're describing.
Edit:
Found it. This shader was written by Peter Graffignino:
kernel vec4 radarSweep(sampler image, __color color1,__color color2, float angle, vec4 rect)
{
vec4 val = sample(image, samplerCoord(image));
vec2 locCart = destCoord();
float theta, r, frac, angleDist;
locCart.x = (locCart.x - rect.z/2.0) / (rect.z/2.0);
locCart.y = (locCart.y - rect.w/2.0) / (rect.w/2.0);
// locCart is now normalized
theta = degrees(atan(locCart.y, locCart.x));
theta = (theta < 0.0) ? theta + 360.0 : theta;
r = length(locCart);
angleDist = theta - angle;
angleDist = (angleDist < 0.0) ? angleDist + 360.0 : angleDist;
frac = 1.0 - angleDist/360.0;
// sum up 3 decaying phosphors with different time constants
val = val*exp2(-frac/.005) + (val+.1)*exp2(-frac/.25)*color1 + val*exp2(-frac/.021)*color2;
val = r > 1.0 ? vec4(0.0, 0.0,0.0,0.0) : val; // constrain to circle
return val;
}
The thread linked above suggests using pre-made images, but this isn't an option because the colors of the gradient should be settable, the view should be resizable and the fill of the progress bar isn't always 100% full obviously (which would be the state of the gradient as shown in the picture in the thread above).
Not a problem!
Use the very black-to-white image from the other question (or a bigger version if you need one), in the following fashion:
Clip to whatever shape you want to draw the gradient in.
Fill with the color at the end of the gradient.
Use the black-to-white gradient image as a mask.
Fill with the color at the start of the gradient.
You can rotate the gradient by rotating the mask image.
This only supports the simplest case of a gradient with a color at each extreme end; it doesn't scale to three or more colors and doesn't support unusual gradient stop positioning.
FYI: here's also a good tutorial for creating a circular progress bar using Quartz drawing.
http://www.turnedondigital.com/blog/quartz-tutorial-how-to-draw-in-quartz/