Say I want to create a custom control that would look something like this:
http://karmalita.com/stuff/alpha1.png
The width of the popup balloon can change, and the relative position of the "pointer triangle" can change as well. Of course, additional graphics/text will be drawn on top.
I want it based on images, rather than trying to do the whole thing vector. And of course, the images have varying translucency, which is where the complications arise.
I know there are various ways of doing it (currently I use four images, one of which gets copied a bunch of times....it works but is messy), but I'm interested in finding the easiest, cleanest way. What would be nice would be if I could use a nine-patch for the main rectangle (below left), then draw the pointer triangle (below right) on top of it.
http://karmalita.com/stuff/alpha2.png
But of course that won't work, since the bottom edge of the rectangle will bleed through the pointer triangle, and the shadows will accumulate, etc.
Is there some Porter-Duff magic I can do?
Or should I simply mask the area of the pointer using an inverse clip rect, then draw the nine-patch (stretched appropriately), so it looks like this....
http://karmalita.com/stuff/alpha3.png
....then remove the clip rect, then draw the pointer triangle in the area where the clip rect was?
Or what? Is there an easier/better/more efficient way?
Although I'd love a solution for this specific problem, I'm mostly interested in a general solution for these sorts of scenarios.
Interesting one...
I was about to say "No, there's no way except the inverse clip-rect solution", but I have an (untested) idea:
When you add the arrow section to the regular 9-patch balloon, the result (luckily) is that all the pixels get more opaque.
Therefore (and here's the untested bit) you should be able to pre-calculate a modified version of the 'arrow' patch which - when applied on top of the regular balloon, gives the correct effect: For example the resulting arrow patch would have less shadow where the regular patch already contributes.
I'll let you think about the maths for that, but I guess it's pretty straightforward.
Related
Am trying to break image in shattered pieces, but am unable to catch the logic, please give me way how to achieve.
I hope the below image can give my idea, what I want, Breaking the bitmap into a shattered pieces like triangle or any shape. later i will shuffle those bitmap shapes and giving puzzle to enduser rearrange them in order.
OK, if you want to rearrange the pieces (like in a jigsaw) then each triangle/polygon will have to appear in a rectangular bitmap with a transparent background, because that's how drawing bitmaps works in Java/Android (and most other environments).
There is a way to do this sort of masking in Android, its called porter-duff compositing. The Android documentation is poor to non-existent, but there are many articles on its use in Java.
Basically you create a rectangular transparent bitmap just large enough to hold your cut-out. Then you draw onto this bitmap a filled triangle (with transparency non-zero) representing the cut-out. It can be any colour you like. Then draw the cutout on top of the source image at the correct location using the Porter-Duff mode which copies the transparency data but not the RGB data. You will be left with your cutout against a transparent background.
This is much easier if you make the cutout bitmap the same size as the source image. I would recommend getting this working first. The downsides of this are twofold. Firstly you will be moving around large bitmaps to move around small cutouts, so the UI will be slower. Secondly you will use a lot of memory for bitmaps, and on some versions of Android you may well run out of memory.
But once you have it working for bitmaps the same size as the source image, it should be pretty straightforward to change it to work for smaller bitmaps. Most of your "mucking about" will be in finding and using the correct Porter-Duff mode. As there are only 16 of them, its no great effort to try them all and see what they do. And they may suggest other puzzle ideas.
I note your cutout sections are all polygons. With only a tiny amount of extra complexity, you could make them any shape you like, including looking like regular jigsaw pieces. To do this, use the Path class to define the shapes used for cutouts. The Path class works fine with Porter-Duff compositing, allowing cutouts of almost any shape you can imagine. I use this extensively in one of my apps.
I am not sure what puzzle game you are trying to make, but if there is no special requirements of the shattered pieces,
only the total number of them which can span the whole rectangle, you may try doing the following steps,
the idea is basically by knowing that n non-intersecting lines with two end points lie on any of the 4 edges of the rectangle, n+1 disjoint areas is formed.
Create an array and store the line information
For n times, you randomly pick two end points which lie on those 4 edges of the rectangle
2a. Try to join these two points: start from either end point, if you get an intersection with another line you drew before, stop at the intersection, otherwise stop at the other end point
You will get n+1 disjoint areas with n lines drawn
You may constrain your lines choosing if you have some special requirements of the areas.
For implementation details, you may want to have a look of dot product and euler's theorem
I want to apply the border to this custom view shape
which created by many canvas.draw...() in onDraw()
The border that i want to create and apply to my custom view should have equal range all the way with some distance from the custom view and it should also cover small circle in each slice.
Any idea how to make this?
Thanks.
This isn't so much an answer, but more of a recommendation. Take a look at the Porter-Duff modes available to you. Worst case you may need to do some per pixel image manipulation which should be fine as long as the view isn't animated.
On second thought, here's an idea: why not create two images: one large circle which will always draw behind everything and a second which will always draw behind the small circles. The large circle would just be the complete border you want displayed, whereas the small circles would actually only be a semi circle border, which would render on top of the large circle (covering the large circle border under it). The key would then be to rotate the small border circle depending on where it's located. I hippie that makes sense, but it should work and be very efficient too.
Another option would be to separate the rendering into white circles and slightly larger border color circles. If you render the slightly larger (border color) circles first, then render the normal circles (white) on top, then you won't have to worry about any rotations and it will render correctly if the small outer circles begin to overlap.
So the idea is similar to the first suggestion. You'll still need a large circle and small circle (both white), but in addition, you'll need slightly larger border colored large and small circles.
I hope this description is a little clearer, but I assume that you are comfortable enough with compound drawables to figure out the rest, given that you've gotten this far in making your view.
All the best implementing it, and feel free to ask for any clarification! :)
I have recently completed a simple drag and drop shapes game. It had the user drag a shape (ImageView) to another "empty place holder" ImageView.
I now want to make this a little more advanced, instead of dragging a simple shape, I want to make a puzzle of various non-orthogonal shapes, for example breaking a circle into 5 different pieces. What I'm having a problem with right now is how to design the layout. I do not know how to make a truly "custom" shaped ImageView, as far as I can find from my research it's not possible. So my idea for now is to overlap a number of square ImageViews, each of which will have only a subset of an image and the rest transparent. Thus the final output will look like it's a number of custom shaped ImageViews.
Example:
+ + +
Because only the internal sections are "visible" and the rest of the circle is transparent, when all of these pieces are placed in the same spot on the screen, the final image will look like:
I haven't tried this yet... but I foresee at least one problem. When I go to drag the pieces over to this puzzle, they will all "snap" into place when dragged to the same place. Because in reality all I really have here is a picture of a circle inside a ImageView which has some invisible rectangular boundary around it.
Hopefully this situation is clear. Now my questions:
Is it possible to have truly custom shaped ImageViews instead of my idea of overlapping images?
If what I'm thinking is the best way to handle this puzzle idea, then what property can be changed such that the "drop" action does not happen at the same place for all of these puzzle pieces? If I wanted to "drop" the pizza shaped piece, I'd like it to only snap into place when it go close to the top left of the circle.
Note: I am new to Android programming, and somewhat new to Java/XML as well, it’s very likely I’m overlooking something, so please feel free to suggest other approaches as you see fit.
Not really. Overlapping views is generally the way it's done. You could also use one View and override the drawing action yourself (multiple bitmaps drawn at relative locations within the View), but that would make the drag-drop aspect significantly harder.
If the Views are all the same size, with the visible portions in the correct relative placement in each, they should snap together correctly. This is because the snap is (I believe) based on the position of the upper-left corner of the View. If the pizza-shaped piece's visible portion is correct with regards to that, it should snap in at exactly the right spot.
So you have certain places you want to accept the drops, and I'm assuming you know their coordinates, say (d_x,d_y).
Then why not simply monitor the coordinate of the center (p_x,p_y) of image view of the piece you are dragging, say the "pizza" piece, and when the distance between the the piece and drop point is within an acceptable amount accept the drop.
But if you are asking if there is some way to make non-rectangular image views I don't believe that is possible.
However I don't think it is necessary in your case, because I believe even if you want them to drag the piece precisely into place you can calculate the coordinates where the draggable rectangle needs to go with knowledge of the shape of the piece and the assumption that the rectangle wraps the piece.
I'm trying to create a jigsaw puzzle app for Android. I am fairly far into the coding, and I am kind of stuck with one issue.
I need a way to change a Bitmap into a bunch of puzzle pieces. My current code simply cuts the image into rectangles, and it works pretty well, but now I need a way to create more complex piece shapes.
I had a couple of ideas:
Use a separate bitmap file that contains only black and white pixels, and use that to cut up the picture. I thought this was a pretty good plan, until I went to code it. I really had no idea how to do it.
Use a Path object to create the border. This would probably work, except I'm not sure how to keep track of the sides so that the pieces connect with each other.
Any ideas? I'm open to any suggestions.
You can use Path and/or Region to set a clip for your Canvas when drawing a Bitmap.
Take a look at this example. Here are some ways of clipping your drawing to any shape.
You could try making squares or rectangles fitted inside complex figures that can still be pieced toguether, when there's a match, the full rectangle covers the space. Imagine it like a 9 patch, when two sides match, you show the border rectangle.
This is not a explicit solution but I wonder if it would be possible to use bezier curves or paths to create lines along x and y , in conjunction with a parameter(fed with random value) to control the amount of deviation from a straight line and how much in a given distance ie; pixels/ per inch - this would be to create tongues on the pieces. Then use Region to extract the resulting shape at a given side of an intersection. Have the shape object get its center xy coordinate at instantiation and make it so that piece cannot be set if its current coordinate does not match the one it had when it was created.
I use the following code to draw a bitmap during onDraw of a custom View
Paint p = new Paint(Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG);
p.setShadowLayer(3,3,3,0xff000000);
Bitmap bmp = BitmapFactory.decodeResource(some drawable jpg);
canvas.drawBitmap(bmp,null,new Rect(blah blah),p);
and the shadow looks funny. What do I mean funny? I mean that I get a different shadow then if I was calling canvas.drawRect(). It looks sorta like the android shadow code is treating the bitmap as an alpha channel or something.
have tried adding p.setColor(0xff000000); and p.setStyle(Paint.Style.FILL); but not difference.
I guess I could drawRect with shadow on, then drawBitmap with shadow off, but that seems silly as it would be rendering pixels twice.
Basically the shadow layer doesn't work for anything except text. It's real dumb. Check the Android hardware acceleration supported operations chart.
This question was asked back in 2010 when hardware accelerated view trees didn't exist.. based on things I've read, even then the shadow layer only worked for simple shapes (if at all), and others got weird results using it on anything but text. You might be out of luck.
Finally, there are many ways you can fake a shadow layer. You can wrap a view in another view and draw underneath it. You can write a view that draws the shadow yourself as a radial gradient, etc. But you probably just want to make a 9patch that looks like a shadow and use that.
2018 Update
It looks like most of the operations are supported as of api 28! I haven't had a chance to play around with shadow layers recently, but things are looking much more optimistic now.
Maybe http://developer.android.com/reference/android/graphics/Paint.html#isAntiAlias()
can help you.
paint.setAntiAlias(true);
Maybe you should have different Paint objects for different purposes like text, bitmap, etc. So one's setting will not affect others.