I created a function to draw a text on a path:
public void drawText(float x, float y, String text) {
Log.i("DRAWING", "drawText");Typeface.BOLD);
mPath.reset();
mPath.moveTo(x, y);
mPath.lineTo(x+200,y);
Paint textPaint = new Paint();
textPaint.setColor(Color.RED);
textPaint.setTextSize(20f);
textPaint.setAntiAlias(true);
textPaint.setStrokeWidth(5f);
textPaint.setStyle(Paint.Style.FILL);
mCanvas.drawTextOnPath(text, mPath, 0, 0, textPaint);
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
paths.add(mPath);
invalidate();
}
I set a Bitmap like this:
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas();
mCanvas.setBitmap(mBitmap);
reset();
}
Question:
When I set a bitmap, it works fine and the text appears on the ImageView, but when I don't, just a white line appears and not the text.
Do I have to use a Bitmap to draw text on path with drawTextOnPath ? Because I want to use only paths (all works fine except text, like it needed a Bitmap).
So a Bitmap is mandatory to draw text with drawTextOnPath.
The text won't appear if there is no Bitmap.
For those who, like me, implemented a Undo/Redo functionnality, I guess you have to save both paths and bitmaps to allow user to go back and forward.
Related
I try to hide a picture and show interactively its portions when user touches a screen. I tried numerous approaches like having background view that is overlapsed with views that I will make transparent which somehow worked. A final solution shall be a single custom view which will give me more painting flexibility.
Activity:
hiddenPicture.setBackgroundResource(R.drawable.picture);
View:
init()
eraserPaint = new Paint();
eraserPaint.setColor(Color.TRANSPARENT);
// eraserPaint.setAlpha(0);
eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
veilPaint = new Paint();
veilPaint.setColor(Color.GRAY);
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawRect(0, 0, w, h, veilPaint);
canvas.drawOval(new RectF(20, 20, 220, 220), eraserPaint);
}
The problem is that the oval is black. I found tons of similar questions but I am too junior in Android to apply them to my case. What shall I do to erase oval in grey veil and show background picture? Thank you.
Update:
I found nice blog: http://www.41post.com/4794/programming/android-rendering-a-path-with-a-bitmap-fill
I recycled it to my code:
fillBMP = BitmapFactory.decodeResource(context.getResources(), R.drawable.picture);
fillBmpShader = new BitmapShader(fillBMP, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
eraserPaint.setColor(0xFFFFFFFF);
eraserPaint.setStyle(Paint.Style.FILL);
eraserPaint.setShader(fillBmpShader);
It seemed to work but the problem is that it does not scale the image used as brush. Is really the only solution to implement onDraw() this way:
Paint the picture
Paint the veil except uncovered parts
I worry about the performance. I do not want to paint complete screen after each user interaction. I would prefer to repaint only relevant parts. Is this even possible or am I over-optimizing already?
I have to maintain and paint two bitmaps - one for background and second for veil with transparent hollows:
private void setupDrawing() {
eraserPaint = new Paint();
eraserPaint.setColor(Color.TRANSPARENT);
eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
veilPaint = new Paint();
veilPaint.setColor(Color.GREEN);
canvasPaint = new Paint(Paint.DITHER_FLAG);
}
// http://developer.android.com/training/custom-views/custom-drawing.html
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
canvasBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
drawCanvas = new Canvas(canvasBitmap);
drawCanvas.drawRect(0, 0, w, h, veilPaint);
}
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(fillBitmap, 0, 0, canvasPaint);
canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
}
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_MOVE) {
drawCanvas.drawCircle(event.getX(), event.getY(), 150, eraserPaint);
invalidate();
}
return true;
}
I'm developing an android app, I need to add a watermark effect (of an image) to a EditText of several lines. What is the best approach to achieve this?
Here is a great tutorial on android image processing. Below is the source code from the site
public static Bitmap mark(Bitmap src, String watermark, Point location, Color color, int alpha, int size, boolean underline) {
int w = src.getWidth();
int h = src.getHeight();
Bitmap result = Bitmap.createBitmap(w, h, src.getConfig());
Canvas canvas = new Canvas(result);
canvas.drawBitmap(src, 0, 0, null);
Paint paint = new Paint();
paint.setColor(color);
paint.setAlpha(alpha);
paint.setTextSize(size);
paint.setAntiAlias(true);
paint.setUnderlineText(underline);
canvas.drawText(watermark, location.x, location.y, paint);
return result;
}
During the past weeks I was looking for appropriate solution for zooming and scrolling functionality on a custom view.In my custom view I am drawing bitmaps on my canvas in onDraw() and creating new bitmap and canvas in onSizeChanged().
my code snippet here :
onDraw() method.In this method I am calling drawBitmap() this method takes image times from pagesProvider class that is my custom class.
Bitmap backBitmap = pagesProvider.getPageBitmap(tile);
src = new Rect();
dst = new Rect();
#Override
public void onDraw(Canvas canvas) {
drawBitmap(canvas, b, src, dst);
}
Here it is drawBitmap() this method drawBitmap on canvas based on Color mode. This color takes from my custom Options Class.And again I am drawing bitmap on canvas with mBitmap this mBitmap created on onSizeChanged() and drawing path on canvas.
private void drawBitmap(Canvas canvas, Bitmap backBitmap, Rect src, Rect dst) {
if (colorMode != Options.COLOR_MODE_NORMAL) {
paint.setColorFilter(new ColorMatrixColorFilter(new ColorMatrix(
Options.getColorModeMatrix(this.colorMode))));
canvas.drawBitmap(backBitmap, src, dst, paint);
} else {
canvas.drawBitmap(b, src, dst, null);
}
canvas.drawBitmap(mTopBitmap, 0, 0, mPaint); // mTopBitmap canvas is creating new bitmap on backBitmap bitmap canvas.
canvas.drawPath(mPath, mPaint);
}
onSizeChanged() :
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
this.width = w;
this.height = h;
mTopBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mTopBitmap);
}
If I remove canvas.drawPath(mPath, mPaint); line from drawBitmap() canvas is not drawing paths on mTopBitmap canvas.And if I remove canvas.drawBitmap(mTopBitmap, 0, 0, mPaint); paths are drawn on backBitmap but those paths resetting when touch up.
In onTouch UP I am calling mCanvas.drawPath(mPath, mPaint); for drawing new path on mTopBitmap.
And My problem was I want to scroll the mTopBitmap canvas content whatever I draw on mCanvas and zoom the mTopBitmap canvas content of mCanvas.
I written zooming functionality and I added scroller according to backBitmap size.It's working fine.But I have confuse with mTopBitmap canvas how I can put scroll and zoom into mTop Canvas.
I need a bit of help. I have an ImageView with a touch listener, and I am able to capture all touch inputs into a matrix, and apply that matrix to the ImageView and VOILA! the image pans and zooms appropriately.
Here is the trouble: I'd now like to CROP the image in such a way that it ALWAYS ends up the same size; eg a 300x300 image.
In other words, suppose I have a 300x300 square in the middle of my screen, a user pans and zooms an image until an item of interest fits into that square, and hits "next". I would like to have a resulting image that has cropped the photo to only be the 300x300 portion that was contained in the box.
Make sense?? Please help! Thanks comrades! See a bit of code below for what I have tried thus far.
float[] matrixVals = new float[9];
ImageTouchListener.persistedMatrix.getValues(matrixVals);
model.setCurrentBitmap(Bitmap.createBitmap(model.getOriginalBitmap(), 0, 0, model.getTargetWidth(), model.getTargetHeight(), ImageTouchListener.persistedMatrix, true));
model.setCurrentBitmap(Bitmap.createBitmap(model.getCurrentBitmap(), Math.round(matrixVals[Matrix.MTRANS_X]), Math.round(matrixVals[Matrix.MTRANS_Y]), model.getTargetWidth(), model.getTargetHeight(), null, false));
Finally, I would also like to be able to SHRINK the image into the box, where the edges may actually need to be filled in with black or white or some kind of border... So far, everything I do other than no pan or zoom at all crashes when I hit next.
Thanks again!
see this custom ImageView, the most important part is onTouchEvent where cropped Bitmap is created and saved to /sdcard for verification:
class IV extends ImageView {
Paint paint = new Paint();
Rect crop = new Rect();
public IV(Context context) {
super(context);
paint.setColor(0x660000ff);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
crop.set(w / 2, h / 2, w / 2, h / 2);
crop.inset(-75, -75);
}
#Override
public void setImageResource(int resId) {
super.setImageResource(resId);
setScaleType(ScaleType.MATRIX);
Matrix m = getImageMatrix();
m.postScale(2, 2);
m.postTranslate(40, 30);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
Bitmap croppedBitmap = Bitmap.createBitmap(crop.width(), crop.height(), Config.ARGB_8888);
Canvas c = new Canvas(croppedBitmap);
c.translate(-crop.left, -crop.top);
c.concat(getImageMatrix());
getDrawable().draw(c);
// just save it for test verification
try {
OutputStream stream = new FileOutputStream("/sdcard/test.png");
croppedBitmap.compress(CompressFormat.PNG, 100, stream);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
return false;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawRect(crop, paint);
}
}
It's not really clear for me what your problem is, a calculation or a drawing problem ... if it is a drawing problem I might have the solution ...
Create a new bitmap, get the canvas and draw the correct rect of the big image into the new smaller one ....
Bitmap bigPicture; //your big picture
Bitmap bitmap = Bitmap.createBitmap(300, 300, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bitmap);
Rect source = ...
Rect dest = ...
c.drawBitmap(bigPicture, source, dest, paint);
Now if your problem is a calculation problem I might have a solution too ...
I need a little help with the application that I'm working. I'm trying to create an application for painting and there is one problem which I noticed a few days ago and now I decide to make some research to solve it. When I use PorterDuff.Mode.CLEAR to use my brush as eraser it's working as it should be while my background is white. But if I set my background in other color ( for example Black like : mCanvas.drawColor(Color.BLACK); ) and after I use the eraser, the places where I use the eraser are painted with white color.
Here is how I'm setting the variables for my eraser :
erase.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
stamp=false;
MODE = ERASER_MODE;
mPaint.setColorFilter(null);
mPaint.setShader(null);
mPaint.setMaskFilter(null);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
}
});
So any ideas why it's happening and how can I fix that problem?
Thanks in advance!
Actually I find where were my problem. In my Custom View that I was using for drawing and etc I was doing this
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);
mCanvas.drawColor(parentColor); //parentColor = currentBackgroundColor
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
canvas.drawPath(mPath, mPaint);
}
and I had to change only on my