Good day all,
First off, I am quite new to Android, and I am currently trying to make an image-editing application. I have run into a problem whereby, if I move a semi-transparent image over another image, the image behind is not drawn (on Canvas). Note that this is only if I do not change/set the Paint object's Alpha (which I don't want to do - if I change alpha values of an image, I want them to be 'permanently' changed (for saving purposes), not only visually).
Basically, I have the following:
//Set up of paint object
paint = new Paint(Paint.FILTER_BITMAP_FLAG | Paint.DITHER_FLAG | Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY)); // I've tried a couple of these (DST_ATOP and OVERLAY)
//paint.setColor(0x808fd2ea); - Messed around with this too, just to see
Here is the loop I am currently using to just manually change the alpha of each pixel, currently alpha = 120 (±50% transparency)
for(int y = 0; y < bmp.getHeight(); ++y)
{
int newPixelAlpha = (alpha << 24);
for (int x = 0; x < bmp.getWidth(); ++x)
{
bmp.setPixel(x, y, ((bmp.getPixel(x, y) & 0xFFFFFF) | newPixelAlpha));
}
}
Then this is the method I use to draw each bitmap to the canvas
public void drawSelf(Canvas canvas, Paint paint)
{
if(active) {
if (!selected) {
//paint.setAlpha(opacity);
canvas.drawBitmap(bitmap, rect.left, rect.top, null);
//This bit here is just if someone long-presses on the image, it gets "highlighted" but a rectangle over it, with transparency 170.
//Not being used at this point
} else {
paint.setAlpha(170);
canvas.drawRect(rect, paint);
canvas.drawBitmap(bitmap, rect.left, rect.top, paint);
}
}
}
The following is a screenshot of one image atop another, with no transparency (unfortunately, I need 10 reputation to include it in this post)
http://tinypic.com/r/r0t4pt/8
Whereas here, I have edited the alpha value of each pixel of the top image using the loop above, yet it is still "opaque"
http://tinypic.com/r/2j2dras/8
Perhaps it is actually "seeing" the canvas background colour as what is behind the image, rather than the other image? This would explain why it only gets darker when I make it transparent. I'm assuming that somehow I need to make canvas do some sort of per-pixel blending or something of that nature? Unfortunately my knowledge in this area is still quite limited, so I am unsure of what to try/where to go to from here.
I'd really appreciate any guidance on this :)
Thanks!
Ok well, this is embarrassing...
At some point I remember that I thought the issue was the Paint Object, so I decided to try drawing the bitmaps without one (hence the "null") in:
canvas.drawBitmap(bitmap, rect.left, rect.top, null);
Anyway, point is I had not yet read about Paint.setXferMode by that point. Adding the paint object back in there fixes the problem, and using PorterDuff.OVERLAY seems to achieve what I am looking for :)
Related
I only searched for infos in this community and first time to actually ask something.
Please know that I'm new to android programming and also am not good at English.
I'm using canvas to draw a bitmap. I first select color and shape type with dialog.
As I touch the screen, the bitmap gets drawn by the color I selected and shape (actually bitmap).
The problem happens when I change the color or brush.
After changing, when I draw, all the previously drawn bitmap's color and shape changes to new settings.
This is the code and an example image (since my bad english might confused you what I'm talking about).
Obviously, it runs by invalidate().
protected void onDraw(Canvas canvas) {
for (int i = 0; i < mPoints.size(); i += 2) {
mPaint = new Paint();
MyPointWColor myP = mPoints.get(i);
mPaint.setColor(myP.color);
Bitmap resized = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(), brush[brushNum]), 100, 100, true);
replaceColor_self(resized, mCurColor);
canvas.drawBitmap(resized,myP.x,myP.y,mPaint);
}
}
1st drawing
drawing after chaging color and shape
I really had hard time getting all this way. This last part will end this nightmare.
Please, save me!
I am trying to draw a heart shaped Canvas using Path in Android. The code is as follows :
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// Fill the canvas with background color
canvas.drawColor(Color.WHITE);
// paint.setShader(null);
// Defining of the heart path starts
path.moveTo(left + WIDTH / 2, top + HEIGHT / 4); // Starting point
// Create a cubic Bezier cubic left path
path.cubicTo(left+WIDTH/5,top,
left+WIDTH/4,top+4*HEIGHT/5,
left+WIDTH/2, top+HEIGHT);
// This is right Bezier cubic path
path.cubicTo(left + 3 * WIDTH / 4, top + 4 * HEIGHT / 5,
left + 4 * WIDTH / 5, top,
left + WIDTH / 2, top + HEIGHT / 4);
paint.setShader(new LinearGradient(0, canvas.getHeight()/4, canvas.getWidth(), canvas.getHeight()/4, new int[]{Color.RED, Color.YELLOW, Color.GREEN}, new float[]{0, 0.6f, 1}, Shader.TileMode.CLAMP));
canvas.drawPath(path, paint);
heart_outline_paint.setColor(getResources().getColor(R.color.heart_outline_color)); // Change the boundary color
heart_outline_paint.setStrokeWidth(4);
heart_outline_paint.setStyle(Paint.Style.STROKE);
canvas.drawPath(path, heart_outline_paint);
}
I am able to draw heart without any issue and I am able to fill color inside the heart using the Fill option in Paint. But I should be able to fill the heart dynamically according to some data and it cannot be filled fully all the time. What I have achieved so far is as follows :
I have made an extensive search and came across a lot of things similar to this. Some of which includes :
Android fill in part of a path?
filling a circle gradually from bottom to top android
I also came across the concept of converting the canvas to bitmap and filling color inside the bitmap using Flood Fill Algorithm which lets users to fill colors inside the bitmap. However, I do not want the bitmap to fill the color while touching inside the heart but to fill while a button click action.
I thought that filling a circle gradually from bottom to top android
would give help me but it makes use of a circle and I am not well-versed in Canvas which makes me very weak in adapting the circle code to such a shape.
If anybody has some ideas or any insights on how to achieve this, it will be really helpful. Cheers. Thanks in advance.
P.S : I also tried some tricks using setShader in Paint but nothing would give me what I want.
EDIT :
I just stumbled upon a idea of drawing a rectangle over the heart with another color same as the background of the canvas so that it will look like its half filled !! I am still working on the idea and not sure how accurate this is gonna be for me. If someone has a better idea, you're most welcome.
I used clipPath function available in Canvas to achieve what I needed. I draw the heart by above method and draw a rectangle over it, and I use the clipPathfunction to clip out the region that is outside the heart.
public static double filled_amount = .90;
path.moveTo(left_x_moveto, left_y_moveto);
path.cubicTo(left_x1, left_y1, left_x2, left_y2, left_x3, left_y3);
path.cubicTo(right_x2, right_y2, right_x1, right_y1, left_x_moveto, left_y_moveto);
path.close();
Rect rect = new Rect((int)(canvas.getWidth()*.10),(int)(canvas.getHeight()*filled_amount),(int) canvas.getWidth(), (int) canvas.getHeight());
canvas.clipPath(path);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
canvas.drawPath(path, paint);
canvas.drawRect(rect, rect_paint);
heart_outline_paint.setColor(getResources().getColor(R.color.heart_outline_color)); // Change the boundary color
heart_outline_paint.setStrokeWidth(15);
heart_outline_paint.setStyle(Paint.Style.STROKE);
canvas.drawPath(path, heart_outline_paint);
This will give me the desired result of filling the heart dynamically. Changing the value of filled_amount dynamically and calling invalidate() will make it look like the heart is being filled dynamically.
#Henry's answer might be a better one but this did the trick for me and I dont look deeply in to the edges so a bit of zig-zags here and there is all right.
You could use Bitmap Masking to get a partially filled Heart. What you ideally do here is use one bitmap to mask the other.
In your case you could have a filled rectangle in the canvas and you have then have the heart shape in a new bitmap to act as the mask. You could then dynamically change the filling of the heart by changing the height of the background rectangle.
Refer this: https://stackoverflow.com/a/33483600/4747587. This contains the implementation of partially filling a Star. The idea is the same.
I looked at the H&M Android app and trying to figure out how to implement some widget.
Can anyone have an idea how this image frame is implemented?
I can guess that it using openGL.
A transparent png frame? Which could also be nine-patch!
I will venture a guess ;)
First the front image is created. In this case, it is built by inflating a linear layout with an ImageView and a TextView. Then this is cached to a Bitmap (at setup phase, not draw time).
In onDraw, that bitmap is drawn to the screen. Then the canvas is clipped to avoid drawing that area any more. Saves a lot of drawing time to not do a quadruple overdraw of transparent pixels.
Then the backgrounds are drawn like this:
for(int i = NUMBER_OF_LAYERS - 1; i > 0; i--) {
canvas.save();
float rotation = MAX_ANGLE * shiftModifier * ((float) i / (NUMBER_OF_LAYERS - 1));
canvas.rotate(rotation, mImageHalfWidth, mImageHalfHeight);
paint.setAlpha((int) (255f / (2 * i)));
canvas.drawRect(mBitmap.getBounds(), paint);
canvas.restore();
}
NUMBER_OF_LAYERS is the number of backgrounds layers.
MAX_ANGLE is the rotation angle for the most tilted layer.
shiftModifier is used to animate the background layers. It moves from zero (background completely hidden) to one (background angle = MAX_ANGLE).
paint is just a Paint with color set to white.
I want to say that maybe (probably) the word 'layer' is not the correct one, but I believe it gives the correct idea of what I want to do.
I am using a SurfaceView which implements SurfaceHolder.Callback.
I am working on a canvas. I am drawing a quite complex set of points.
I have the canvas translated, rotated and scaled (translateX and translateY are variable that changes when the user interacts with the canvas):
canvas.translate(0, 0);
canvas.rotate(-90);
canvas.translate(translateX, translateY);
canvas.scale(scaleX, scaleY);
My next step is to add text and images on top of this canvas.
Both the text and the images should not be scaled nor rotated, only translated (they should follow the canvas).
For this reason I was thinking about having some sort of 'layer' or something similar transparent which only follows the canvas movements and does not change on zoom in or zoom out or on rotation [think them as some sort of UI which stay over the whole canvas].
EDIT:
Here is a snippet:
#Override
public void onDraw(Canvas canvas) {
try{
pt.setColor(Color.BLACK);
canvas.drawColor(Color.WHITE);
canvas.drawText("HELLOOOOOOOOOOOOOOOO", 100, 10, pt);
pt.setAntiAlias(true);
canvas.save();
canvas.rotate(-90, 0, 0);
canvas.drawText("HELLOOOOOOOOOOOOOOOO", getHeight(), 10, pt);
canvas.restore();
}
catch(Exception e)
{}
}
I want the two 'HELLOOOOOO' to appear close to each other. I can't figure out how to.
Why not use save() and restore() so that after all your canvas is "normal" again. Than you can draw on it easily?
Save and restore working like a SceneGraph, if you have heard of it.
I managed to fix this. I simply rotated the canvas using:
rotate(+90, X, Y);
and then rotated back
rotate(-90, X, Y);
Doing this, the (X,Y) coordinates remain the same.
I'm trying to create a 'glow' effect using the Android Path class. However, the gradient is not being warped to fit around the path. Instead, it is simply being display 'above' it and clipped to the path's stroke. Using a square path, the image below shows what I mean:
Instead, that should look more like this:
In other words, the gradient follows the path, and in particular wraps around the corners according to the radius set in the CornerPathEffect.
Here is the relevant part of the code:
paint = new Paint();
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(20);
paint.setAntiAlias(true);
LinearGradient gradient = new LinearGradient(30, 0, 50, 0,
new int[] {0x00000000, 0xFF0000FF, 0x00000000}, null, Shader.TileMode.MIRROR);
paint.setShader(gradient);
PathEffect cornerEffect = new CornerPathEffect(10);
paint.setPathEffect(cornerEffect);
canvas.drawPath(boxPath, paint);
Any ideas?
Another alternative is to get a 'soft-edged brush' effect when defining the stroke width. I've experimented with BlurMaskFilters, but those give a uniform blur rather than a transition from opaque to transparent. Does anyone know if that's possible?
How about drawing with a soft brush bitmap? Make a soft circular brush with opacity decreasing radially outward using image editing software like Photoshop. Save as drawable, load it in a bitmap and draw it evenly spaced along your path. Make the bitmap with white coloured brush. This way you can simply multiply the given colour(Here blue) to your bitmap using PorterDuffColorFilter.
brush1=BitmapFactory.decodeResource(getResources(), R.drawable.brush_custom_one);
//This contains radially decreasing opacity brush
porter_paint.setColorFilter(new PorterDuffColorFilter(paint.getColor(), Mode.MULTIPLY));
for (int i=1;i<matrix.size();i++) {
//matrix contains evenly spaced points along path
Point point = matrix.get(matrix.get(i));
canvas.drawBitmap(brush1, point.x,point.y, porter_paint);}
The brush used is (It's there):
The final result is:
Turns out there was a stupidly obvious way of doing this. Simply re-use the same path, and adjust the stroke width and alpha on each drawing pass. Example code:
float numberOfPasses = 20;
float maxWidth = 15;
for (float i = 0; i <= numberOfPasses; i++){
int alpha = (int) (i / numberOfPasses * 255f);
float width = maxWidth * (1 - i / numberOfPasses);
paint.setARGB(alpha, 0, 0, 255);
paint.setStrokeWidth(width);
canvas.drawPath(path, paint);
}
See below for an example of the result. The left path was drawn using this method, the right path, for comparison, is drawn in a single stroke with maxWidth and 255 alpha.
This mainly works. There are two problems:
The gradient isn't as smooth as it could be. This is because each pass being drawn over the previous one results in the alpha building up too quickly, reaching 255 before the final strokes. Experimenting a bit with the line int alpha = (int) (i / numberOfPasses * 125f); (note the change to 125f rather than 255f) helps.
The path looks like it has been 'cut' on the insides of the corners. Probably some result of the CornerPathEffect applied.
What you're wanting to do, if I understand it right, is to have the gradient effectively form a "brush" for the stroke.
This is exactly what I also was trying to achieve recently, but as far as I can tell the API doesn't provide any straightforward means to do it. I have recently created an SVG to Android Canvas converter class and so I am working a lot in Inkscape lately, too. So, when I was looking into it, I wondered if it's even possible to do it in Inkscape. However, even in Inkscape it's a very non-trivial thing to do. After some searching I eventually came across this image of a gradient being applied along the course of a path, together with a download link for a tutorial beneath:
http://www.flickr.com/photos/35772571#N03/3312087295/
What I was personally trying to do at the time was to create some semi-circles where the path is a kind of neon glow as opposed to a flat colour. Talking in terms of both the Android API and the SVG standard, it seems that the only way to to do this is to create a radial gradient that's centred perfectly on the circle, and position a series of color stops in exactly the right places. Pretty tricky to do, and I certainly don't know how you'd do it to a shape like a square.
Sorry that this is a bit of a 'I couldn't do it either' rather than a useful answer! I'll follow this with interest as I'm eager to know a solution for a kind of 'soft brush' effect too.
Can be very complicated to draw a gradient than follow a path.
So I suggest you to use some library already done than make it for you.
One can be Sc-Gauges.
Have some usefully classe than you can use for your goal.
For first include the library:
dependencies {
...
compile 'com.github.paroca72:sc-gauges:3.0.7'
}
After create an image or what you want with a canvas where draw:
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
Now the code:
// Dimensions
int padding = 24;
Rect drawArea = new Rect(padding, padding, 700 - padding, 500 - padding);
// Get the main layout
ImageView imageContainer = (ImageView) this.findViewById(R.id.image);
assert imageContainer != null;
// Create a bitmap and link a canvas
Bitmap bitmap = Bitmap.createBitmap(
drawArea.width() + padding * 2, drawArea.height() + padding * 2,
Bitmap.Config.ARGB_8888
);
Canvas canvas = new Canvas(bitmap);
canvas.drawColor(Color.parseColor("#f5f5f5"));
// Create the path building a bezier curve from the left-top to the right-bottom angles of
// the drawing area.
Path path = new Path();
path.moveTo(drawArea.left, drawArea.top);
path.quadTo(drawArea.centerX(), drawArea.top, drawArea.centerX(), drawArea.centerY());
path.quadTo(drawArea.centerX(), drawArea.bottom, drawArea.right, drawArea.bottom);
// Feature
ScCopier copier = new ScCopier();
copier.setPath(path);
copier.setColors(Color.RED, Color.GREEN, Color.BLUE);
copier.setWidths(20);
copier.draw(canvas);
// Add the bitmap to the container
imageContainer.setImageBitmap(bitmap);
And this the result:
The first part of the code is just for create a bitmap where draw.
What you interest is the second part where use ScCopier.
Just give the path, the color and the with.
Note than is you are inside a view you can use onDraw for draw directly on the view canvas.
This library can used to create gauge of every kind.
If you want take a look to this site ScComponents have some free and not gauges components.