Here is an oval, and a box
The goal is to place the oval inside the green box.
If you imagine the green box on the bottom to be your bounds, the top image can be placed anywhere inside the green box. The oval cannot flow outside of the green box.
Input is just the two images and I'm told to "put the red oval in the green box." If it is not possible (eg: the oval is too big), nothing happens.
It is trivial to do it by hand in a image editor: just drag the top image over the green box and make sure it doesn't flow out the sides.
How should this problem be approached?
There are a variety of ways of doing this and choosing one depends on problem constraints. In the simplest case, if you know the exact colours of the red, blue, and green, and know that none of the shapes are rotated the solution is simple. First binarize the image so that only one object is separated (oval or rectangle) then find the highest,lowest,leftmost,and rightmost point for that object. Repeat for the other object. That information will tell you if the ellipse can fit in the rectangle.
If those constraints are too rigid, then you will probably want to use blob detection. Perhaps cvblob or cvblobslib. They can handle the much more general case of varying colours and orientations.
Related
I have a view (a Button in this case) and the content behind/below it can move around (a ScrollView). The button is just plain white with black text and not bordered with anything. When the content behind the View is white it does not really stand out as I would like it to do. (I can fix this with a black border sure... but...)
I have this idea of having a border around the button that is the opposite color of the view (pixel) behind it. So the border would always contrast with the background and constantly change with the content behind it.
I have googled a bit and looked into visual effects layers and some more complicated (over the top of my head) graphics stuff I don't remember the terminology for.
If you have an idea of how to approach this please tell me. I just really want to see what it would look like.
and have a wonderful day!
I don't think you can create a border that uses colors based on the color of the pixel from the layer behind the current layer using CALayer and borders.
What I would suggest doing is to add a second CALayer to your view's CALayer, inset by -1 in both dimensions (made 1 pixel bigger.) Let's call that the surroundLayer. Then make the surroundLayer's borderColor be white and the view's layer.borderColor be black (or visa-versa.) You can make the surroundLayer's borderColor be 50% opaque so it just lightens/darkens the pixels under it without completely obscuring them, and that is enough to increase the contrast and make your view's border show up regardless of the contents under it.
I've used this technique before and it works well.
Edit:
Check out the project https://github.com/DuncanMC/MaskableImageView.git. The project demonstrates using an image as a mask layer to hide/reveal the contents of a view.
The class MaskableView in that project draws a circular "cursor" that shows where it is revealing/masking the contents of its subview (an image and a label, in the example app.) The cursor is yellow in the middle, with a partly transparent black outer circle around it. This gives good contrast regardless of the colors in the part of the image it is being drawn over.
The MaskableView class has properties that let the caller set the colors use for the "cursor" circle.
Below I posted a short animation of what the eraser tool with a yellow inner circle and an outer, 1/2 transparent black circle looks like.
Without the outer dark circle the yellow inner circle tends to get lost in brighter parts of an image. With the combination of a bright colored inner circle and a partly transparent, dark outer circle, it's easy to see on ANY background:
I want to identify squares/rectangles inside my UIImageView (or UIImage).
I looked at "Very simple image recognition on iOS", but that's not quite what I'm looking.
At the moment I have an UIImageView which is given a UIImage from time to time.
Most of the UIImagees has black squares/rectangles like this:
.
But the corners may (or may not) have rounded edges.
How can I identify the first black square/rectangle's size?
The end result would be to resize my UIImageView to make the first black square in the UIImage fill the screen. Like so:
If your images will always be sharp black squares in a horizontal row, you could use corner detection to identify the rectangles, then pick out the four leftmost corners. I have three variants of corner detectors in my open source GPUImage framework based on the Harris, Noble, and Shi-Tomasi corner detection methods.
Running a GPUImageHarrisCornerDetectionFilter against your boxes with a threshold of 0.4 and sensitivity of 4.0 yields the following result:
They're a little hard to see, but red crosshairs mark where the detector found the corners of your boxes. Again, you just need to take the leftmost four points to find your target rectangle, and then simply scale your image or view so that this rectangle now fills your view.
An example of how to run such feature detection can be found in either the FilterShowcase or FeatureExtractionTest example within my framework. I describe the process by which I do this in this answer over at Signal Processing.
It seems easiest solution would be:
sum up all pixels vertically to the top-most row (like an excel table)
rows with the smallest/biggest value are your "gap" region
width can be derived from (2).
From what I understood about your question, you need to implement the Canny Edge Detection Algorithm for detecting the edges of the black borders in your image.
For this you should use the image processing framework available at the following links
Google
Github
Use the ImageWrapper *Image::cannyEdgeExtract(float tlow, float thigh)function from the Image.m file.
This is sort of a photoshop question, I suppose, but does anybody know how to make a nice looking heart that's recessed? Sort of like this one, except recessed:
There are a few layer styles which can compliment each other to give you that recessed look.
A light drop shadow beneath the sprite (1px white shadow directly below usually does the trick, but you can experiment with its softness/size)
A gradient which is darker at the top and lighter near the bottom
A dark inner shadow which is at the top of the sprite. (1px black, for example)
If you're doing this in Photoshop, make sure to have the light angle set to 90ยบ
A basic letterpress effect can be achieved by having a white (or light coloured) drop shadow 1 point below the image. This is what is used in iOS for the status bar images and text, for example.
You may also want an inner shadow inside the top edge, and possibly a subtle gradient (lighterdarker at the top - note I have changed my mind on the gradient, but not updated the image!) instead of a solid background colour.
Here's a 5 minute bodge job done in Pixelmator. The inner shadow at the top is particularly amateurish, but I prefer drawing things like this in code!
I am trying to create a little arrow in the middle of one of the sides of a rectangle. ( like twitter tweet button).
Any ideas how to do it in fireworks cs4 ?
Thanks.
There are two ways of doing this and unlike all the answers presented here, they are going to give you more freedom if you want to resize your shape and yes the triangle will be a part of your final shape not a superimposed two shapes.
Extending a shape with Pen tool
First, start with a rectangle. It can have rounded corner, however you like it. Then, you can either ungroup it or selecting the subselection tool (the white arrow in the tools panel) and clicking on one of the corners, you can make it editable for the Pen tool. Then, choosing the Pen tool, click three times on the left side of the rectangle, creating three points apart from each other along the edge. Back to subselection tool and select the middle one. Clicking a few times on the left arrow key on your keyboard will make it go to left. Since we are altering the base shape, your new shape can receive further filters, stroke colors etc.
Adding your shape to another shape
Create your rectangle and triangle shape anyway you want to see it. Position triangle so the right of it is just over the left edge of the rectangle. Give it 1-2 px of intersection area if you want, you'll most likely play with this approach to have best results. Both objects selected, go to Modify menu and select Union under Combine Paths. This option will merge both shapes. Since, FW is going to approximate both object styles, you can a blurred stroke if you already had strokes in your objects. You can adjust it but some people thing the method described above is better since they are editing the original image so it's more constructive than guessing the outcome of this merging operation. As usual, using the Pen tool, you can refine your shape.
Have fun.
This question really doesn't belong on Stack Overflow, but I'll answer anyway, since I'm not sure where it should go.
If this is what you mean:
then try this:
Create a small triangle.
Rotate the triangle 90 degrees to the left, so that it looks like the arrow.
Position the triangle on the side of the rectangle.
Change the triangle's color to the same color as the rectangle.
Imagine you are drawing a map of county borders. You are given a set of polygons, one for each boundary, and you draw each polygon.
In places where two counties share a border you just end up drawing the border twice. In the absence of partial transparency effects, and with a solid pen, this is no problem.
But, on maps, borders of this kind are customarily shown by dash-dotted lines. In this case, situations like the one depicted below can happen:
Notice how the dash pattern, which normally is dash-dot-dot, gets screwed up where the two areas share a border. In this case, it happened to become a longdash-dot pattern, but in general it could do anything from coincidentally looking normal to creating a solid line.
How does/should map rendering software prevent artifacts of this kind from occuring?
The artifact is due the fact that the piece of border is drawn twice. Instead of trying to supress such artifacts, you could try to not draw border sections twice, by keeping a list of segments already drawn in memory, and if you encounter a stretch that's already drawn, you don't draw it again.
Your brush pattern colors some pixels black and leaves some pixels alone. Instead of leaving the pixel alone, can you set up your brush pattern to color those pixels white (or whatever your background color is)?
Another possibility is to always draw your county borders twice -- once with a solid white pattern, and again with the brush pattern of your choice.
I suppose they break their border lines into segments, then remove the overlaps.
This is mostly a geometric problem, not a drawing problem.
Instead of going with a dashed line, you could do it Zip-a-tone style, like this:
Zip-a-tone was this graphic art stuff that was basically a sticky sheet of plastic with a regular (printable) pattern of dots on it. To use it, you would lay a big sheet of it over your drawing and cut it around the areas on your drawing that you wanted zip-a-toned, and then peel off the parts you didn't want.
For this image, I just went with an alternating checkerboard pattern, with the lines two pixels wide. Because all the lines are drawn from one big (virtual) block of this checkerboard pattern, you never have to worry about weird artifacts at the joints or any overlap effects.
Angled lines are a bit tricky, but basically you imagine the edges of the line sort of cutting through pixels, and thus you draw them at the appropriate shade of grade instead of full black (in the case of the 45 degree line here, the pixels are drawn with RGB(170, 170, 170), but any angle could be rendered with appropriate shades).
I'm not sure if GDI+ could do this easily using the textured brushes, but maybe. Otherwise you'd have to custom-code it. The advantage of this method over just solid gray lines would be that this would allow some of the background to show through.
This is an interesting question that I never really thought about. I think the only real solution is to render the entire complex figure as a series of lines or paths that do not overlap anywhere. I'm not surprised that GDI+ doesn't handle this situation in any automatic way.