i want to convert canvas to image and save it on device. But when I set bitmap to canvas I get error java.lang.UnsupportedOperationException.
My full code:
public class SingleTouchEventView extends View {
private Paint paint = new Paint();
private Path path = new Path();
public SingleTouchEventView(Context context, AttributeSet attrs) {
super(context, attrs);
paint.setAntiAlias(true);
paint.setStrokeWidth(6f);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.BEVEL);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawPath(path, paint);
canvas.drawCircle(50, 50, 3, paint);
Bitmap bitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
canvas.setBitmap(bitmap);
try {
File file = new File(Environment.getExternalStorageDirectory() + "/image.jpg");
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, new FileOutputStream(file));
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
Maybe someone could help me to solve this problem?
That isn't how you draw to a bitmap. You do NOT use the canvas that draws to the screen. You create a second canvas, passing in the bitmap you want to draw to as a parameter in the constructor. Then any draw commands to that canvas will draw the bitmap. Then you draw that bitmap to the screen. Something like this:
Canvas myCanvas = new Canvas(myBitmap);
myCanvas.drawLine();
myCanvas.drawCircle();
//Insert all the rest of the drawing commands here
screenCanvas.drawBitmap(myBitmap, 0, 0);
I also would not write it to the file system in onDraw - I'd expect drawing performance to suffer badly if you do. A separate function call can do that. If you keep myBitmap around in a variable, you can just compress it anytime to write out the last draw to disk.
Related
I want to create a bitmap of text with shadow, but I can't get good result. The problem is, when I directly draw the text, it looks good, but when I draw the text to a bitmap, and then draw the bitmap, it looks ugly.
Code:
public class MyView extends View {
private Paint paint;
private Bitmap bitmap;
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public void init(){
paint = new Paint();
paint.setColor(Color.BLACK);
paint.setTextSize(50);
paint.setAntiAlias(true);
paint.setTypeface(Typeface.create("HELVETICA", Typeface.NORMAL));
paint.setShadowLayer(30, 0, 0, Color.BLACK);
bitmap = Bitmap.createBitmap(500, 300, Bitmap.Config.ARGB_8888);
Canvas canvas2 = new Canvas(bitmap);
canvas2.drawText("Dec Use", 100, 100, paint);
}
#Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
final boolean useBitmap = true;
if(useBitmap){
canvas.drawBitmap(bitmap, 0, 0, null);
}
else{
canvas.drawText("Dec Use", 100, 100, paint);
}
}
}
When useBitmap is set to false, the result looks like this
When useBitmap is set to true, the result looks like this
Am I missing something?
The loss of quality seems to be related to the bitmap.
You can get a better result by using a grey shadow and using bigger bitmaps (even if it means resing it after).
bitmap = Bitmap.createBitmap(2000, 2000, Bitmap.Config.ARGB_8888);
Canvas canvas2 = new Canvas(bitmap);
canvas2.drawText("Dec Use", 200, 200, paint);
paint.setShadowLayer(20, 0, 0, Color.GRAY);
canvas2.drawText("Dec Use", 200, 200, paint);
Related answer
I have made a paint app in which i have used ImageView in layout to show image that can be taken from camera or gallery.I want to draw transparent line over image so that image can be seen after drawing.please help me.
Thanks for support
I have used the code to make draw line transparent is :
myPaint.setAlpha(50);
My code is:
protected void onDraw(Canvas canvas) {
Toast.makeText(PaintScreen.this, "onDraw is called", Toast.LENGTH_SHORT).show();
// myPaint.setAlpha(100);
canvas.drawBitmap(PaintScreen.this.localBitmap, 0,0,null);
// canvas.drawPath(myPath, paintBlur);
canvas.drawPath(myPath, myPaint); Log.i("OnDRAWING", "REACH ON DRAW"); }
public class CustomView extends ImageView {
private float mX, mY;
public CustomView(Context context) {
super(context);
localBitmap = Bitmap.createBitmap(myBitmap.getWidth(), myBitmap.getHeight(), Config.ARGB_8888);
myCanvas = new Canvas(localBitmap);
myPaint = new Paint(); setPaintForDraw(paintcolor, false, 30);
setFocusable(true);
setFocusableInTouchMode(true); myPath = new Path();
}
}
private void setPaintForDraw(int color, boolean eraseMode, int brushSize) {
//myPaint.setAlpha(100);
myPaint.setAntiAlias(true);
myPaint.setDither(true);
myPaint.setStyle(Paint.Style.STROKE);
myPaint.setColor(color);
myPaint.setStrokeCap(Paint.Cap.ROUND);
myPaint.setStrokeJoin(Paint.Join.ROUND);
myPaint.setStrokeWidth(brushSize);
myPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
if (eraseMode) {
myPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
}
else { myPaint.setXfermode(null); }
}
see this thread How to maintain multi layers of ImageViews and keep their aspect ratio based on the largest one?, here you can use multiple Draeable layers that are drawn over the image
First, you have to check that your Bitmap is mutable. If it is not, make a copy of it. And here is how you can draw a line on your image:
Bitmap copyBmp = yourBMP.copy(Bitmap.Config.ARGB_8888, true); //Copy if yourBMP is not mutable
Canvas canvas = new Canvas(copyBmp);
Paint paint = new Paint();
paint.setAlpha(50); //Put a value between 0 and 255
paint.setColor(Color.GRAY); //Put your line color
paint.setStrokeWidth(5); //Choose the width of your line
canvas.drawLine(startX, startY, stopX, stopY, paint); //Set the coordinates of the line
Now, if you display copyBmp, you should see a line drawn over it.
I am learning on canvas and bitmap with paths and currently working on a drawing app where user can draw paths freely on the extended view.
The app also allow allowing user to import bitmap as the background and draw on it.
Extending the View named DoodleView:
public DoodleView(Context context, AttributeSet attrs)
{
super(context, attrs); // pass context to View's constructor
this.context_new=context;
setFocusable(true);
setFocusableInTouchMode(true);
} // end DoodleView constructor
onDraw:
#Override
protected void onDraw(Canvas canvas)
{
canvas.drawBitmap(bitmap, 0, 0, null);
for (Path p : paths)
{
paintLine.setColor(colorsMap.get(p));
canvas.drawPath(p, paintLine);
}
paintLine.setColor(selectedColor);
canvas.drawPath(mPath, paintLine);
if (ConvertCanvasToBitmap == true)
{
canvas.drawBitmap(bitmap, 0, 0, paintLine);
ConvertCanvasToBitmap = false;
}
}
FlipHorizontally:
public void flipImageHorizontally()
{
ConvertCanvasToBitmap = true;
invalidate();
Matrix flipHorizontalMatrix = new Matrix();
flipHorizontalMatrix.setScale(-1,1);
flipHorizontalMatrix.postTranslate(bitmap.getWidth(),0);
Bitmap HorizontalFlipped = Bitmap.createBitmap
(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), flipHorizontalMatrix, true);
bitmap = HorizontalFlipped;
invalidate();
}
Question:
My goal is that for the paths that are already drawn, when the user tries to flip the image, the paths drawn would also be flipped. (i.e. the paths become part of the image already, and user are disallows to undo the paths anymore).
However, I have tested using the above codes, when the flip button is pressed, the bitmap background can be flipped, yet the drawn would disappear. And then when further drawn on it, the paths will appear again, but stay unflipped.
In short, how to make the paths to become part of the bitmap when the flip button is pressed?
Thanks!
Edit:
Based on the Android 2.1 View's getDrawingCache() method always returns null, I have modified the onDraw with the following code, but got
02-22 21:38:34.685: E/AndroidRuntime(18617): java.lang.NullPointerException
02-22 21:38:34.685: E/AndroidRuntime(18617): at android.graphics.Bitmap.createBitmap(Bitmap.java:455)
02-22 21:38:34.685: E/AndroidRuntime(18617): at com.pearmak.drawing.DoodleView.onDraw(DoodleView.java:148)
Modified code:
#Override
protected void onDraw(Canvas canvas)
{
canvas.drawBitmap(bitmap, 0, 0, null); // draw the background screen
for (Path p : paths)
{
paintLine.setColor(colorsMap.get(p));
paintLine.setStrokeWidth(widthMap.get(p));
canvas.drawPath(p, paintLine);
}
paintLine.setColor(selectedColor);
paintLine.setStrokeWidth(selectedWidth);
canvas.drawPath(mPath, paintLine);
if (ConvertCanvasToBitmap == true)
{
//Method 1
// RelativeLayout page = (RelativeLayout) findViewById(R.id.doodleView);
// Bitmap screenshot = Bitmap.createBitmap(page.getWidth(), page.getHeight(), Config.ARGB_8888);
// bitmap = screenshot;
// ConvertCanvasToBitmap = false;
//Method 2
Bitmap screenshot2;
layout(0, 0, DoodlzViewWidth, DoodlzViewHeight);
setDrawingCacheEnabled(true);
screenshot2 = Bitmap.createBitmap(getDrawingCache()); // LINE 148
setDrawingCacheEnabled(false);
bitmap = screenshot2;
}
}
you need to create the bitmap from that view
please refer to drawingcache like here
Android 2.1 View's getDrawingCache() method always returns null
now try to flip this bitmap
In my application I extended the ImageView and overriden its onDraw() method. I am using a color filter to manipulate the bitmap for adding some effects like invert, grayscale etcc. After drawing the bitmap I am trying to save it but I am only able to save the original bitmap with no added effects. Here is the code for onDraw() and save method:
protected void onDraw(Canvas canvas)
{
Paint paint = mPaint;
//cmf is the color matrix filter
paint.setColorFilter(cmf);
if(mBitmap != null)
{
canvas.drawBitmap(mBitmap, offsetW, offsetH, paint);
}
}
code for saving the bitmap:
try
{
FileOutputStream fout = new FileOutputStream(path);
mBitmap.compress(CompressFormat.JPEG, 100, fout);
} catch (FileNotFoundException e)
{
e.printStackTrace();
}
Am I doing something wrong? Any help will be appretiated.
You are painting on the canvas that is displayed, original bitmap is not changed. You should create a new bitmap and paint on it. When color matrix filter changes do this:
Bitmap tmp = Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(), mBitmap.getConfig())
Canvas canvas = new Canvas(tmp)
cnvas.drawBitmap(tmp, 0, 0, paint);
Then, you can use this tmp bitmap to draw it and save it.
Instead of using customized ImageView use a normal one and set its image to this new bitmap:
imageView.setImageBitmap(tmp)
I am drawing rotated text on canvas and then saving it to SD card as JPEG.
The problem I am facing is the canvas preview looks fine, but the rotated text in the saved image is not coming properly. When I use the default Android fonts, the final JPEG is the same as the canvas preview, but this code doesn't work for a custom typeface.
I have uploaded both the final saved image and screenshot of canvas preview
I am using a custom view class for canvas drawing, here is my code
public class MyBringBack extends View {
Bitmap bitmap;
Typeface type;
public MyBringBack(Context context) {
super(context);
// TODO Auto-generated constructor stub
type = Typeface.createFromAsset(context.getAssets(),"fonts/rockwell-bold.ttf");
setDrawingCacheEnabled(true);
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(Color.BLUE);
// paint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
paint.setTextSize(23);
Paint paint1 = new Paint();
paint1.setTextSize(40);
paint1.setColor(Color.RED);
canvas.rotate(90,434,110);
canvas.drawText("Demo Text Demo Text Demo Text ", 434, 110, paint);
canvas.restore();
canvas.save();
paint1.setTypeface(type);
canvas.rotate(90,130,185);
canvas.drawText("Text using Typeface ", 130, 185, paint1);
canvas.restore();
canvas.save();
canvas.rotate(90,180,185);
canvas.drawText("Text using Typeface ",180, 185, paint1);
canvas.restore();
canvas.save();
canvas.rotate(90,230,185);
canvas.drawText("Text using Typeface ", 230, 185, paint1);
canvas.restore();
canvas.save();
this.setDrawingCacheEnabled(true);
Bitmap c= Bitmap.createScaledBitmap(this.getDrawingCache(), canvas.getWidth(),canvas.getHeight(), false);
/* Saving File To SD Card */
OutputStream outStream = null;
File bgv = new File("/sdcard/");
/* To build directory if needed */
bgv.mkdirs();
File file = new File(bgv, "final22.jpg");
try {
outStream = new FileOutputStream(file);
c.compress(Bitmap.CompressFormat.JPEG, 100, outStream);
outStream.flush();
outStream.close();
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
Is there is any problem with my code?
Please help...
thanks in advance :)
Finally after lots of research on image processing i got my answer.
For Saving the jpg exactly same as what is drawn on canvas we have to add just two line of code.
First is :
setDrawingCacheQuality(DRAWING_CACHE_QUALITY_HIGH);
and second in onDraw we have to set AntiAlias to true,refering to my code
paint1.setAntiAlias(true);
But after this also the saved image is not of same quality that of what is drawn on canvas.
to get the same crisp quality of image this two code will do the trick
paint1.setDither(true);
paint1.setFilterBitmap(true);
Dither mainly provide smooth corners,AntiAlias,Dither and FilterBitmap can also be used while drawing Bitmap on canvas.
To get more information about Dither and AntiAlias here is the link
AntiAlias
Dither
It looks as though the canvas's drawing cache may not be returning what you expect. You can blit directly to a bitmap using something like this:
Bitmap myBitmap = new Bitmap(width, height, Config.ARGB_8888);
canvas.setBitmap(myBitmap);
... draw your text, etc ...
Then save myBitmap to disk. Everything that you draw on the canvas should be drawn into the bitmap.