I have to draw text annotations on Image. It should also have choice of moving the text over the Image. Is it possible to move the text by using the Canvas? I searched google and found a suggestion to use a TextView on ImageView and take a screenshot. But when I move the TextView, it is not proper. I mean if I touch the textview, then it is moving somewhere, it is not being exactly below the finger.
One way to do this, is to create a custom view and set a bitmap with Your picture to canvas:
canvas.drawBitmap(yourBitmap, new Rect(0,0,100,100), rectangle, null);
and then draw text:
canvas.drawText("Your Text", textX, textY, paint);
and in the custom view´s onTouch:
public boolean onTouch(View view, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN){
textX = event.getX();
textY = event.getY();
invalidate();
return true;
}
return super.onTouchEvent(event);
}
With that code You are moving only the text. By moving a textView like You described, it depends on the textView´s behavihour how the text is aligned inside the textView.
I cannot test this code for now, but it should give You an idea how to do it
Related
I've spent some time researching this and still haven't found a great answer.
What I would like is to drag an ImageView around the screen. Not a drag and drop, but just an actual drag.
This tutorial has been helpful:
http://code.tutsplus.com/tutorials/android-gesture--mobile-2239
It works perfect, but it's designed to drag a bitmap, not an ImageView. I've tried replacing the Bitmap with an ImageView, but I'm not sure how the Canvas and ImageView interact in the onDraw method. I've tried imageView.draw(canvas); and that doesn't seem to work - the ImageView doesn't show up at all.
Bitmaps are not idea, because you can't add borders to them like you can with an ImageView.
I'd also like to be able to fling the ImageView off the screen.
Any suggestions?
Thanks in advance.
You can create RelativeLayout that match all your screen. In the layout create ImageView.
Set OnTouchListener listener to your relative layout to handle your finger coordinate.
After that you can write something like this :
public boolean onTouch(View v, MotionEvent event)
{
if (event.getAction() == MotionEvent.ACTION_MOVE)
{
move(event);
}
}
public void move(MotionEvent event)
{
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) mImageView.getLayoutParams();
layoutParams.topMargin = event.getY();
layoutParams.leftMargin = event.getX();
mImageView.setLayoutParams(layoutParams);
}
Like using method move(MotionEvent event) you can drag your imageView where you want.
I hope this help you!
I'm working on an app that plots nodes on a map, and each node has edges that are represented by a line between them. I've drawn the edges using Canvas and drawLine(), but it would be useful if the lines themselves could be clickable. By that I mean a method of allowing the user to touch the line or think they're touching the line and an event can trigger. (like display edge info, etc...)
I can't rightly attach a touch event to a line I've drawn with Canvas, so I was thinking of placing ImageViews inbetween the ends of each edge line that's drawn. The ImageView could be a dot so it's clear where the touch event triggers.
Does anyone have any other suggestions? I'm mainly looking for ideas that I've missed. Maybe there's something in the Android API that can help with this that I'm unaware of.
Thanks in advance for any tips!
Use a path to draw the line:
Path linePath;
Paint p;
RectF rectF;
float point1X, point1Y, point2X, point2Y;
// initialize components
// draw the line
linePath.moveTo(point1X, point1Y);
linePath.lineTo(point2X, point2Y);
canvas.drawPath(linePath, p);
linePath.computeBounds(rectF, true);
Override onTouchEvent(MotionEvent):
#Override
public boolean onTouchEvent(MotionEvent event) {
float touchX = event.getX();
float touchY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (rectF.contains(touchX, touchY)) {
// line has been clicked
}
break;
}
return true;
}
I have a view, and I want to move it with finger. I wanted to get the xDelta and yDelta and just translate the matrix of the view (not image view, any view, RelativeLayout for example).
I am wondering how to do that:
Overriding RelativeLayout's onDraw and apply translation matrix there. Is that possible?
I am currently doing it with applying animation on each onTouch event. The animation is with duration 0 and the start/end of x/y is the same (setFillAfter = true). It just puts the view where I want. But isn't that too expensive?
Can't I manipulate the matrix of any view directly through onDraw? I tried something like this:
#Override
protected void onDraw(Canvas canvas) {
if (getDx() != 0 && getDy() != 0) {
m = canvas.getMatrix();
m.postTranslate(dx, dy);
canvas.setMatrix(m);
}
super.onDraw(canvas);
}
But it seems that I am doing it wrong.
If you want to implement drag gesture then you can use onTouchListener and in its MotionEvent.ACTION_MOVE set padding using setPadding to that view.
Here is the sample code:
case MotionEvent.ACTION_MOVE:
yourView.setPadding((int)event.getRawX(), (int)event.getRawY(), 0, 0);
Sample for onTouchListener :-
OnTouchListener drag= new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction() & MotionEvent.ACTION_MASK){
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_POINTER_DOWN:
break;
case MotionEvent.ACTION_MOVE:
img.setPadding((int)event.getRawX(), (int)event.getRawY(), 0, 0);
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_POINTER_UP:
break;
} return true;
}
};
You need to create the dragging image at run time and have to adjust its position. In this sample code I have not adjusted the position so the dragged image is not created at the position of touch. You also need to consider the height and width of the image to be dragged.
Hope it helps !
I hate to be the one to tell you that your problem is even easier than you thought, but here's what it looks like:
#Override
protected void onDraw(Canvas canvas) {
if (getDx() != 0 && getDy() != 0) {
canvas.translate(getDx(), getDy());
}
super.onDraw(canvas);
}
Hope this helps!
If you want to Move your layout permanently (In case of temporary, we can use animation ) then Use Drag And Drop API from android Official Page . Hope this will help you
Couple of things that would help in achieving it:
Make sure that your view originally has enough space in the direction you want to use. Like 'match_parent' etc
Use GestureDetector.onSimpleGestureListener and override onDraw ( return true;) , onScroll -- connect it using onTouchEvent and you will directly get the distance , or you can calculate yourself by using the event1 and event2
Store this information in variable(s) and call invalidate()
in your onDraw method - use this information by canvas.translate(..use those variables..); super.onDraw(canvas);
and your will achieve the result
PS: The drawing starts by taking left-top as 0,0
I have a large image on the screen and I want to display a small image on that image where I touch the screen. but I do not know how to change the position of the image when I touch on the screen and the small image must display where ever I touch on screen.
any suggestions or hint will be appreciative.
thanks
Suppose you have your moving bitmap already in an ImageView which is part of your RelativeLayout.
Whenever the user touches the screen, you just have to change the position of the ImageView, by changing its margins.
You should try something like this:
#Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
if (action == MotionEvent.ACTION_DOWN)
{
RelativeLayout.LayoutParams params = myImageView.getLayoutParams();
params.setMargins(event.getX(),event.getY(), 0, 0);
myImageView.setLayoutParams(params);
}
}
User first the method onTouchEvent() to get the position of your touch.
Then i suppose you have your Bitmap placed in a UIElement like for example ImageView? And if you're using AbsoluteLayout you can set the ImageView object at the same coordinates you reveiced in the ontouchEvent.
#Override
public boolean onTouchEvent(MotionEvent event) {
event.getX();
event.getY();
}
I am making a canvas and setting its background which is an image
I am adding text on it by canvas. Drawtext method which works perfectly alright
now I want these text to be clickable but i couldn't find any method
The other method I could think of was to add text box on canvas add write on click event of these text box but could not find any example related to this can anybody suggest what to do.
Canvas is a space where you can just draw some graphics, thus the only way to do what you want is detecting when the user click the surface the canvas is drawn on (e.g. a SurfaceView), and using the coordenates you just fire an event. Of course, you need to verify whether the click was done on the specific part you want (e.g. the area where you drew a button or something).
Use the onTouchEvent method. Here is an example I used for finding out if the user's click coordinates are in a List of rectangles (aka buttons):
#Override
public boolean onTouchEvent( MotionEvent event) {
super.onTouchEvent(event);
int x = (int)event.getX();
int y = (int)event.getY();
xStored = x; yStored=y;
if (event.getAction()==MotionEvent.ACTION_UP){
}else if(event.getAction()==MotionEvent.ACTION_DOWN){
System.out.println("Touching down!");
for(Rect rect : rectangles){
if(rect.contains(x,y)){
System.out.println("Touched Rectangle, start activity."+x+","+y);
invalidate();
}else{
}
}
}else if(event.getAction()==MotionEvent.ACTION_MOVE){
}
this.postInvalidate();
return true;
}