Im making a basic app to test making paths.
So I got the paths to work, but when I am in the emulator and begin a path it starts the path about inch below from where I clicked.
Besides from the path being a inch off below, it will follow my mouse and make a path but always from a inch below where the mouse is.
This is my code:
public class Paths extends Activity {
Path newPath = new Path();
Paint paint = new Paint();
Canvas canvas = new Canvas();
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_paths);
}
public boolean onTouchEvent(MotionEvent event) {
LinearLayout relative = (LinearLayout) findViewById(R.id.drawing_view2);
float x = event.getRawX();
float y = event.getRawY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
newPath.moveTo(x, y);
relative.addView(new DrawView2(relative.getContext(), newPath));
return true;
case MotionEvent.ACTION_MOVE:
newPath.lineTo(x, y);
break;
case MotionEvent.ACTION_UP:
default:
return false;
}
relative.invalidate();
return true;
}
This is the java class that handles the paint and canvas objects.
private final Path path;
private final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
public DrawView2(Context context, Path path) {
super(context);
int mycolor = Color.parseColor("#6633CC");
paint.setAntiAlias(true);
paint.setDither(true);
paint.setColor(mycolor);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(8f);
this.path = path;
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(path, paint);
}
and my layout file
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawing_view2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#33FF99"
You are getting coordinates with
float x = event.getRawX();
float y = event.getRawY();
Instead of this, try that:
float x = event.getX();
float y = event.getY();
Related
I need help with this thing
I draw line on canvas and i need to be able to modify the position after it's been drawn. I search and try a lot of things, but no one seems that it works
I want to select one of the ends of the line and dragging them in another position
Can someone give me and advice?
Please try this.In this you can draw and edit the line.
class Drawing extends View{
private Canvas mCanvas = null;
private Path mPath = null;
private Paint mBitmapPaint = null;
private Bitmap mBitmap = null;
private Bitmap bit=null;
private Paint mPaint = null;
private MainActivity baseMainActivity = null;
public interface onDrawingViewSingleTap{
void onDrawingViewTap(float x , float y);
}
public Drawing(Context c) {
super(c);
baseMainActivity=(MainActivity) c;
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setColor(Color.YELLOW);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(6);//This sets the width of signature
Display display =baseMainActivity.getWindowManager().getDefaultDisplay();
mBitmap = Bitmap.createBitmap(display.getWidth(), display.getHeight(), Bitmap.Config.ARGB_8888);// 320*480 // For setting size of screen to draw Bitmap
mPath = new Path();
mBitmapPaint = new Paint(Paint.DITHER_FLAG);
mCanvas = new Canvas(mBitmap);
onDraw(mCanvas);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
}
#Override
protected void onDraw(Canvas canvas) {
try{
canvas.drawColor(Color.TRANSPARENT);//Color.WHITE //To change background color of Application
if(bit!=null)
canvas.drawBitmap(bit, 0, 0, mBitmapPaint);
else
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
}catch(Exception e){}
if(bit==null)
canvas.drawPath(mPath, mPaint);
bit=null;
}
private float mX, mY;
private void touch_start(float x, float y) {
mPath.reset();
mPath.moveTo(x, y);
mX = x+1;
mY = y+1;
}
private void touch_upline(float x,float y) {
mPath.lineTo(mX, mY);
mCanvas.drawLine(mX, mY, x, y, mPaint);
mPath.reset();
}
#Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
touch_start(x, y);
invalidate();
break;
case MotionEvent.ACTION_MOVE:
eraseAll();
touch_upline(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
touch_upline(x,y);
invalidate();
break;
}
return true;
}
public void eraseAll()
{
mBitmap.eraseColor(android.graphics.Color.TRANSPARENT);
mCanvas = new Canvas(mBitmap);
}
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
RelativeLayout relativeLayout= (RelativeLayout) (findViewById(R.id.mainLayout));
relativeLayout.addView(new Drawing(this));
}
}
I wanted to draw the custom shape using multiple straight lines. For that, i used the canvas. But I can draw only one line. When I draw second, previous disappears.
My code is given.
public class CanvasBackground extends View {
public Paint paint;
public Context context;
public Canvas canvas;
public ScaleGestureDetector scaleGestureDetector;
float scalfactor = 1f;
boolean isDrawing;
private PointF startPoint, endPoint;
public CanvasBackground(Context context) {
super(context);
this.context = context;
paint = new Paint();
scaleGestureDetector = new ScaleGestureDetector(context, new CanvasScale());
setDrawingCacheEnabled(true);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
this.canvas = canvas;
paint.setColor(Color.WHITE);
canvas.drawPaint(paint);
canvas.save();
DrawingZoomingCanvas(canvas);
DrawingLine(canvas);
canvas.restore();
Log.e("OnDraw >>>", "CALLING");
}
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startPoint = new PointF(event.getX(), event.getY());
endPoint = new PointF();
isDrawing = true;
break;
case MotionEvent.ACTION_MOVE:
if (isDrawing) {
endPoint.x = event.getX();
endPoint.y = event.getY();
invalidate();
}
break;
case MotionEvent.ACTION_UP:
if (isDrawing) {
endPoint.x = event.getX();
endPoint.y = event.getY();
//isDrawing = false;
invalidate();
}
break;
default:
break;
}
//scaleGestureDetector.onTouchEvent(event);
Log.e("OnTouch >>>", "CALLING" + isDrawing);
return true;
}
//drawing Matrix Canvas With Zoom
private void DrawingZoomingCanvas(Canvas canvas) {
//drawing Matarix
canvas.translate(scalfactor * 10, scalfactor * 10);
canvas.scale(scalfactor, scalfactor);
paint.setColor(Color.rgb(220, 220, 220));
for (int i = 0; i <= canvas.getHeight() * scalfactor; i += 10) {
canvas.drawLine(i, 0, i, canvas.getHeight(), paint);
canvas.drawLine(0, i, canvas.getWidth(), i, paint);
}
}
//drawing a line
private void DrawingLine(Canvas canvas) {
paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(2);
paint.setAntiAlias(true);
if (isDrawing)
canvas.drawLine(startPoint.x, startPoint.y, endPoint.x, endPoint.y, paint);
}
private class CanvasScale extends ScaleGestureDetector.SimpleOnScaleGestureListener {
#Override
public boolean onScale(ScaleGestureDetector detector) {
scalfactor *= scaleGestureDetector.getScaleFactor();
scalfactor = Math.max(0.1f, Math.min(scalfactor, 10.0f));
invalidate();
return true;
}
}
}
You are clearing your canvas each time you draw a line, so the previous line will be erased as you draw the new one.
You need to store the previous lines in a bitmap so you can draw these when you draw the new one.
How to take first touch coordinates and make it constant.
I wanna click something on screen then draw a permanent on first touch and then want to move another circle within the the permanent circle one
hers the code am trying :
public class MainActivity extends Activity implements OnTouchListener {
private float x;
private float y;
static float lasttouchx;
static float lasttouchy;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
MyCustomPanel view = new MyCustomPanel(this);
ViewGroup.LayoutParams params =
new ViewGroup.LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT);
addContentView(view, params);
view.setOnTouchListener(this);
}
private class MyCustomPanel extends View {
public MyCustomPanel(Context context) {
super(context);
}
#Override
public void draw(Canvas canvas) {
super.draw(canvas);
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStrokeWidth(5);
paint.setTextSize(50);
canvas.drawText(" X : " + (int) x + " Y : " + (int) y, canvas.getWidth() - 500, 200, paint);
paint.setStyle(Paint.Style.FILL);
if((x<=1000&& x>=18)&&(y<=1380&&y>=348)){
paint.setColor(Color.BLUE);
canvas.drawCircle(x, y, 100, paint);
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(20);
canvas.drawCircle(lasttouchx, lasttouchy, 500, paint);
}
else{}
}
}
#Override
public boolean onTouch(View v, MotionEvent event) {
x = event.getX();
y = event.getY();
int action = event.getActionMasked();
switch (action){
case MotionEvent.ACTION_DOWN:
lasttouchx = event.getX();
lasttouchy = event.getY();
return false;
}
v.invalidate();
return true;
}
}
Override onTouchEvent(MotionEvent event) and then call event.getX() and event.getY() to get the coordinate positions of where the user touched.
then store value to some variable.
now use these values you want and try replacing to another.
Check stack answer to get touch screen information answer
I am trying to make an application where user can either choose to blur the image or can choose to paint on the screen (user can also do both of these at one canvas).
I have it pretty much working however, I am having a strange issue with the drawing on a first draw after the mode is changed from blur to paint or vice versa.
Please see the image below.
PAINT MODE
The paths drawn vertically is when user has paint mode selected. As you can see the first path contains paint from both blur paint object as well paint object (with red stroke). Any subsequent paths drawn now works fine.
BLUR MODE
Similarly you can see, after drawing two vertical paths, user switches the mode to blur and draws horizontal paths in this mode. This time similar to above first path is a mixture of two paint objects and subsequent paths works fine.
Please see the code posted below and It would be great if you can suggest what could be causing the problem.
ArrayList<DrawCommands> path_color_stroke_list = new ArrayList<DrawCommands>();
ArrayList<DrawCommands> path_color_stroke_list_undone = new ArrayList<DrawCommands>();
ArrayList<BlurCommands> path_blur_list = new ArrayList<BlurCommands>();
ArrayList<BlurCommands> path_blur_list_undone = new ArrayList<BlurCommands>();
ArrayList<EditTextDrawCommands> editTextList = new ArrayList<EditTextDrawCommands>();
private Bitmap mBitmap;
private Paint transparentPaint;
private Paint mPaint;
public DrawingPanel(Context context, String imageStorageDir) {
super(context);
appContext = context;
setFocusable(true);
setFocusableInTouchMode(true);
setClickable(true);
this.setOnTouchListener(this);
mPath = new Path();
setDefaultPaintAttributes();
BitmapFactory.Options bmOptions = new BitmapFactory.Options();
bmOptions.inSampleSize = 8;
blurRefImage = BitmapFactory.decodeResource(getResources(), R.drawable.canvas_test, bmOptions);
canvasBackImage = BitmapFactory.decodeResource(getResources(), R.drawable.canvas_test);
//stretch this small image to the size of the device so that it will be stretched and will already be blurred
blurRefImage = Bitmap.createScaledBitmap(blurRefImage, Utilities.getDeviceWidth(), Utilities.getDeviceHeight(), true);
blurRefImage = BlurBuilder.blurFullImage(appContext, blurRefImage, 20);
mBitmap = Bitmap.createBitmap(Utilities.getDeviceWidth(), Utilities.getDeviceHeight(), Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);
}
protected void setDefaultPaintAttributes() {
mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(30);
//mPaint.setColor(0xcc000000);
transparentPaint = new Paint();
transparentPaint.setStyle(Paint.Style.STROKE);
transparentPaint.setStrokeJoin(Paint.Join.ROUND);
transparentPaint.setStrokeCap(Paint.Cap.ROUND);
transparentPaint.setStrokeWidth(60);
transparentPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
}
#Override
protected void onDraw(Canvas canvas) {
mCanvas.drawBitmap(canvasBackImage, 0, 0, mPaint);
//Draw Blur
for (BlurCommands path_blur : path_blur_list) {
mCanvas.drawPath(path_blur.getPath(), transparentPaint);
}
//Draw Paints
for (DrawCommands path_clr : path_color_stroke_list) {
mCanvas.drawPath(path_clr.getPath(), mPaint);
}
switch (CURRENT_MODE) {
case MODE_BLUR:
mCanvas.drawPath(mPath, transparentPaint);
break;
case MODE_PAINT:
mCanvas.drawPath(mPath, mPaint);
break;
}
canvas.drawBitmap(blurRefImage, 0, 0, mPaint);
canvas.drawBitmap(mBitmap, 0, 0, mPaint);
}
private void touch_start(float x, float y) {
mPath.reset();
mPath.moveTo(x, y);
mX = x;
mY = y;
switch (CURRENT_MODE) {
case MODE_BLUR:
break;
case MODE_PAINT:
break;
default:
break;
}
}
private void touch_move(float x, float y) {
float dx = Math.abs(x - mX);
float dy = Math.abs(y - mY);
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
switch (CURRENT_MODE) {
case MODE_BLUR:
case MODE_PAINT:
mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
mX = x;
mY = y;
break;
default:
break;
}
}
}
private void touch_up(MotionEvent event) {
switch (CURRENT_MODE) {
case MODE_BLUR:
mPath.lineTo(mX, mY);
mPath = new Path();
path_blur_list.add(new BlurCommands(mPath, blurStrength, transparentPaint.getStrokeWidth()));
break;
case MODE_PAINT:
mPath.lineTo(mX, mY);
mPath = new Path();
path_color_stroke_list.add(new DrawCommands(mPath, mPaint.getColor(), mPaint.getStrokeWidth()));
Log.d(TAG, "Touch up: X: " + mX + " Y: " + mY);
break;
default:
break;
}
}
You probably want to switch the order of the 2 lines in touch_up that clear the path (new Path), and that add ad the path to the list (first add, then clear)
The error occurs because the mPath object is created matching the previous drawing mode since it was created on mouse-up with the previous drawing mode.
Move the mPath creation to touch_start and the current drawing mode will be used:
private void touch_start(float x, float y) {
mPath = new Path();
mPath.moveTo(x, y);
mX = x;
mY = y;
switch (CURRENT_MODE) {
case MODE_BLUR:
path_blur_list.add(new BlurCommands(mPath, blurStrength, transparentPaint.getStrokeWidth()));
break;
case MODE_PAINT:
path_color_stroke_list.add(new DrawCommands(mPath, mPaint.getColor(), mPaint.getStrokeWidth()));
break;
default:
break;
}
}
...
private void touch_up(MotionEvent event) {
mPath.lineTo(mX, mY);
}
So I would like to implement an undo button for a drawing app I am working on for android. My current idea is to put the current draw path into a list of paths on MotionEvent.ACTION_UP. In onDraw(), simply draw everything that is in the list of paths. When the user presses undo, you remove the last drawn path from the list of paths and call invalidate(), forcing onDraw() to be called, which will draw everything in the list of paths. Since we removed the previous path from the list, that path should not be drawn and therefore should be "undone".
The problem I am having is the path never seems to actually be undone. It seems like the logic in my head is correct, but this implementation does not work correctly. Any help will be greatly appreciated.
Here is my code:
DrawingView.java:
Instance variables (to clarify following methods):
private Context context;
private Path drawPath;
private Paint drawPaint;
private Paint canvasPaint;
private Canvas drawCanvas;
private Bitmap canvasBitmap;
private int previousPaintColor;
private int paintColor;
private float brushSize;
private float eraserSize;
private float lastBrushSize;
private boolean isErasing = false;
private List<Path> moveList = null;
private List<Path> undoList = null;
private List<Path> currentMoveList = null;
Called from constructor:
private void setupDrawing() {
drawPath = new Path();
drawPaint = new Paint();
brushSize = getResources().getInteger(R.integer.default_brush_size);
lastBrushSize = brushSize;
drawPaint.setColor(paintColor);
drawPaint.setAntiAlias(true);
drawPaint.setStrokeWidth(brushSize);
drawPaint.setStyle(Paint.Style.STROKE);
drawPaint.setStrokeJoin(Paint.Join.ROUND);
drawPaint.setStrokeCap(Paint.Cap.ROUND);
canvasPaint = new Paint(Paint.DITHER_FLAG);
}
onDraw:
#Override
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
for (Path path : currentMoveList) {
canvas.drawPath(path, drawPaint);
}
for (Path path : moveList) {
canvas.drawPath(path, drawPaint);
}
}
onTouchEvent:
#Override
public boolean onTouchEvent(MotionEvent event) {
float touchX = event.getX();
float touchY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
drawPath.moveTo(touchX, touchY);
break;
case MotionEvent.ACTION_MOVE:
drawPath.lineTo(touchX, touchY);
currentMoveList.add(drawPath);
break;
case MotionEvent.ACTION_UP:
drawPath.lineTo(touchX, touchY);
drawCanvas.drawPath(drawPath, drawPaint);
moveList.add(drawPath);
drawPath = new Path();
currentMoveList.clear();
break;
default:
return false;
}
invalidate();
return true;
}
undo() :
public void undo() {
if (moveList.size() > 0) {
undoList.add(moveList.remove(moveList.size() - 1));
invalidate();
}
}
Regards,
Kyle.
After some trial and error, here is the fix:
Remove this line of code:
canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
from onDraw() method and everything works perfectly :)
**Undo your onDraw override method ((TESTED)) **
#Override
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
canvas.drawPath(drawPath, drawPaint);
for (Path path : currentMoveList) {
canvas.drawPath(path, drawPaint);
}
for (Path path : moveList) {
canvas.drawPath(path, drawPaint);
}
super.onDraw(canvas);
}