I want to draw curved line in android studio without ArrayList.
I know how to draw with Arraylist, but I just want to know without Arraylist.
Anyhow, I want to draw curved line a set length without use Arraylist. How can I do this?
Here is my code but it doesn't work well.
package com.example.final_practice3;
import...
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new MyView(this));
}
private class MyView extends View {
private int count = 0;
private int[][] points = new int[500][2]; //point x, y in array to 500size
public MyView(Context context) {
super(context);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//first point
points[0][0] = (int) getX();
points[0][1] = (int) getY();
break;
case MotionEvent.ACTION_MOVE:
//When finger is moving, save to points array
for (int i = 1; i < 500; i++) {
points[i][0] = (int) event.getX();
points[i][1] = (int) event.getY();
count++;
}
break;
case MotionEvent.ACTION_UP:
//When finger is up, draw the curved line
this.invalidate();
break;
}
return true;
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(5);
paint.setAntiAlias(true);
//draw curved line with points array
for (int i = 1; i < 500; i++) {
canvas.drawLine(points[i - 1][0], points[i - 1][1], points[i][0],points[i][1],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 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'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 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.
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);
}
}