I'm writing Android app for Arduino motor shield (Nucleo boards actually, but it does not matter), and I display the distance, measured by ultrasonic sonar sensor, as dots on the screen. On each update from Arduino (I send a packet with servo angle and sonar distance in cm), I draw a new Point. The problem is that sometimes for the same servo angle I have many sonar distances, and if I draw all of them, it gets messy.
For each servo angle (X-axis), I want to draw only the latest measurement of sonar distance (Y-axis).
Here is the plot with many points for the same servo angle.
Here is the code I use to draw all incoming points on a view's canvas: https://github.com/dizcza/FunduMotoJoystick/blob/b224e80d59fe11c0252dce7f78aca995f67a7d65/app/src/main/java/de/kai_morich/fundu_moto_joystick/SonarView.java
public class SonarView extends View {
private static final int POINT_RADIUS = 10;
private final Paint mPaint = new Paint();
private final Path mPath = new Path();
public SonarView(Context context, AttributeSet attributeSet) {
super(context, attributeSet);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.BLACK);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(mPath, mPaint);
}
public void drawCircle(float x, float y) {
mPath.addCircle(x, y, POINT_RADIUS, Path.Direction.CW);
invalidate();
}
public void clear() {
mPath.reset();
}
}
I called the topic "Canvas draw path with dynamic paint color" because if I can explicitly provide the color for each added item (circle) in the Path, I'd draw a white rectangle each time to cover the space below each new point.
Create a method which will return paint object as
public Paint getCustomPaint(int color){
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(color);
return paint;
}
and call it as canvas.drawPath(mPath, getCustomPaint(randomColor));
Edit:
As per your requirements, you need to maintain an ArrayList(add it on top) as,
private ArrayList<Point> mPointsList = new ArrayList<>();
private ArrayList<Point> mWhitePointsList = new ArrayList<>();
private final Path mWhitePath = new Path();
then add a new method as,
private boolean isPointPresent(float x, float y) {
Point lPoint = new Point((int)x, (int)y);
boolean isFound = false;
for (Point point : mPointsList){
if(point.x == x){
isFound = true;
mPointsList.remove(point);
mWhitePointsList.add(point);
}
}
if(isFound) {
mPointsList.add(lPoint);
return true;
}
mPointsList.add(lPoint);
return false;
}
also, make the changes in the drawCircle method as,
public void drawCircle(float x, float y) {
if(isPointPresent(x, y)) {
for(Point point : mWhitePointsList){
mWhitePath.addCircle(point.x, point.y, POINT_RADIUS, Path.Direction.CW );
mWhitePointsList.remove(point);
}
}
mPath.addCircle(x, y, POINT_RADIUS, Path.Direction.CW);
invalidate();
}
Related
I managed to create my own custom path drawing application and it is as follows
public class CanvasView extends View {
Context context;
HashMap<Integer,PathWrapper> locToPath=new HashMap<>();
ArrayList<PathWrapper> activePaths=new ArrayList<>();
CoMingleAndroidRuntime<Screenshare> screenRuntime;
boolean inited=false;
Integer myLocation;
public CanvasView(Context context,AttributeSet attr) {
super(context, attr);
setWillNotDraw(false);
this.context = context;
}
public void init(CoMingleAndroidRuntime<Screenshare> screenRuntime){
inited=true;
this.screenRuntime=screenRuntime;
this.myLocation=screenRuntime.getLocation();
addPath(myLocation);
invalidate();
}
public void addPath(int Location){
Paint mPaint=new Paint();
mPaint.setColor(Color.BLACK);
mPaint.setAlpha(195);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeWidth(50f);
locToPath.put(Location, new PathWrapper(new Path(), mPaint, Location));
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for(PathWrapper path:activePaths){
canvas.drawPath(path.path, path.paint);
}
invalidate();
}
public void respondActionColorChanged(int R,int G,int B){
locToPath.get(myLocation).paint.setColor(Color.rgb(R, G, B));
}
public void respondActionColorChanged(int loc,int R,int G,int B){
locToPath.get(loc).paint.setColor(Color.rgb(R, G, B));
}
public void respondActionDown(final Integer loc, int xTouch,int yTouch){
activePaths.add(locToPath.get(loc));
locToPath.get(loc).path.moveTo(xTouch, yTouch);
locToPath.get(loc).lastPoint = new Point(xTouch, yTouch);
if(loc==myLocation){
screenRuntime.getRewriteMachine().addActionDown(xTouch, yTouch);
}
}
public void respondActionMove(final Integer loc,int xTouch,int yTouch){
float dx = Math.abs(xTouch - locToPath.get(loc).lastPoint.x);
float dy = Math.abs(yTouch - locToPath.get(loc).lastPoint.y);
if (dx >= 5 || dy >= 5) {
locToPath.get(loc).path.quadTo(locToPath.get(loc).lastPoint.x, locToPath.get(loc).lastPoint.y, (xTouch + locToPath.get(loc).lastPoint.x) / 2, (yTouch + locToPath.get(loc).lastPoint.y) / 2);
locToPath.get(loc).lastPoint = new Point(xTouch, yTouch);
if(loc==myLocation){
screenRuntime.getRewriteMachine().addActionMove(xTouch, yTouch);
}
}
}
public void respondActionUp(final Integer loc,int x,int y){
locToPath.get(loc).path.lineTo(locToPath.get(loc).lastPoint.x, locToPath.get(loc).lastPoint.y);
if(loc==myLocation){
screenRuntime.getRewriteMachine().addActionUp(x, y);
}
activePaths.remove(locToPath.get(loc));
locToPath.get(loc).path.reset();
}
#Override
public boolean onTouchEvent(MotionEvent event) {
if(inited) {
int xTouch;
int yTouch;
xTouch = (int) event.getX(0);
yTouch = (int) event.getY(0);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
respondActionDown(myLocation,xTouch,yTouch);
break;
case MotionEvent.ACTION_MOVE:
respondActionMove(myLocation, xTouch,yTouch);
break;
case MotionEvent.ACTION_UP:
respondActionUp(myLocation, xTouch,yTouch);
break;
}
return true;
}
return false;
}
This code works perfectly for my app (Ignore the location stuff and the runtime and rewriteMachine stuff).
My question is, I would like to have parts of the path be colored differently, the ultimate goal is that I would like only the last few pixels of the path to be visible and the remainder should have an Alpha of 0, such that when the user draws, he only sees the last few pixels of the path which then slowly turns invisible. Is this possible? and if so how would I do it?
Thanks.
Instead of adding points to a path, create a list of paths, and every time add a new path to the list that has only a small chunk that starts at the end point of the previous path, and has only one other point (end-point). Then you can draw each path with a different color:
Paint mPaint=new Paint();
mPaint.setColor(Color.BLACK);
//rest of mPaint...
canvas.drawPath(path1, mPaint);
mPaint=new Paint();
mPaint.setColor(Color.BLUE);
//rest of mPaint...
canvas.drawPath(path2, mPaint);
Note that path1 is different from path2, and more importantly you create a new mPaint for each color. I'm not sure if it would work if you just would call mPaint.setColor(Color.BLUE) on the previously created and used paint.
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);
}
}
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
I want to add border for view, border width, color, radius can be set by user. So I try to draw a rect for it. When I use drawRoundRect to draw, the line at the corner is not smooth, it is thicker than the other places too. I don't know how to fix it. Please give me some instruction. Is there any other way to do it? I have to use code to draw it.
Thanks very much.
attached code: red corner of rect.
past code:
public class MPCTextView extends TextView {
// private Context context;
private final static String TAG = "MPCTextView";
public final static int DEFAULT_BACKGROUND_COLOR = Color
.parseColor("#28FF28");
public final static int DEFAULT_BORDER_COLOR = Color.parseColor("#FF0000");
public int mBoderWidth = 2;
public int mBoderColor;
public int mBoderRadius = 20;
public int mbackgroundColor;
public boolean isHaveBorder = true;
public boolean isHaveBackground = true;
RectF mRectF = new RectF();
Rect mRec = new Rect();
Paint mPaint = new Paint();
public MPCTextView(Context context) {
super(context);
// this.context = context;
}
#Override
protected void onDraw(Canvas canvas) {
// try to add a boder for this view.
canvas.getClipBounds(mRec);
// draw background
// canvas.drawColor(mbackgroundColor);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(DEFAULT_BACKGROUND_COLOR);
if (mBoderRadius > 0) {
mRectF.set(mRec);
canvas.drawRoundRect(mRectF, mBoderRadius, mBoderRadius, mPaint);
} else {
canvas.drawRect(mRec, mPaint);
}
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(mBoderWidth);
mPaint.setColor(DEFAULT_BORDER_COLOR);
mPaint.setAntiAlias(true);
if (mBoderRadius > 0) {
mRectF.set(mRec);
canvas.drawRoundRect(mRectF, mBoderRadius, mBoderRadius, mPaint);
} else {
canvas.drawRect(mRec, mPaint);
}
super.onDraw(canvas);
}
The core of the problem is the padding, not AntiAliasing. The corner is not thicker, rather, it is the normal width. But, the straight line is clipped.
If you set the stroke width to 2, the really straight line width is 1 because the stroke is rectangular and the axis is the line x = 0. This means the rectangle is (left=0,up=-1,right=length,bottom=1), but the up -1 is outside of the canvas, so it will not be painted. And the corner is full width, because it is in the canvas.
So, you just to need set the padding.
Here is the code to make the rounded rect draw completely inside the canvas:
float pad = 1f;
mRectF.set(new RectF(mRec.left + pad, mRec.top + pad, mRec.right - pad, mRec.bottom - pad));
canvas.drawRoundRect(mRectF, mBoderRadius, mBoderRadius, mPaint);
Set the antialias to the paint you are using to draw the red rectangle . For instance
mPaint.setAntiAlias(true);
I want this code to be help you.
public int mBoderWidth = 2;
public int mBoderColor;
public int mBoderRadius = 20;
public int mbackgroundColor;
public boolean isHaveBorder = true;
public boolean isHaveBackground = true;
RectF mRectF = new RectF();
Rect mRec = new Rect();
Paint mPaint = new Paint();
public MPCTextView(Context context) {
super(context);
// this.context = context;
}
#Override
protected void onDraw(Canvas canvas) {
// try to add a boder for this view.
canvas.getClipBounds(mRec);
// draw background
// canvas.drawColor(mbackgroundColor);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(DEFAULT_BACKGROUND_COLOR);
if (mBoderRadius > 0) {
mRectF.set(mRec);
canvas.drawRoundRect(mRectF, mBoderRadius, mBoderRadius, mPaint);
} else {
canvas.drawRect(mRec, mPaint);
}
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(mBoderWidth);
mPaint.setColor(DEFAULT_BORDER_COLOR);
mPaint.setAntiAlias(true);
if (mBoderRadius > 0) {
mRectF.set(mRec);
///////////// look at this code
mRectF.left += mBorderWidth/2;
mRectF.right -= mBorderWidth/2;
mRectF.top += mBorderWidth/2;
mRectF.bottom -= mBorderWidth/2;
canvas.drawRoundRect(mRectF, mBoderRadius, mBoderRadius, mPaint);
mRectF.left -= mBorderWidth/2;
mRectF.right += mBorderWidth/2;
mRectF.top -= mBorderWidth/2;
mRectF.bottom += mBorderWidth/2;
} else {
canvas.drawRect(mRec, mPaint);
}
super.onDraw(canvas);
}
I know I am answering this question very late but it may help others modify your code like below will work
Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
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.