I am working on a drawing board app. I would like to implement a "pen" that draw on the image.
And so far I have create a custom imageview:
public class CustomDraw extends ImageView {
private int color = Color.BLACK;
private float width = 4f;
private List<Holder> holderList = new ArrayList<Holder>();
private class Holder {
Path path;
Paint paint;
Holder(int color, float width) {
path = new Path();
paint = new Paint();
paint.setAntiAlias(true);
paint.setStrokeWidth(width);
paint.setColor(color);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
}
}
public CustomDraw(Context context) {
super(context);
init();
}
public CustomDraw(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CustomDraw(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
holderList.add(new Holder(color, width));
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (Holder holder : holderList) {
canvas.drawPath(holder.path, holder.paint);
}
}
#Override
public boolean onTouchEvent(MotionEvent event) {
float eventX = event.getX();
float eventY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
holderList.add(new Holder(color,width));
holderList.get(holderList.size() - 1).path.moveTo(eventX, eventY);
return true;
case MotionEvent.ACTION_MOVE:
holderList.get(holderList.size() - 1).path.lineTo(eventX, eventY);
break;
case MotionEvent.ACTION_UP:
break;
default:
return false;
}
invalidate();
return true;
}
public void resetPaths() {
for (Holder holder : holderList) {
holder.path.reset();
}
invalidate();
}
public void setBrushColor(int color) {
this.color = color;
}
public void setWidth(float width) {
this.width = width;
}
}
The problem is , how can I draw on the image actually but not the imageview? That means, I should not able to draw outside the image, and when I zoom the view, the content should be zoom accordingly. I have found and attempt using the extend drawable but it seems I can not draw at run time.
Thanks
You should possibly use SurfaceView instead. It is more advanced compared to ImageView.
Refer to this for drawing: http://examples.javacodegeeks.com/android/core/ui/surfaceview/android-surfaceview-example/
This is for zoom:
http://android-innovation.blogspot.co.nz/2013/07/how-to-implement-pinch-and-pan-zoom-on.html
Related
I have a code to draw circles when the user touches the screen, it works perfectly until I add an ImageResource, when I do this the circle is not drawn anymore.
I need to use an ImageResource because the circle will be drawn around some objects in this image, BackgroundResource might be a good one but it distorts the image.
The class:
public class DragRectView extends TouchImageView {
private Paint mRectPaint;
private int mStartX = 0;
private int mStartY = 0;
private int mEndX = 0;
private int mEndY = 0;
private boolean mDrawCircle = false;
private TextPaint mTextPaint = null;
private OnUpCallback mCallback = null;
public interface OnUpCallback {
void onRectFinished(Rect rect);
}
public DragRectView(final Context context) {
super(context);
init();
}
public DragRectView(final Context context, final AttributeSet attrs) {
super(context, attrs);
init();
}
public DragRectView(final Context context, final AttributeSet attrs,
final int defStyle) {
super(context, attrs, defStyle);
init();
}
/**
* Sets callback for up
*
* #param callback {#link OnUpCallback}
*/
public void setOnUpCallback(OnUpCallback callback) {
mCallback = callback;
}
/**
* Inits internal data
*/
private void init() {
mRectPaint = new Paint();
mRectPaint.setColor(getContext().getResources().getColor(android.R.color.holo_green_light));
mRectPaint.setStyle(Paint.Style.STROKE);
mRectPaint.setStrokeWidth(5); // TODO: should take from resources
mTextPaint = new TextPaint();
mTextPaint.setColor(getContext().getResources().getColor(android.R.color.holo_green_light));
mTextPaint.setTextSize(20);
}
#Override
public boolean onTouchEvent(final MotionEvent event) {
// TODO: be aware of multi-touches
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mDrawCircle = false;
mStartX = (int) event.getX();
mStartY = (int) event.getY();
invalidate();
break;
case MotionEvent.ACTION_MOVE:
final int x = (int) event.getX();
final int y = (int) event.getY();
if (!mDrawCircle || Math.abs(x - mEndX) > 5 || Math.abs(y - mEndY) > 5) {
mEndX = x;
mEndY = y;
invalidate();
}
mDrawCircle = true;
break;
case MotionEvent.ACTION_UP:
if (mCallback != null) {
mCallback.onRectFinished(new Rect(Math.min(mStartX, mEndX), Math.min(mStartY, mEndY),
Math.max(mEndX, mStartX), Math.max(mStartY, mEndY)));
}
invalidate();
break;
default:
break;
}
return true;
}
#Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
if (mDrawCircle) {
canvas.drawCircle(mStartX,mStartY, (float) Math.sqrt(Math.pow(mEndX-mStartX,2)+Math.pow(mEndY-mStartY,2)),mRectPaint);
}
}
My main activity is:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
DragRectView dragRectView = findViewById(R.id.dragView);
//dragRectView.setImageResource(R.drawable.img);
dragRectView.setOnUpCallback(new DragRectView.OnUpCallback() {
#Override
public void onRectFinished(Rect rect) {
System.out.println(rect);
}
});
}
Does anyone know how can I draw something in a view with an image set?
When you set image resource then it sets it as the content of your ImageView, your DragRectView extends from TouchImageView (which extends from what is not clear).
You can decode bitmap from your image resource using BitmapFactory in the constructor of your view.
Bitmap imgRes = BitmapFactory.decodeResource(getResources(), R.drawable.img);
and draw bitmap in onDraw() like this
canvas.drawBitmap(imgRes, xPosition, yPosition, null);
I am working on my uni project where I have to mark the position in an image(human body in this case) that a user touches upon.
I am already having the X and Y coordinates of the position where a user has clicked by using the following code
mbody.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent e) {
if (e.getAction() == MotionEvent.ACTION_DOWN) {
Toast.makeText(getApplicationContext(),String.valueOf(e.getX())+","+
String.valueOf(e.getY()),Toast.LENGTH_LONG).show();
return true;
}
return false;
}
});
My question is now that I already have the coordinates, how can I put a marker in that position of the imageview so that I can obtain the resultant image as given below
as #raldone01 mentioned
Create a custom image view. Override the onTouchEvent. Store the position. Invalidate the view. Override the onDraw and use the stored position to draw a circle on the canvas at the desired pos
ie, replace your ImageView with below View
public class MyIV extends AppCompatImageView {
private int x = 0;
private int y = 0;
private Paint paint = new Paint();
private float radius = 20;
public MyIV(Context context) {
super(context);
init();
}
public MyIV(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public MyIV(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init(){
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(x,y,radius,paint);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
x = (int)event.getX();
y = (int)event.getY();
invalidate();
break;
case MotionEvent.ACTION_MOVE:
x = (int)event.getX();
y = (int)event.getY();
invalidate();
break;
case MotionEvent.ACTION_UP:
x = (int)event.getX();
y = (int)event.getY();
invalidate();
break;
}
return true;
}
}
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'm trying to draw circle that follow my finger over the screen.
it's done but if I move finger fast, circle move isn't smooth.
customview.java
public customview(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
paint = new Paint();
paint.setAntiAlias(true);
paint.setARGB(255, 255, 255, 255);
}
Context context;
public static float x=100, y=100;
private Paint paint;
public static boolean drew = false;
RadialGradient radialGradient;
#Override
protected void onDraw(Canvas canvas) {
if(drew){
int ringColors[] = { 0xFF15afda, 0x0015afda };
radialGradient = new RadialGradient(x, y,100, ringColors, null,
TileMode.CLAMP);
paint.setShader(radialGradient);
canvas.drawCircle(x, y, 200, paint);
}
}
public static void setDrew(boolean drew){
customview.drew = drew;
}
public static void setXT(float x){
customview.x = x;
}
public static void setYT(float y){
customview.y = y;
}
touch event( in touch event I change x and y that shows the position of finger and set invalidate until view redraw a circle in new position )
#Override
public boolean onTouch(View v, MotionEvent event) {
dispatchGenericMotionEvent(event);
// TODO Auto-generated method stub
MotionEvent ev = event;
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
customview.setXT(ev.getRawX());
customview.setYT(ev.getRawY());
customview.setDrew(true);
(findViewById(R.id.touch)).invalidate();
break;
case MotionEvent.ACTION_UP:
customview.setDrew(false);
(findViewById(R.id.customview)).invalidate();
break;
default:
break;
}
return true;
}
How to Draw a rectangle (Using Shape Resources) at the touched point(like coordinates 28,87). I have Created a shape Like This.
android:shape="rectangle" >
<solid
android:color="#color/transparent"/>
<stroke
android:width="3dp"
android:color="#color/green" />
This rectangle I want to Draw at the touch point on the image.
You can draw a shape on a view in the onDraw() method of that view. There is no method available for drawing a shape drawable on a view canvas.
And you don't have to use a shape drawable for drawing a rectangle. You can draw a rectangle using canvas.drawRect() method.
Here is a code for this:
public class MyView extends View{
float x,y;
Bitmap bmp;
Paint mPaint;
float width = 100.0f;
float height = 50.0f;
boolean touched = false;
public MyView (Context context)
{
super(context);
x = y = 0;
mPaint = new Paint();
mPaint.setColor(Color.BLUE);
mPaint.setStyle(Style.STROKE);
}
#Override
protected void onDraw (Canvas canvas)
{
canvas.drawColor(Color.WHITE);
if(touched)
{
canvas.drawRect(x, y, x+width, y+height, mPaint);
}
}
#Override
public boolean onTouchEvent (MotionEvent event)
{
touched = true;
//getting the touched x and y position
x = event.getX();
y = event.getY();
invalidate();
return true;
}
}
#kam' solution needs an update I guess. Everything that was in the constructor must be in init() method and the constructors must be overwritten 3 times.
public class MyView extends View {
private float xDown = 0,yDown = 0, xUp = 0, yUp = 0;
Paint mPaint;
boolean touched = false;
public MyView(Context context) {
super(context);
init(context);
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
private void init(Context context) {
mPaint = new Paint();
mPaint.setColor(Color.BLUE);
mPaint.setStyle(Paint.Style.STROKE);
}
#Override
protected void onDraw (Canvas canvas) {
canvas.drawColor(Color.TRANSPARENT);
if(touched) {
canvas.drawRect(xDown, yDown, xUp, yUp, mPaint);
}
}
#Override
public boolean onTouchEvent (MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
xDown = event.getX();
yDown = event.getY();
xUp = 0;
yUp = 0;
break;
case MotionEvent.ACTION_MOVE:
xUp = event.getX();
yUp = event.getY();
touched = true;
break;
case MotionEvent.ACTION_UP:
xUp = event.getX();
yUp = event.getY();
touched = true;
break;
}
invalidate();
return true;
}
}