In my Android application I will retrieve data from a server where some coordinates will be returned back. Then I use these coordinates to create lines and draw them in the view.
I want a line rendered in different manners. For example: line rendering
The line at the top is the original line, and I want it rendered as the shapes at the below.
And there are some lines which intersect with each other. Then the intersection may be rendered as follows:
The manner of intersection rendering at the left is what I want.
So I wonder whether the Android graphics api supports these kinds of operations?
If you're using the Android Canvas to do this drawing your path twice, with a different stroke size and color. Here's an example which creates a Bitmap with an image similar to what you want :
// Creates a 256*256 px bitmap
Bitmap bitmap = Bitmap.createBitmap(256, 256, Config.ARGB_8888);
// creates a Canvas which draws on the Bitmap
Canvas c = new Canvas(bitmap);
// Creates a path (draw an X)
Path path = new Path();
path.moveTo(64, 64);
path.lineTo(192, 192);
path.moveTo(64, 192);
path.lineTo(192, 64);
// the Paint to draw the path
Paint paint = new Paint();
paint.setStyle(Style.STROKE);
// First pass : draws the "outer" border in red
paint.setColor(Color.argb(255, 255, 0, 0));
paint.setStrokeWidth(40);
c.drawPath(path, paint);
// Second pass : draws the inner border in pink
paint.setColor(Color.argb(255, 255, 192, 192));
paint.setStrokeWidth(30);
c.drawPath(path, paint);
// Use the bitmap in the layout
((ImageView) findViewById(R.id.image1)).setImageBitmap(bitmap);
Related
I'm trying to get cut a jigsaw puzzle piece out of an image, creating a new Bitmap image. I'm using a Path object to do this. This is the current result.
And how I achived this
Path path = new Path();
// Multiple path methods to create shape of puzzle piece...
path.close();
Bitmap source = BitmapFactory.decodeResource(getResources(), R.drawable.flowers);
Bitmap workingCopy = source.copy(Bitmap.Config.ARGB_8888, true);
Canvas canvas = new Canvas(workingCopy);
path.setFillType(Path.FillType.INVERSE_WINDING);
Paint paint = new Paint();
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawPath(path, paint);
((ImageView) findViewById(R.id.myImage)).setImageBitmap(workingCopy);
I wish I could have it transparent instead of black and cut out everything outside the bounds of path.
I've tried it using a PNG-file with transparancy, and the background is transparent in stead of black.
I have a path that is a serie of arc with first arc clockwise, next arc
is counterclockwise, etc.... The last arc join the first in a circle way.
Somthing like this:
(
)
(
)
(
But in circle and each arc touch perfectly the next.
When i use fill, it fill only aproximately the half part of each circle, like if i stoke a line between the start and end point of each circle. The filled part is internal to every arc.
What i want is to fill the inner part of this shape composed of all this arc. Is there some params i have miss ?
Some code:
Path path = new Path();
// for simplicity let's say i have a couple of
path.addArc(rect, (float)startingAngle, sweepAngle);
Paint paintPath = new Paint();
paintPath.setColor(0xFFFFFFFF);
paintPath.setStyle(Paint.Style.FILL);
Bitmap tempBitmap = Bitmap.createBitmap(this.getMeasuredWidth(), this.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(tempBitmap);
canvas.drawPath(path, paintPath);
canvas.drawBitmap(tempBitmap, 0, 0, paintPath);
imageViewackground.setImageBitmap(tempBitmap);
Try using
path.arcTo(rect, (float)startingAngle, sweepAngle);
or
path.arcTo(rect, (float)startingAngle, sweepAngle,true);
I'm using the mask a bitmap with another. The operation succeeds well, unfortunately the result of masking seen a slight black border, as you can see in the image:
How do I remove this border? in the source image is not there.
I'll post the code I'm using:
public Bitmap mask(Bitmap source) {
Bitmap targetBitmap = Bitmap.createBitmap(getWidth(),getHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(targetBitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
paint.setAntiAlias(true);
paint.setDither(true);
canvas.drawBitmap(source, 0, 0, null);
canvas.drawBitmap(getMask(), 0, 0, paint);
paint.setXfermode(null);
return targetBitmap;
}
where getMask () returns the Bitmap that represents the figure of the Puzzle.
I hope to receive your help, thank you all
Sorry for my english :-)
UPDATE:
the black border is what I point out in this picture:
UPDATE:
place the sequence of transformation. The third image would be identical to the first but without color. The problem is the black edge of the puzzle.
I hope to be more clear:
The way I draw images with mask is kind of the other way around from what you do.
public Bitmap mask(Bitmap source) {
Bitmap targetBitmap = Bitmap.createBitmap(getWidth(),getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(targetBitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
// paint.setAntiAlias(true); // you've already set this in the constructor
paint.setDither(true);
canvas.drawBitmap(getMask(), 0, 0, null);
canvas.drawBitmap(source, 0, 0, paint);
// paint.setXfermode(null); // no need for this
return targetBitmap;
}
Note that PorterDuff.Mode is set to SRC_IN (not DST_in) and that the mask is drawn first and then the image on top of that mask. With this approach you can also draw the previous source as the base mask, add the new (puzzle) mask and then draw the final source/image on top of that with SRC_IN paint to add new puzzle pieces each time.
If that doesn't solve the black border, check that your mask doesn't have feathered (transparent) edges that might be causing these problems.
Also, ANTI_ALIAS_FLAG doesn't do anything on textures. If you want smoothly scaled textures use paint.setFilterBitmap(true);
I need to overlay two images in live wallpaper. The overlay images is the jpg which needs to be set to "additive" overlay. it adds the pixel value rather than calculating the transparency. how can i achieve this in android ?
You can make use of Android's Bitmap and Drawable classes mixed with Canvas, and try something like in this snippet:
public static Drawable mergeImage(Drawable orig, Drawable over, int left, int top) {
Bitmap original = ((BitmapDrawable)orig).getBitmap();
Bitmap overlay = ((BitmapDrawable)over).getBitmap();
Bitmap result = Bitmap.createBitmap(original.getWidth(), original.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(result);
Paint paint = new Paint();
paint.setAntiAlias(true);
canvas.drawBitmap(original, 0, 0, paint);
canvas.drawBitmap(overlay, left, top, paint);
return new BitmapDrawable(result);
}
I've coded a photo image gridview overlayered with "online status" using the above lines. Hope that it works for you too.
A more general approach may be to create a PorterDuffXfermode with your wanted PorterDuffMode and then set it on the Paint object that you use with your canvas, as referenced in mthama's answer but substituting some lines. This allows you to use other Porter-Duff modes as wanted/needed.
Paint paint = new Paint();
paint.setAntiAlias(true);
canvas.drawBitmap(original, 0, 0, paint);
paint.setXferMode(new PorterDuffXferMode(PorterDuff.Mode.OVERLAY));
canvas.drawBitmap(overlay, left, top, paint);
Mind you, I haven't tried this, so go with mthama's answer. :)
I want to draw an image into shape of a Path and then add border on the Path. I was able to clip the image with Path but can't find a way to add border on it. I though it would be simple because the API supports Paint object on Canvas.draw* methods.
I asked another question at: Draw bitmap on current clip in canvas with border (Paint) and I accepted the answer. However, after that I found that I need to do a little bit more complicated processing. Because I use two options for clipping instead of one.
Below is my code to clip and image with two different Region.Op parameters
Bitmap srcImage = BitmapFactory.decodeStream(getAssets().open("panda.jpg"));
Bitmap bitmapResult = Bitmap.createBitmap(srcImage.getWidth(), srcImage.getHeight(), Bitmap.Config.ARGB_8888);
Path path = new Path();
// This is my border
Paint paint = new Paint();
paint.setStyle(Style.STROKE);
paint.setColor(Color.RED);
paint.setStrokeWidth(2);
paint.setAntiAlias(true);
Canvas canvas = new Canvas(bitmapResult);
// Overlay two rectangles
path.addRect(10, 10, 70, 70, Path.Direction.CCW);
path.addRect(40, 40, 120, 120, Path.Direction.CCW);
canvas.drawPath(path , paint);
canvas.clipPath(path, Region.Op.INTERSECT);
// Draw the circle
path.reset();
path.addCircle(40, 80, 20, Path.Direction.CCW);
canvas.drawPath(path , paint);
canvas.clipPath(path, Region.Op.DIFFERENCE);
// The image is drawn within the area of two rectangles and a circle
// Although I suppose that puting Paint object into drawBitmap() method will add a red border on result image but it doesn't work
canvas.drawBitmap(srcImage, 0, 0, paint);
((ImageView)this.findViewById(R.id.imageView1)).setImageBitmap(bitmapResult);
Here is the result from my code: http://i.stack.imgur.com/8j2Kg.png
And this is what I expect: http://i.stack.imgur.com/iKhIr.png
Do I miss anything to make it work ?