Draw circle on touch with own class - android

I want to place red circles where I touch an image and have a class that listens to the touch and sends the coordinates to an other class:
public class Report extends Fragment {
private Context activity;
private Point point = new Point();
private DrawingCrl imgCircle = new DrawingCrl();
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.report, container,
false);
activity = this.getActivity();
//Where I'm doing the touching and respond to that:
final View touchView = rootView.findViewById(R.id.ImageC);
touchView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
point.x = Float.valueOf(event.getX());
point.y = Float.valueOf(event.getY());
touchView = imgCircle.DrawCircle(Point point);
return true;
}
});
return rootView;
public class Point {
float x;
float y;
}
}
When I call the DrawCircle I want the class DrawingCrl to do just that, draw a circle for me on the point I send to the method:
public class DrawingCrl {
private Bitmap mBitmap;
private Paint paint;
private Canvas canvas = new Canvas();
public void DrawCircle(Point point) {
mBitmap = Bitmap.createBitmap(400, 800, Bitmap.Config.ARGB_8888);
paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.FILL);
canvas.drawCircle(point.x, point.y, 50, paint);
}
}
I have read both getting X and Y coordinates and drawing circle and Draw Circle on touch but don't get how to do the drawing of the circle.
I'm pretty new to android so sorry my many noob failures. I hope you can help me get this working! Thanks! :)

Okay, here's how I would do it but I'm going to change your code a bit.
First I would change your DrawingCrl class to just store location (and possibly Paint object but this would probably fit better as a static shared by all DrawingCrls) like this:
public class DrawingCrl {
public Point myLoc;
public Paint paint;
public void DrawCircle(Point point) {
paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.FILL);
myLoc = point;
}
}
Save a Vector of DrawingCrl objects created in your Activity and create new ones in the onTouch event handler.
This goes in the Report class:
java.util.Vector<DrawingCrl> myCircles = new java.util.Vector<DrawingCrl>();
Then in 'onTouch' create a new circle object and save it:
#Override
public boolean onTouch(View v, MotionEvent event) {
point.x = Float.valueOf(event.getX());
point.y = Float.valueOf(event.getY());
// create a new Circle here and save it
DrawingCrl c = new DrawingCrl(point);
myCircles.add(c);
return true;
}
Then I would override the 'onDraw' method of your View 'touchView'.
The 'onDraw' will give you the Canvas to draw to, so don't create your own like you are doing in your DrawingDMG class right now.
#Override
protected void onDraw(Canvas c)
{
for (DrawingCrl c : myCircles)
{
c.drawCircle(c.myLoc.x, c.myLoc.y, 50, c.paint);
}
}

Related

How to draw on canvas when touched

I am unable to get the canvas object in ontouch().Without the canvas I cannot draw a circle when touched.How can I draw any shape or image when touched
public class Board extends View implements View.OnTouchListener {
public Board(Context context) {
super(context);
Paint paint1 = new Paint();
paint1.setTextSize(50);
paint1.setColor(Color.WHITE);
View view=this;
view.setOnTouchListener(this);
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawRGB(200, 100, 0);
}
#Override
public boolean onTouch(View v, MotionEvent event) {
final int action = MotionEventCompat.getActionMasked(event);
int pointer = MotionEventCompat.getActionIndex(event);
if (action == MotionEvent.ACTION_DOWN) {
canvas.drawCircle(70, 1100, 50, paint1);
}
return false;
}
To draw on canvas wherever you touch, you need a path to keep track of your touch points and path. Using the path object you can draw on canvas. See this answer Draw on touch

How to Move a ShapeDrawable in Canvas on Touch Events

I am trying to implement a Drawing Application in Android. Where the user should be able to select and move the drawn shapes.
Currently i have statically drawn some rects and text on my Drawing Canvas:
View mDrawingCanvas = new View(mContext)
{
ShapeDrawable rectangle;
#Override
public boolean isFocused() {
// TODO Auto-generated method stub
Log.d(TAG, "View's On focused is called !");
return super.isFocused();
}
#Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
return super.onTouchEvent(event);
}
#Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
// Work out current total scale factor
// from source to view
final float scale = mSourceScale*(float)getWidth()/(float)mSize.x;
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
//Custom View
rectangle = new ShapeDrawable(new RectShape());
rectangle.getPaint().setColor(Color.GRAY);
rectangle.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
rectangle.getPaint().setStrokeWidth(3);
rectangle.setBounds((int)(50*scale), (int)(30*scale), (int)(200*scale), (int)(150*scale));
rectangle.draw(canvas);
rectangle.getPaint().setColor(Color.BLUE);
rectangle.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
rectangle.getPaint().setStrokeWidth(3);
rectangle.setBounds((int)(200*scale), (int)(200*scale), (int)(400*scale), (int)(350*scale));
rectangle.draw(canvas);
}
};
I want to select (draw borders on the selected shape) and move the drawn Shapes in onTouch events of the drawing canvas.
Can some one please guide me about this, any help is Highly Appreciated.
This answer has demonstrated the Shape Moving Methodology that i was looking for.
And my problem is solved now. The Link is :
Drag and move a circle drawn on canvas
You should save the X and Y positions in the touch event and use them when drawing your shapes.
Below is a very basic example of how to do this, but you need to improve it (check if the touch is inside the object and only change values for that object)
Example:
public class DrawTest extends View {
private static final String TAG = "Desenho";
private ShapeDrawable rectangle;
private Paint paint;
private float currX, currY;
private Rect blue, gray;
public DrawTest(Context context) {
super(context);
currX = 1;
currY = 1;
gray = new Rect(50,30,200,150);
blue = new Rect(200,200,400,350);
paint = new Paint();
rectangle = new ShapeDrawable(new RectShape());
}
#Override
public boolean isFocused() {
Log.d(TAG, "View's On focused is called !");
return super.isFocused();
}
#Override
public boolean onTouchEvent(MotionEvent event) {
currX = event.getX();
currY = event.getY();
invalidate();
Log.d(TAG, "View's On touch is called! X= "+currX + ", Y= "+currY);
return super.onTouchEvent(event);
}
#Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
//Custom View
rectangle.getPaint().setColor(Color.GRAY);
rectangle.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
rectangle.getPaint().setStrokeWidth(3);
gray.set((int)(50+currX), (int)(30+currY), (int)(200+currX), (int)(150+currY));
rectangle.setBounds(gray);
gray = rectangle.getBounds();
rectangle.draw(canvas);
rectangle.getPaint().setColor(Color.BLUE);
rectangle.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
rectangle.getPaint().setStrokeWidth(3);
blue.set((int)(200+currX), (int)(200+currY), (int)(400+currX), (int)(350+currY));
rectangle.setBounds(blue);
blue = rectangle.getBounds();
rectangle.draw(canvas);
}
}

Android-Draw on SurfaceView

I am creating an app to draw free shapes on the surface screen but i could only draw separated points my problem is . i want the points to be connected to each other when i draw them not lifting my finger from the screen . i mean as long as i am touching the screen draw.here's my code so far.
public class SurfaceViewActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new DrawingView(this));
}
class DrawingView extends SurfaceView {
private final SurfaceHolder surfaceHolder;
private final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
private List<Point> pointsList = new ArrayList<Point>();
public DrawingView(Context context) {
super(context);
surfaceHolder = getHolder();
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(3);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
if (surfaceHolder.getSurface().isValid()) {
// Add current touch position to the list of points
pointsList.add(new Point((int)event.getX(), (int)event.getY()));
// Get canvas from surface
Canvas canvas = surfaceHolder.lockCanvas();
// Clear screen
canvas.drawColor(Color.BLACK);
// Iterate on the list
for(int i=0; i<pointsList.size(); i++) {
Point current = pointsList.get(i);
// Draw points
canvas.drawPoint(current.x, current.y, paint);
}
// Release canvas
surfaceHolder.unlockCanvasAndPost(canvas);
}
}
return false;
}
}
}
you can use this function to draw smooth lines
public void drawBrzierLine(Canvas mCanvas, float xi, float yi, float xd, float yd) {
Point start = new Point((int) xi, (int) yi);
Point end = new Point((int) xd, (int) yd);
Path mPath = new Path();
mPath.reset();
mPath.moveTo(start.x, start.y);
mPath.quadTo(start.x, start.y, end.x, end.y);
mCanvas.drawPath(mPath, mPaint);
}
In onTouchEvent(MotionEvent event) you only handle ACTION_DOWN. So this code will only run when you press down on the screen. Use ACTION_MOVE instead.
http://developer.android.com/reference/android/view/MotionEvent.html

How to draw the rect canvas on another view in android?

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.

How to get current canvas?

I have DrawView. If I touch this view it draws small circles. I wont to draw circles but not to touch view - with help function "setPoints". What I do:
package com.samples;
import ...
public class DrawView extends View {
ArrayList<Point> points = new ArrayList<Point>();
Paint paint = new Paint();
private int pSize = 5;
private int pColor = Color.BLACK;
public DrawView(Context context, AttributeSet attrs) {
super(context, attrs);
setFocusable(true);
setFocusableInTouchMode(true);
this.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
v.setOnTouchListener(this);
Point point = new Point();
point.x = event.getX();
point.y = event.getY();
points.add(point);
invalidate();
}
return true;
}
});
requestFocus();
}
#Override
public void onDraw(Canvas canvas) {
for (Point point : points) {
canvas.drawCircle(point.x, point.y, pSize, paint);
}
}
public void setPoints(Float xP, Float yP)
{
Point point = new Point();
point.x = xP;
point.y = yP;
points.add(point);
postInvalidate();
}
}
class Point {
float x, y;
#Override
public String toString() {
return x + ", " + y;
}
}
Please tell me, how get canvas out setPoints function?
Update:
Wow, it's really interesting problem. My DrawView contains in HorizontalScrollView. Because if I set in this DrawView right coordinates, no one knows where are drawable circles.
You can't. The canvas is managed by the system and is passed to your onDraw(). I don't understand why you'd need it outside of there. Just redeclare setPoints like this
public void setPoints(Canvas canvas, Float xP, Float Yp)
You can keep a cache of the previous drawings (or store the previous points)
Try declaring canvas2 as a public variable in the DrawView class.
You draw your circles in onDraw(). That's the way View is supposed to work (technically it's actually in the draw() method but we'll overlook that). In setPoints(), set the points of the circle in variables within the class scope, call invalidate(), then draw the circle like that in onDraw(). If you follow this method, you're following the class flow that the view was designed for.

Categories

Resources