I am trying to implement Masking of an image for my android project.
I am trying to accomplish the same as below image :
and the output would be the same as below link:
The link below is close to what I want to achieve only that I need to create the mask at runtime and handle onTouchListener to draw the mask but how?
Masking(crop) image in frame
I can't figure out myself and I feel stuck at this problem.
Any help or tutorials that will help is highly appreciated.
Although I didn't write a complete solution it could show you right direction.
package com.example.masktest.app;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.NonNull;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
public class MaskDrawingView extends View {
private Path path = new Path();
private Paint pathPaint = new Paint();
public MaskDrawingView(Context context) {
super(context);
init();
}
public MaskDrawingView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MaskDrawingView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
pathPaint.setStyle(Paint.Style.STROKE);
pathPaint.setAlpha(150);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(path, pathPaint);
invalidate();
}
#Override
public boolean onTouchEvent(#NonNull MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
path.lineTo(event.getX(), event.getY());
break;
}
return super.onTouchEvent(event);
}
public Bitmap finishDrawingAndGetMask() {
pathPaint.setStyle(Paint.Style.FILL);
path.close();
setDrawingCacheEnabled(true);
Bitmap result = Bitmap.createBitmap(getDrawingCache());
setDrawingCacheEnabled(false);
path.reset();
return result;
}
}
Related
I figured out that the width of the RectF is 0.0 so thats why it is always false. So can I set the width of the RectF width the StrokeWidth?
I have a path. And I want to handle clicks on it.
So I found out I can check that with an onTouchEvent.
So in the OnDraw() Method I draw a path and add the bounds to a rectF where I can get the left, right, top, bottom in the onTouchEvent correctly I guess.
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;
public class PathTest extends View {
Paint paint;
Path path;
RectF rectF = new RectF();
public PathTest(Context context) {
super(context);
init();
}
public PathTest(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public PathTest(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
path.moveTo((float)getWidth()/2,getHeight()-20);
path.lineTo((float)getWidth()/2,20);
path.close();
path.computeBounds(rectF,true);
canvas.drawPath(path,paint);
}
private void init(){
paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(100);
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
path = new Path();
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
setMeasuredDimension(width,height/2);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN){
if(rectF.contains(event.getX(),event.getY())){
Log.d("HALLO","HI");
}else{
Log.d("HALLO","left"+rectF.left+" top"+rectF.top+" right"+rectF.right+" bottom"+rectF.bottom + " x->"+event.getX()+" y->"+event.getY());
}
}
return super.onTouchEvent(event);
}
}
It is always the else. I don't know why.
So I log the rectF Coordinates and the MotionEvent.ACTION_DOWN event.
D/HALLO: left540.0 top20.0 right540.0 bottom2240.0 x->528.0 y->490.0
D/HALLO: left540.0 top20.0 right540.0 bottom2240.0 x->1047.0 y->1021.0
D/HALLO: left540.0 top20.0 right540.0 bottom2240.0 x->1016.0 y->961.0
D/HALLO: left540.0 top20.0 right540.0 bottom2240.0 x->1059.0 y->1062.0```
My application draws a circle when the screen is pressed. I'm trying to put text on the circles according to how many there are the screen. So if your first tap will give you a circle with the text C0, the second will give you a circle for C1, etc.
Currently my code looks like
lPaint = new Paint();
lPaint.setColor(Color.WHITE);
lPaint.setTextAlign(Paint.Align.CENTER);
lPaint.setTextSize(40);
nCanvas.drawCircle(v.x, v.y, 55, cPaint);
nCanvas.drawText("C"+i, v.x, v.y, lPaint);
Where v.x and v.y are the coordinators where you've touched the screen, and i is the circle counter. This code starts off just fine, but after the first circle draw, it changes ALL the text for ALL the circles to the new i value. How do I get around this?
Thanks
Just create a new variable i, inside custom view. Then increment variable i inside on click and in onDraw method just draw circle, or whatever you want.For example:
package yourpackage.
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Build;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;
/**
* Color view used for picking color for drawing
*/
public class ColorView extends View {
private Paint drawPaint;
private int color = ContextCompat.getColor(getContext(), android.R.color.black);
private int i;
public ColorView(Context context) {
this(context, null);
}
public ColorView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ColorView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public ColorView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
drawPaint = new Paint();
drawPaint.setAntiAlias(true);
drawPaint.setColor(color);
drawPaint.setStyle(Paint.Style.FILL);
drawPaint.setStrokeJoin(Paint.Join.ROUND);
drawPaint.setStrokeCap(Paint.Cap.ROUND);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawRect(0, 0, 100, 200, drawPaint);
}
public void setColor(int color) {
drawPaint.setColor(color);
this.color = color;
}
public void onClick() {
i++;
}
public int getColor() {
return color;
}
}
I want to mirror the app an use a customized relativeLayout class for the root view.
It works fine, but I habe one problem. If I refresh something in one element, that is mirrored not on the physical Location, it won't be updated. So I have to correct the coordinate, which should be updated, but I don't know how.
package de.etestdriver.everclock.gui;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Point;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.RelativeLayout;
public class HUDRelativeLayout extends RelativeLayout{
public HUDRelativeLayout(Context context) {
super(context);
this.setWillNotDraw(false);
}
public HUDRelativeLayout(Context context, AttributeSet attrs) {
super(context, attrs);
this.setWillNotDraw(false);
}
public HUDRelativeLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.setWillNotDraw(false);
}
#Override
protected void dispatchDraw(Canvas canvas) {
canvas.scale(-1,1, getWidth()/2, getHeight()/2);
super.dispatchDraw(canvas);
canvas.restore();
}
#Override
public boolean dispatchTouchEvent(MotionEvent event) {
event.setLocation( getWidth()-event.getX(), event.getY());
return super.dispatchTouchEvent(event);
}
}
I'm trying to scale the text continuously by changing text size. And I implement my own view to drawText on canvas every time the text size changed. But the procedure of invalidate and redraw canvas became very slow which lead to some animation became slow too.
The specific os version is 4.0.3(The application works well on the same kind device with os version 4.1.1)
The hardware acceleration is on.(works well when it's off)
I wrote a simple project to reproduce this issue.
The custom view:
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
public class MyTextView extends View {
private Paint mPaint;
private float mTextSize = 80f;
public MyTextView(Context context) {
this(context, null);
}
public MyTextView(Context context, AttributeSet attr) {
super(context, attr);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setTextSize(mTextSize);
}
#Override
public void onDraw(Canvas canvas) {
canvas.save();
mPaint.setTextSize(mTextSize);
canvas.drawText("Test test test", 200, 200, mPaint);
canvas.restore();
mTextSize += 1f;
}
}
The Activity:
import android.os.Bundle;
import android.view.MotionEvent;
import android.app.Activity;
public class MainActivity extends Activity {
private MyTextView mTextView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTextView = (MyTextView)findViewById(R.id.text);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
mTextView.invalidate();
return true;
}
}
Finally I used StaticLayout.draw(Canvas) instead call Canvas.drawText
At first my programm looks like this:
But when i am moving the picture around the screen programm turns to:
Red graph is random-generated in onDraw method. So i want to draging picture around and have static background that not inavalidates while im moving picture.
here is my code:
Custom View:
package com.graph.base;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;
import java.util.Random;
public class CustomView extends View
{
Random random=new Random();
public CustomView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomView(Context context) {
super(context);
}
public void onDraw (Canvas canvas)
{
super.onDraw(canvas);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
canvas.drawPaint(paint);
Path path=new Path();
path.moveTo(10, 10);
for (float i=0.5f; i<=140; i+=10)
{
path.quadTo(10+i*5, 10+random.nextInt(500), 10+(i+10)*5, 10+random.nextInt(500));
}
paint.setDither(true);
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(2);
canvas.drawPath(path, paint);
}
}
MainActivity
package com.graph.base;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
public class MainActivity extends Activity {
FrameLayout frame;
ImageView image;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
frame=(FrameLayout)findViewById(R.id.frameLayout1);
image=(ImageView)findViewById(R.id.imageView1);
image.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
Log.e("TAG", "Touch happend");
switch (event.getAction())
{
case MotionEvent.ACTION_MOVE:
{
image.setPadding((int)event.getX(), (int)event.getY(), 0, 0);
break;
}
}
return true;
}
});
}
public void invalidateButton_Click (View v)
{
frame.invalidate();
}
}
You're drawing random lines onto your canvas. This code is called each time the screen is invalidated. If you want to keep the drawing from changing, then set a bitmap into a canvas and draw into the bitmap. In your onDraw() method you'll then draw the bitmap onto the canvas.
// Outside of onDraw()
Bitmap bmDest = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
Canvas mycanvas = new Canvas(bmDest);
// Do your drawing on the canvas outside of the onDraw() method
In onDraw(), you'll simply do this:
canvas.drawBitmap(bmDest, x, y, null);
Actually, you should not "disable invalidate" but really do call "invalidate"...
In
case MotionEvent.ACTION_MOVE:
{
image.setPadding((int)event.getX(), (int)event.getY(), 0, 0);
// here call frame.invalidate(Rect dirty), with dirty set to where the image was previously
break;
}
Note that if your custom View draws "Randomly", then you can get a Bitmap with the cached version and draw from that (blit copy)