I'm developing paint app the problem is when i choose color and paint and then pick different color the whole paint color changes to the new color can any one tell why this is happening and how to solve this ? and how to add eraser to this?
imageview DrawView here :
public class DrawView extends ImageView {
private ArrayList<Point> mTouches;
int paintColor;
public int setcolor(int a){
paintColor=a;
return paintColor;}
// Java constructor
public DrawView(Context context) {
super(context);
init();}
// XML constructor
public DrawView(Context context, AttributeSet attrs) {
super(context, attrs);
init();}
private void init() {
mTouches = new ArrayList<Point>();}
#Override
public boolean onTouchEvent(MotionEvent event) {
// Capture a reference to each touch for drawing
float touchX = event.getX();
float touchY = event.getY();
mTouches.add(new Point(Math.round(touchX), Math.round(touchY)));
return super.onTouchEvent(event);}
#Override
protected void onDraw(Canvas c) {
// Let the image be drawn first
super.onDraw(c);
// Draw your custom points here
Paint paint = new Paint();
paint.setColor(paintColor);
paint.setAntiAlias(true);
paint.setStrokeWidth(5);
paint.setStyle(Paint.Style.FILL);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
for (Point p : mTouches) {
c.drawCircle( p.x, p.y,15,paint);}} }
in my main:
im.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
DrawView mcustomImagview = (DrawView) v;
mcustomImagview.setcolor(color);
mcustomImagview.invalidate();
if (v.onTouchEvent(event)) {
// Do something with event.getX(), event.getY() }
return true;}})
Every time onDraw is called, the entire canvas is redraw. As you store only one paintColor in your custom class, only the last selected one is used.
You need to store the color together with the associated Point. Then when you loop throw your mTouches array, you change the color for the color of the current Point.
Btw the Paint object can be updated, so you don't need to create it every time as it's a bad practice to create new objects in onDraw.
EDIT
public class DrawView extends android.support.v7.widget.AppCompatImageView {
private ArrayList<ColouredPoint> mTouches;
// Current used colour
private int mCurrColour;
private Paint mPaint;
public void setColor(int colour) {
mCurrColour = colour;
}
public DrawView(Context context) {
super(context);
init();
}
// XML constructor
public DrawView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
mTouches = new ArrayList<>();
mPaint = new Paint();
mPaint.setColor(mCurrColour);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(5);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
// Capture a reference to each touch for drawing
float touchX = event.getX();
float touchY = event.getY();
mTouches.add(new ColouredPoint(Math.round(touchX), Math.round(touchY), mCurrColour));
return super.onTouchEvent(event);
}
#Override
protected void onDraw(Canvas c) {
// Let the image be drawn first
super.onDraw(c);
// Draw your custom points here
for (ColouredPoint p : mTouches) {
mPaint.setColor(p.colour);
c.drawCircle(p.x, p.y, 15, mPaint);
}
}
/**
* Class to store the coordinate and the colour of the point.
*/
private class ColouredPoint {
int x;
int y;
int colour;
public ColouredPoint(int x, int y, int colour) {
this.x = x;
this.y = y;
this.colour = colour;
}
}
}
Related
I'm making an alphabet draw app where users (normally kids) will be able to fill color in the alphabet images in the app...
I've made the app which enabled me to draw anything on the canvas using the code given below...
Main Activity:
public class MainActivity extends Activity {
SimpleDrawingView view;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
view = new SimpleDrawingView (this);
setContentView(view);
view.setBackgroundResource(R.drawable.a1);
}
}
SimpleDrawingView class which actually draws on the view:
public class SimpleDrawingView extends View
{
private final int paintColor = Color.BLACK;
// defines paint and canvas
private Paint drawPaint;
// stores next circle
private Path path = new Path();
public SimpleDrawingView(Context context) {
super(context);
setFocusable(true);
setFocusableInTouchMode(true);
setupPaint();
}
private void setupPaint() {
// Setup paint with color and stroke styles
drawPaint = new Paint();
drawPaint.setColor(paintColor);
drawPaint.setAntiAlias(true);
drawPaint.setStrokeWidth(15);
drawPaint.setStyle(Paint.Style.STROKE);
drawPaint.setStrokeJoin(Paint.Join.ROUND);
drawPaint.setStrokeCap(Paint.Cap.ROUND);
}
#Override protected void onDraw(Canvas canvas) {
canvas.drawPath(path, drawPaint);
}
#Override public boolean onTouchEvent(MotionEvent event) {
float pointX = event.getX();
float pointY = event.getY();
// Checks for the event that occurs
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
path.moveTo(pointX, pointY);
return true;
case MotionEvent.ACTION_MOVE:
path.lineTo(pointX, pointY);
break;
default: return false; }
// Force a view to draw again
postInvalidate();
return true;
}
}
It let me fill in the alphabet but it draws on the whole screen/view. I want to let the user fill/draw on the alphabet only and not on the entire screen.
Can someone tell me what to do or atleast some guidelines to start it ?
I'm searching how I can change style of pen. I would like to get something like array of pixels. Not a stroke. When user will touch the screen, on the canvas appear a black square.
My code:
public class DrawingView extends View {
private Bitmap cacheBitmap;
private Canvas cacheCanvas;
private Paint paint;
private Paint BitmapPaint;
private Path path;
private int height;
private int width;
/** Last saved X-coordinate */
private float pX;
/** Last saved Y-coordinate*/
private float pY;
private int counterxy=0;
/** Initial color */
private int paintColor = Color.BLACK;
private static Paint.Style paintStyle = Paint.Style.STROKE;
/** Paint Point size */
private static int paintWidth = 8;
private Canvas canvas;
private DrawingViewInterface mInterface;
/** get the height and width */
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
height = h;
width = w;
init();
}
public void setViewListener(DrawingViewInterface interface1) {
mInterface = interface1;
}
private void init(){
cacheBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
cacheCanvas = new Canvas(cacheBitmap);
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
path = new Path();
BitmapPaint = new Paint();
updatePaint();
}
private void updatePaint(){
paint.setColor(paintColor);
paint.setStyle(paintStyle);
paint.setStrokeWidth(paintWidth);
}
public DrawingView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public DrawingView(Context context){
super(context);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
path.moveTo(event.getX(), event.getY());
pX = event.getX();
pY = event.getY();
break;
case MotionEvent.ACTION_MOVE:
path.quadTo(pX, pY, event.getX(), event.getY());
pX = event.getX();
pY = event.getY();
counterxy++;
mInterface.onActionFinished(pX, pY, counterxy); // Wyslanie wspolrzednych do MainActivity
break;
case MotionEvent.ACTION_UP:
cacheCanvas.drawPath(path, paint);
path.reset();
break;
}
invalidate();
return true;
}
#Override
protected void onDraw(Canvas canvas) {
this.canvas = canvas;
BitmapPaint = new Paint();
canvas.drawBitmap(cacheBitmap, 0,0, BitmapPaint);
canvas.drawPath(path, paint);
}
}
Paint.setStrokeWidth may be enough if all you want is a rectangle. Otherwise you may want setPathEffect(), although for something complex you may need to create your own PathEffect.
So I made a painting class which has got an ontouchevent method where i set the xpos of my rectangle to the xpos of the touch event but the rectangle isnt moving! how can I correct that?
rectangle class:
public class myRectangle{
public int xpos;
public int ypos;
public int size;
private Paint paint;
public myRectangle(){
size = 40;
paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.BLUE);
}
public void drawRectangle(Canvas c,int x, int y){
c.drawRect(x, y, size, size, paint);
}
}
and my paint view:
public class Painting extends View {
myRectangle player;
float x;
float y;
public Painting(Context context) {
super(context);
player = new myRectangle();
// TODO Auto-generated constructor stub
}
#Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
x = event.getX();
y = event.getY();
String s = Float.toString(event.getX());
String c = Float.toString(event.getX());
Log.d(c, s);
return super.onTouchEvent(event);
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
player.drawRectangle(canvas, (int)x, (int)y);
}
}
I can also post the main activity if needed
the only thing missing is the invalidate() call in your onTouchEvent. invalidate() schedule a draw
I have a simple app that draws a line as you move your finger around the screen.
I want to change it so instead of it drawing behind the finger, a circle follows directly below where you have touched. As you move your finger along the screen the circle should follow. It should not leave a path behind it.
The circle should appear where the finger is when the screen is touched and disappear when the finger is lifted.
MainActivity:
package com.example.dot2;
import android.app.Activity;
import android.os.Bundle;
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new SingleTouchEventListener(this, null));
}
}
SingleTouchEventListener:
package com.example.dot2;
import...
public class SingleTouchEventListener extends View {
private Paint paint = new Paint();
private Path path = new Path();
private Paint mPaint;
public SingleTouchEventListener(Context context, AttributeSet attrs) {
super(context, attrs);
paint.setAntiAlias(true);
paint.setStrokeWidth(6f);
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
}
#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;
case MotionEvent.ACTION_UP:
// nothing to do
break;
default:
return false;
}
// Schedules a repaint.
invalidate();
return true;
}
}
Thanks
I actually found code which did most of what I needed and added the rest...
Here's the code:
public class drawingView extends View implements OnTouchListener{
static int x,y,r=255,g=255,b=255;
final static int radius=30;
Paint paint;
public drawingView(Context context)
{
super(context);
paint=new Paint();
paint.setAntiAlias(true);
paint.setARGB(255, r, g, b);
setFocusable(true);
this.setOnTouchListener(this);
}
public void onDraw(Canvas canvas)
{
paint.setARGB(255, r, g, b);
//drawing the circle
canvas.drawCircle(x,y,radius,paint);
}
public boolean onTouch(View view,MotionEvent event)
{
x=(int)event.getX()-(radius/2); //logic to plot the circle in exact touch place
y=(int)event.getY()-(radius/2);
//System.out.println("X,Y:"+"x"+","+y);
randColor();
invalidate();
if (event.getAction() == MotionEvent.ACTION_UP) {
paint.setARGB(12, r, g, b);
}
return true;
}
public void randColor()
{
//r=(int)(Math.random()*255);
//g=(int)(Math.random()*255);
//b=(int)(Math.random()*255);
r=1;
g=2;
b=3;
//Toast.makeText(c, "r,g,b="+r+","+g+","+b,Toast.LENGTH_SHORT).show();
}
public void dissColor(){
r=255;
g=255;
b=255;
}
}
How can I extract a Bitmap object out of my onDraw() routine in my CustomView?
Here is my code:
public class DrawView extends View {
private Paint paint = new Paint();
private Point point;
private LinkedList<Point> listaPontos;
private static Context context;
class Point {
public Point(float x, float y) {
this.x = x;
this.y = y;
}
float x = 0;
float y = 0;
}
public DrawView(Context context) {
super(context);
this.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));
this.context = context;
paint.setColor(Color.YELLOW);
this.listaPontos = new LinkedList<Point>();
}
#Override
public void onDraw(Canvas canvas) {
if(listaPontos.size() != 0){
for(Point point : listaPontos){
canvas.drawCircle(point.x, point.y, 25, paint);
}
}
calculateAmount(canvas);
}
private void calculateAmount(Canvas canvas) {
LinkedList<Integer> colors = new LinkedList<Integer>();
for(int i = 0 ; i != canvas.getWidth(); i++)
{
for(int j = 0; j != canvas.getHeight(); j++){
int color = BITMAP.getPixel(i,j); //How can I get the bitmap generated on onDraw ?
colors.add(color);
}
}
int yellow = 0;
int white = 0;
for(Integer cor : colors) {
if(cor == Color.WHITE) {
white++;
}
if(cor == Color.YELLOW) {
yellow++;
}
}
}
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
listaPontos.add(new Point(event.getX(), event.getY()));
break;
}
invalidate();
return true;
}
}
Thanks alot in advance ;)
EDIT: The bitmap thing is to calculate each pixel color, how can I add a background image to my DrawView ? I tested this.setBackgroundResource(R.drawable.a); at constructor but didn't work, thanks again ;)
There is no way to extract a Bitmap out of a Canvas. At least not directly.
However, it is possible to draw on a Bitmap with the Canvas and then use the Bitmap.
Bitmap mDrawBitmap;
Canvas mBitmapCanvas;
Paint drawPaint = new Paint();
#Override
public void onDraw(Canvas canvas) {
drawPaint.setColor(Color.RED);
if (mDrawBitmap == null) {
mDrawBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
mBitmapCanvas = new Canvas(mDrawBitmap);
}
// clear previously drawn stuff
mBitmapCanvas.drawColor(Color.WHITE);
// draw on the btimapCanvas
mBitmapCanvas.drawStuff(...);
//... and more
// after drawing with the bitmapcanvas,
//all drawn information is stored in the Bitmap
// draw everything to the screen
canvas.drawBitmap(mDrawBitmap, 0, 0, drawPaint);
}
After the onDraw() method has finished, all drawn information will be drawn on the screen (by calling canvas.drawBitmap(...), and also be stored in your Bitmap object (because all draw operations have been done on the Canvas that was created with the Bitmap).