I'm trying to draw multiple rectangles. I want to be able to draw each rectangle by hand though. I can draw one but then once I call invalidate(), of course, the canvas gets cleared.
Is there another way to call the onDraw() so that the canvas doesn't get cleared?
Here's what I have:
I simply have a class which extends a SurfaceView and then
Override the onDraw
#Override
protected void onDraw(Canvas canvas)
{
Paint paint = new Paint();
paint.setColor(Color.BLUE);
canvas.drawRect(xCoor, yCoor, rectW, rectH, paint);
}
And then I Override an OnTouchEvent
#Override
public boolean onTouchEvent (MotionEvent event)
{
downX = Math.round(event.getX());
downY = Math.round(event.getY());
invalidate(); //clears canvas which I don't want
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
xCoor = downX;
yCoor = downY;
rectH = 0;
rectW = 0;
break;
case MotionEvent.ACTION_MOVE:
rectH = downY;
rectW = downX;
break;
case MotionEvent.ACTION_UP:
break;
}
return true;
}
Am I doing this completely wrong? :)
Any help would be appreciated.
Thanks!
You could add each rectangle to a list and iterate it onDraw like this:
import android.graphics.Rect;
private ArrayList<Rect> rectangles = new ArrayList<Rect>();
#Override
public boolean onTouchEvent (MotionEvent event) {
// ...
case MotionEvent.ACTION_UP:
rectangles.add(new Rect(xCoor, yCoor, rectW, rectH));
break;
// ...
}
#Override
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();
paint.setColor(Color.BLUE);
for (Rect rect : rectangles) {
canvas.drawRect(rect, paint);
}
}
Related
Edit :
my first part of question is unique, but the second part is similar to some other questions.
Main Problem:
this is my class code,I use this class to draw lines with custom stroke shape from drawable . I want to draw a line, but it just draw some dots as shown in the picture below. Is there any idea to fix this problem?
public class MainDrawingView extends View {
private Bitmap mBitmapBrush;
private Bitmap rBitmapBrush;
private Vector2 mBitmapBrushDimensions;
private List<Vector2> mPositions = new ArrayList<Vector2>(100);
private static final class Vector2 {
public Vector2(float x, float y) {
this.x = x;
this.y = y;
}
public final float x;
public final float y;
}
public MainDrawingView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
mBitmapBrush = BitmapFactory.decodeResource(context.getResources(), R.drawable.brush01);
rBitmapBrush = Bitmap.createScaledBitmap(mBitmapBrush, 10, 10, false);
mBitmapBrushDimensions = new Vector2(rBitmapBrush.getWidth(), rBitmapBrush.getHeight());
}
#Override
protected void onDraw(Canvas canvas) {
for (Vector2 pos : mPositions) {
canvas.drawBitmap(rBitmapBrush, pos.x, pos.y, null);
}
}
#Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_MOVE:
final float posX = event.getX();
final float posY = event.getY();
mPositions.add(new Vector2(posX - mBitmapBrushDimensions.x / 2, posY - mBitmapBrushDimensions.y / 2));
invalidate();
}
return true;
}
}
Update:
I try another class to draw a line with my drawable, but I faced 2 new problem! the first; when I use setShader , there is no any line when touch and move my finger on the screen. and the second;when comment the setShader line in the code, I could draw a simple black line, but if I draw a curved line rapidly, the result is a broken line ! and not a true curve line.so what is your idea to solve these problems?
public class MainDrawingView extends View {
private Bitmap mBitmapBrush;
private Bitmap rBitmapBrush;
private BitmapShader mBitmapShader;
private Paint paint = new Paint();
private Path path = new Path();
public MainDrawingView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
mBitmapBrush = BitmapFactory.decodeResource(context.getResources(), R.drawable.brush01);
rBitmapBrush = Bitmap.createScaledBitmap(mBitmapBrush, 10, 10, false);
mBitmapShader = new BitmapShader(rBitmapBrush, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
paint.setAntiAlias(true);
paint.setStrokeWidth(5f);
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
//paint.setShader(mBitmapShader);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawPath(path, paint);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
float eventX = event.getX();
float eventY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
path.moveTo(eventX, eventY);
return true;
case MotionEvent.ACTION_MOVE:
path.lineTo(eventX, eventY);
break;
default:
return false;
}
invalidate();
return true;
}
}
I'm trying to make an Activity in which the canvas color changes when you tap the canvas.
With the code I now have, I get this error:
Attempt to invoke virtual method 'void android.graphics.Canvas.drawRect(float, float, float, float, android.graphics.Paint)' on a null object reference
This is a part of my Activity code.
public class ColorActivity extends Activity {
private float x = 0;
private float y = 0;
public Canvas canvas;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_color);
setContentView(new MyView(this));
}
public class MyView extends View {
public MyView(Context context) {
super(context);
// TODO Auto-generated constructor stub
setFocusableInTouchMode(true);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int x = getWidth();
int y = getHeight();
Paint paintCanvas = new Paint();
paintCanvas.setStyle(Paint.Style.FILL);
paintCanvas.setColor(Color.WHITE);
paintCanvas.setColor(Color.parseColor("#F44336"));
canvas.drawRect(0, 0, x, y, paintCanvas);
}
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
Paint repaintCanvas = new Paint();
repaintCanvas.setStyle(Paint.Style.FILL);
repaintCanvas.setColor(Color.WHITE);
repaintCanvas.setColor(Color.parseColor("#2196F3"));
canvas.drawRect(0, 0, 100, 100, repaintCanvas);
invalidate();
break;
case MotionEvent.ACTION_MOVE:
Log.d("LOG","Move");
invalidate();
break;
case MotionEvent.ACTION_UP:
Log.d("LOG", "Up");
invalidate();
break;
}
return super.onTouchEvent(event);
}
}
What am I doing wrong?
I think I know what is your problem. Invalidate calls again to the onDraw() method and it overwrites whatever you paint in the onTouchEvent method.
Try the following code:
public class ColorActivity extends Activity {
private float x = 0;
private float y = 0;
public Canvas canvas;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_color);
setContentView(new MyView(this));
}
public class MyView extends View {
Paint paintCanvas;
public MyView(Context context) {
super(context);
paintCanvas = new Paint();
paintCanvas.setStyle(Paint.Style.FILL);
paintCanvas.setColor(Color.WHITE);
paintCanvas.setColor(Color.parseColor("#F44336"));
// TODO Auto-generated constructor stub
setFocusableInTouchMode(true);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int x = getWidth();
int y = getHeight();
canvas.drawRect(0, 0, x, y, paintCanvas);
}
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
paintCanvas.setStyle(Paint.Style.FILL);
paintCanvas.setColor(Color.WHITE);
paintCanvas.setColor(Color.parseColor("#2196F3"));
invalidate();
break;
case MotionEvent.ACTION_MOVE:
Log.d("LOG","Move");
invalidate();
break;
case MotionEvent.ACTION_UP:
Log.d("LOG", "Up");
invalidate();
break;
}
return super.onTouchEvent(event);
}
}
Your Canvas is null. You will only get it inside onDraw(Canvas canvas) which is responsible for drawing on your Canvas. In your onTouchEvent, set some instance variables (such as color, positions etc.) and call invalidate(), then onDraw will be triggered and you can draw your Canvas with desired needs which you will get from the instance values you set in onTouchEvent.
I'm making an application which can crop the image of the person. The layout of my application will give a better description
Here the rectangle will be used to capture the image defined by its length and width. The rectangle is movable. How would I go about re-sizing the rectangle. For eg. in WhatsApp when you touch the region inside the rectangle, the rectangle moves. If you touch the edges of rectangle, it provides the ability to re-size image suitable for cropping. So, I have 2 questions. 1) How to receive Touch events on edges of rectangle and 2) How would I re-size my rectangle. I'm using canvas to draw my rectangle. The code for this is as follows:
public class CustomView extends Views
{
public CustomView(Context context)
{
super(context);
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);;
paint.setColor(Color.BLUE);
paint.setStrokeWidth(3);
paint.setStyle(Paint.Style.STROKE);
canvas.drawRect(0, 0, 300, 300, paint);
}
}
You should implement the OnTouchListener and check in MotionEvent.ACTION_DOWN if you touch the rectangle and modify right, left, bottom and top of rectangle in MotionEvent.ACTION_MOVE
I provided a not tested example:
public class CustomView extends View {
private float left=0,right = 300, top = 0, bottom = 300;
public CustomView(Context context)
{
super(context);
setOnTouchListener( new OnTouchListener() {
float oldX, oldY;
#Override
public boolean onTouch(View v, MotionEvent event) {
boolean touch = false;
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
touch = isTouchBorderRect();
break;
case MotionEvent.ACTION_UP:
touch = false;
case MotionEvent.ACTION_MOVE:
if (touch){
float newX = event.getRawX();
float newY = event.getRawY();
float deltaX = newX-oldX;
float deltaY = newY-oldY;
left-=deltaX;
right +=deltaX;
bottom += deltaY;
top -= deltaY;
}
break;
}
return false;
}
});
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);;
paint.setColor(Color.BLUE);
paint.setStrokeWidth(3);
paint.setStyle(Paint.Style.STROKE);
canvas.drawRect(left, top, right, bottom, paint);
}
}
In isTouchBorderRect() method you should check if you have touched the rectangle.
This code is not tested but show the idea that you want to develop.
I have this class:
My problem:
public class Example extends Activity implements OnClickListener{
DrawView view1;
Canvas canvas = new Canvas();
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
view1 = new DrawView(this);
setContentView(view1);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
int x = (int) event.getX();
int y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
view1.setFirstCoord(x, y);
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
view1.setSecondCoord(x, y);
view1.dispatchDraw(canvas);
break;
}
return true;
}
public class DrawView extends LinearLayout {
private Paint paint = new Paint();
public int x1, x2;
public int y1, y2;
public DrawView(Context c){
super(c);
LayoutInflater inflater = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
addView(inflater.inflate(R.layout.union, null));
x1 = 0;
x2 = 0;
y1 = 0;
y2 = 0;
paint.setColor(Color.BLACK);
paint.setAntiAlias(true);
paint.setDither(true);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeWidth(10);
}
#Override
public void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
canvas.drawLine(0, 50, 900,2000 , paint);//WORKS
canvas.drawLine((int) x1, (int) y1,(int) x2,(int) y2, paint);//NO WORKS
}
public void setFirstCoord(int e, int f){
x1 = e;
y1 = f;
}
public void setSecondCoord(int e, int f){
x2 = e;
y2 = f;
}
}
}
When the next line is executed I see the "example" line on the screem:
canvas.drawLine(0, 50, 900,2000 , paint);
But when the following line "is executed" is not painted any straight line. Why???
canvas.drawLine((int) x1, (int) y1,(int) x2,(int) y2, paint);
I also tried with:
canvas.drawLine(x1, y1, x2, y2, paint);
But, obviously, the results are the same.
I also tried with executed a onDraw() method but any line is painted because onDraw paint under de "UI" (under the content of the layout .xml file)
I hope found somebody who can help me. I think the solution can very easy but I'm going crazy trying things without finding the solution.
Thanks!!!
The solution:
public class Example extends Activity implements OnClickListener{
DrawView view1;
Canvas canvas = new Canvas();
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
view1 = new DrawView(this);
setContentView(view1);
view1.setOnClickListener(this);
}
public class DrawView extends LinearLayout {
private Paint paint = new Paint();
public int x1, x2;
public int y1, y2;
public DrawView(Context c){
super(c);
LayoutInflater inflater = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
addView(inflater.inflate(R.layout.union, null));
x1 = 0;
x2 = 0;
y1 = 0;
y2 = 0;
paint.setColor(Color.BLACK);
paint.setAntiAlias(true);
paint.setDither(true);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeWidth(10);
}
public boolean onTouchEvent(MotionEvent event) {
int x = (int) event.getX();
int y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
view1.setFirstCoord(x, y);
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
view1.setSecondCoord(x, y);
view1.onDraw(canvas);
view1.postInvalidate();
break;
}
return true;
}
public void setFirstCoord(int e, int f){
x1 = e;
y1 = f;
}
public void setSecondCoord(int e, int f){
x2 = e;
y2 = f;
}
public void onDraw(Canvas canvas){
canvas.drawLine((int) x1, (int) y1,(int) x2,(int) y2, paint);
}
}
}
THANKS AGAIN for your help and your attention. It's a pleasure!!!
Instead of putting your drawing code in dispatch draw, try putting it in onDraw.
Then modify your onTouch method to look like this:
#Override
public boolean onTouchEvent(MotionEvent event) {
int x = (int) event.getX();
int y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
view1.setFirstCoord(x, y);
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
view1.setSecondCoord(x, y);
view1.postInvalidate();
break;
}
return true;
}
If you want to use the OnClickListener interface for this, you need to set your activity as an OnClickListener for the view:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
view1 = new DrawView(this);
setContentView(view1);
// Add this:
view1.setOnClickListener(this);
}
Otherwise, onTouchEvent will never be called.
Also, onTouchEvent should be named onClick.
move OnTouchEvent to the DrawView, not the activity
Make DrawView extend View, not LinearLayout
Instead of dispatchDraw, implement method onDraw and in onTouchEvent, call invalidate()
I think your problem might be that the x/y coordinates you retrieve in the activity are in the screen space, while your draw coordinates on the canvas are in the canvas space.
So (0,0) in your activity is not the same location as (0,0) of your canvas.
You should probably receive the touchevent inside the view instead of in the activity, then the coordinate system will be the same for both the touchevent and the canvas draw.
Hi I am new in android also new in Stackoverflow.
I want create simple crop apps so I use the on image view and apply the on touch listener on this.when I touch on this. I draw simple and small default rect. After this when I drag the cursor on the screen I want to increase the size of rect in run time. So apply the attributes array on onDraw method.but I can`t do it. my code is below.
my Draw View Class
public class DrawView extends View
{
Paint paint ;
Canvas myCanvas;
float []atr;
public DrawView(Context context)
{
super(context);
}
public DrawView(Context context, float [] atr)
{
super(context);
this.atr=atr;
}
#Override
protected void onDraw(Canvas canvas)
{
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.BLUE);
canvas.drawRect(atr[0], atr[1], atr[2],atr[3], paint);
//System.err.println("After Call on Draw Method");
}
}
and i use in this class which my parent class.
enter code hereContext myContext;
RelativeLayout relMainLayout,relHeaderLayout,relBelowLayout;
DrawView drawView;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
myContext=DrawRectActivity.this;
LayoutInflater layoutInflater=(LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
int layoutId = myContext.getResources().getIdentifier("main","layout",getPackageName());
relMainLayout = (RelativeLayout) layoutInflater.inflate(layoutId,null);
relHeaderLayout=(RelativeLayout) relMainLayout.findViewById(R.id.relHeaderLayout);
relBelowLayout=(RelativeLayout) relMainLayout.findViewById(R.id.relBelowLayout);
/*int[] atr={10,10,00,00};
drawView=new DrawView(myContext,atr);
drawView.bringToFront();
drawView.setBackgroundColor(Color.YELLOW);
RelativeLayout.LayoutParams drawParams=new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,200);
drawParams.addRule(RelativeLayout.BELOW, relHeaderLayout.getId());
relMainLayout.addView(drawView, drawParams); */
setContentView(relMainLayout);
//drawView.setOnTouchListener(this);
//relMainLayout.setOnTouchListener(this);
}
public boolean onTouch(View v, MotionEvent event)
{
float x,y;
float incx=5,incy=5;
x=event.getX();
y=event.getY();
switch (event.getActionMasked())
{
case MotionEvent.ACTION_DOWN:
System.err.println("X-->"+x);
System.err.println("Y-->"+y);
float[] atr={x,y,x+incx,y+incy};
drawView=new DrawView(myContext,atr);
drawView.bringToFront();
//drawView.setBackgroundColor(Color.YELLOW);
RelativeLayout.LayoutParams drawParams=new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,200);
drawParams.addRule(RelativeLayout.BELOW, relHeaderLayout.getId());
relMainLayout.addView(drawView, drawParams);
break;
case MotionEvent.ACTION_MOVE:
float x1=event.getX();
float y1=event.getY();
incx=x1+incx;
incy=y1+incy;
float[] at1={x,y,incx,incy};
drawView=new DrawView(myContext,at1);
drawView.bringToFront();
break;
case MotionEvent.ACTION_UP:
System.err.println("Up X-->"+x);
System.err.println("Up y-->"+y);
System.err.println("Up X-->"+incx);
System.err.println("Up y-->"+incy);
break;
default:
break;
}
/*int[] atr={100,100,00,00};
DrawView drawView2=new DrawView(myContext, atr);
Bitmap myCanvasBitmap = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas myCanvas = new Canvas();
myCanvas.setBitmap(myCanvasBitmap);
//canvas.setDensity(BIND_AUTO_CREATE);
drawView2.draw(myCanvas); */
return false;
}
and also use the touch event on this.