last day (17 days later) » 

8:57 PM
0
Q: How to scale a view in android using a handle?

user2676468I'm trying to implement a handle to scale a view in android. Instead of using something like multitouch I want to be able to resize an image with just one finger. Here is my activity code. I feel as though I am very close there are a four things that don't work properly. The scaling is off. It...

 
I don't believe having accessory zoom controls is what I need. Sorry.
 
The handle view doesn't move with the image. because it shouldn't. Your big image is treated for container as it is original size, because setScaleX() and other transformation methods effect only on view's draw, but not its room in layout.
Math.sqrt(p[0] * p[0] + p[1] * p[1]) could be easily replaced by Math.hypot(p[0], p[1]) - it's more readable, precise and effective.
 
So scale does not change size? @Salauyou?
 
@user2676468 scaling, rotation, skewation, translation and other matrix transformations change size in terms of drawing, not layouting. That's why your small image doesn't follow the corner of large one.
 
So if I wanted to change it's size, I would have to use imageView.setWidth() imageView.setHeight()?
 
8:57 PM
@user2676468 no, it's bad idea, just move handler image to appropriate distance using setTranslationX() and setTranslationY()
 
What can I use to pass into setTranslationX,Y? Wouldn't setX(motionEvent.getRawX,Y) work better?
 
I'm not going to rewrite your code since it have much to rewrite... but can provide steps which should be followed. At ACTION_DOWN, remember initial coordinates tmpX and tmpY of touch event, using motionEvent.getRawX() and .getRawY(); and calculate initial tmpR. At ACTION_MOVE obtain new x and y and calculate new R, based on finger position relative to anchor point of big image, then scale big image and translate small one based on these values.
no problem, use setX() if you want. I mean that it should be done explicitly
And I still don't understand the purpose of the statement (imageView.getScaleX() * R / tmpR) * 0.1. What does *0.1 stand for?
setX(motionEvent.getRawX,Y) this will make small image follow the finger, but I think it should follow the right bottom corner of big image, no?
 
@Salauyou I want the small image to follow the finger, and the bottom right corner of the image. Just like in photoshop. The onTouchListener is only set on the dragHandle.
@Salauyou ALso, *0.1 doesn't really mean anything. I saw some code snippet online that used 0.2 so I was just playing around with values.
 
@user2676468 I was sure you wanted to avoid unproportional scaling using a kind of "radius" (R and tmpR) and applying scaleX and scaleX with the same value, no?
 
Hello Salauyo. I appreciate your help the past few days on my questions.
Have you every used photoshop before?
I want to mimic the kind of resizing that happens in photoshop.
 
8:59 PM
so you're okay with unproportional scaling?
should your big image resize relatively to its center or to left top point?
 
No. I would like the scaling to be proportional.
I think the big image should resize relative to center.
 
Okay, then open PS and watch how resize there behaves with pressed Shift and Alt keys... Handler icon there doesn't always follow mouse pointer.
 
I understand. Yes, that makes sense now.
Thank you.
 
you're welcome )
 
So the dragHandle will NOT always follow finger.
The image should scale proportionally.
How do you think is the best way to accomplish this?
imageView.setScale
and dragHandle.setX,Y(imageView.getBottom/Right)?
 
9:10 PM
ok... then return to what I told about the steps how it can be obtained :) First, remember the state of objects and coordinates of point at MOTION_DOWN, and at MOTION_MOVE change their state according to the distance between current and starting point.
 
Okay.
And then dragHandle.setX,Y() doesn't work though. Because the coordinates of imageView.getRight/Bottom don't change ever.
 
x = (center_of_image) + (initial_width / 2 * scale_factor)
yes, that's is because getRight is also calculated in terms of layout
 
scale_factor is the only thing that I'm unsure how to calculate though.
 
scaling factor is that getScaleX() returns
 
But what is the best way to setScaleY,X?
 
9:20 PM
at MOTION_DOWN: 1) remember touching point. 2) calculate distance btw touching point and center of image. 3) obtain scaling factor as getScaleX()
 
1. touching point... motionEvent.getRawX,Y?
 
yesss
at MOTION_MOVE: 1) obtain x and y of touch. 2) calculate new distance btw touching point and center of big image, let it be R = Math.hypot(e.getRawX() - centerX, e.getRawY() - centerY)
centerX and centerY are coordinates of big image center
3) scaling = R / tmpR * tmpScale, where tmpR and tmpScale was obtained at MOTION_DOWN 4) set scale both X and Y to scaling 5) move handle image
that's all!
 
Okay, I am updating my question now.
I tried to follow your directions, but I think I still got something wrong.
 
9:40 PM
center of image should be calculated in absolute coordinates
i. e. centerOfImage[0] = imageView.getX() + imageView.getWidth() / 2;
dragHandle coordinates should be set in different way
dragHandle.setX(centerOfImage[0] + imageView.getWidth() / 2 * modifiedScale);
 
That seems to look pretty good.
 
now is okay?
 
Well, theres just one more small thing.
 
which?
 
In photoshop, if you drag down and to the right and follow the square the mouse pointer follows it as well.
But in this case, if you drag, it seems to start good, but the mouse ends up far from the dragHandle.
The arrow follows the drag handle.
look at 1:10 of the video. Holding shift+alt together.
 
9:55 PM
1 min
how does handler behave when you move it absolutely proportionally (i. e. by 45 degrees)?
in video, arrow does follow drag handle because resize there is made proportionally
even in photoshop, when you drag handler and will move mouse for example, horizontally, mouse will not follow the handler.
 
Yes, when I move it proportionally I want it to follow.
I understand that if I move horizontal it will not follow.
 
but it doesn't now?
 
When I move proportionally, it follows a little bit, but then the distance between finger, and handle becomes to much.
I think we have to multiply something by 2
 
maybe :) I have the same idea
 
to take into account the scaling happens both left and right and top and bottom
 
10:02 PM
really
scaling should be * 2
 
modifiedScale = (float) (modifiedDistance / originalDistance * originalScale)*2;?
 
no... that will make scale jump twice at the beginning...
sec
could you plz update the code in question?
 
I think the code is updated. I will check again right now.
 
i mean with
centerOfImage[0] = imageView.getX() + imageView.getWidth() / 2;
and
centerOfImage[0] = imageView.getX() + imageView.getWidth() / 2;
 
Yes, my current code is:
centerOfImage[0] = (int) (imageView.getX() + imageView.getWidth() / 2);
centerOfImage[1] = (int) (imageView.getY() + imageView.getHeight() / 2);
All my code in the question is up to date.
 
10:15 PM
try to replace modifiedDistance / originalDistance
 
where?
 
with Math.pow(modifiedDistance / originalDistance, 2)
in modifiedScale calculation
 
Replace: modifiedScale = (float) (modifiedDistance / originalDistance * originalScale);
with: modifiedScale = (float) Math.pow(modifiedDistance / originalDistance, 2);
 
no
modifiedScale = (float) Math.pow(modifiedDistance / originalDistance, 2) * originalScale;
 
double num = Math.pow(modifiedDistance / originalDistance, 2);
modifiedScale = (float) (num * originalScale);
 
10:23 PM
a kind of... but i think this will lead to overrun
 
Hmm.. it seems to work a little better.
When you drag all the way open it seems to get off track again.
I think this will do for now.
YOu helped e with rotate
and today you helped me with resize.
tomorrow I will try to combine them both!
I will post a question on stackoverflow if it gives me any problems.
 
10:55 PM
I found the source of problem
getRawY() obtains screen coordinates, but getY() obtains layout coordinates with no care about status bar and action bar
I'm going to post solution as an answer
 

  last day (17 days later) »