On Android Canvas polygons click - android

I have a few polygons on Canvas.
How I can listening click on any from polygons?
I have a method
public void drawPolygon(ChartPolygon polygon) {
List<Point> points = polygon.getPoints();
int size = points.size();
if (size < 2) {
return;
}
Paint polyPaint = new Paint();
polyPaint.setColor(polygon.getColor());
polyPaint.setStyle(Style.FILL);
Path polyPath = new Path();
polyPath.moveTo(points.get(0).getX(), points.get(0).getY());
for (Point point : points) {
polyPath.lineTo(point.getX(), point.getY());
}
canvas.drawPath(polyPath, polyPaint);
}

I would keep a list of Regions. Whenever you draw a new Polygon, use the same Path which you use for drawing also to define a new Region:
Region r = new Region();
r.setPath(path, clip);
regionList.add(r);
clip could be defined e.g. by
Region clip = new Region(0, 0, canvas.getWidth(), canvas.getHeight());
Finally when you detect a touch in your onTouchListener loop over the regionList and check, whether the touched point (given by x and y) is inside the region:
for (int i = 0; i < regionList.size(); i++) {
Region r = regionList.get(i);
if (r.contains(x,y) {
selectedRegionIndex = i;
break;
}
}

Read this post, this post can help you
First one, you can get the position in X and Y of the click event in your screen.
You can implement the onTouchEvent function in the Activity extends
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (topTouchArea.contains(event.getX(), event.getY())) {
currentTouch = TOUCH_TOP;
} else if (RightTouchArea.contains(event.getX(),event.getY())) {
currentTouch = TOUCH_RIGHT;
} else if (LeftTouchArea.contains(event.getX(),event.getY())) {
currentTouch = TOUCH_LEFT;
} else {
return false; //Return false if user touches none of the corners
}
return true;
}
}
Now (always in your onTouchEvent) function, you can evaluate the position and regions of your polygon.
case MotionEvent.ACTION_MOVE:
switch (currentTouch) {
case TOUCH_TOP:
top.x = event.getX();
top.y = event.getY();
invalidate();
return true;
case TOUCH_RIGHT:
Right.x = event.getX();
Right.y = event.getY();
invalidate();
return true;
case TOUCH_LEFT:
Left.x = event.getX();
Left.y = event.getY();
invalidate();
return true;
}
case MotionEvent.ACTION_UP:
switch (currentTouch) {
case TOUCH_TOP:
top.x = event.getX();
top.y = event.getY();
invalidate();
currentTouch = NONE;
return true;
case TOUCH_RIGHT:
Right.x = event.getX();
Right.y = event.getY();
invalidate();
currentTouch = NONE;
return true;
case TOUCH_LEFT:
Left.x = event.getX();
Left.y = event.getY();
invalidate();
currentTouch = NONE;
return true;
}
return false;
All the post is in the article link

Related

How can get Touch of 2 Fingers at a Time?

I click 2 fingers on a SurfaceView at a Time, i want get X,Y of 2 Points:
This is my code, but it only get X,Y of 1 Finger.
How can get X,Y of 2 Fingers at a Time?
#Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
int ipoiter = event.getPointerCount();
Toast.makeText(getContext(), String.valueOf(ipoiter), Toast.LENGTH_SHORT).show();
for(int i=0;i<ipoiter;i++){
int x= (int)event.getX(i);
int y = (int)event.getY(i);
Toast.makeText(getContext(), String.valueOf(x), Toast.LENGTH_SHORT).show();
}
}
}
I had try below code but action=0, so can't process.
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction() & MotionEvent.ACTION_MASK;
Toast.makeText(getContext(), String.valueOf(action), Toast.LENGTH_SHORT).show();
if (action == MotionEvent.ACTION_POINTER_DOWN) {
int ipoiter = event.getPointerCount();
Toast.makeText(getContext(), String.valueOf(ipoiter), Toast.LENGTH_SHORT).show();
for(int i=0;i<ipoiter;i++){
int x= (int)event.getX(i);
int y = (int)event.getY(i);
Toast.makeText(getContext(), String.valueOf(x), Toast.LENGTH_SHORT).show();
}
}
}
ACTION_POINTER_DOWN is triggered for each newly touched point on screen.
to get the all touch points try something as follows.
You will get the active finger points in mActivePointers
private SparseArray<PointF> mActivePointers = new SparseArray<PointF>();
#Override
public boolean onTouchEvent(MotionEvent event) {
// get pointer index from the event object
int pointerIndex = event.getActionIndex();
// get pointer ID
int pointerId = event.getPointerId(pointerIndex);
// get masked (not specific to a pointer) action
int maskedAction = event.getActionMasked();
switch (maskedAction) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_POINTER_DOWN: {
// We have a new pointer. Lets add it to the list of pointers
PointF f = new PointF();
f.x = event.getX(pointerIndex);
f.y = event.getY(pointerIndex);
mActivePointers.put(pointerId, f);
break;
}
case MotionEvent.ACTION_MOVE: { // a pointer was moved
for (int size = event.getPointerCount(), i = 0; i < size; i++) {
PointF point = mActivePointers.get(event.getPointerId(i));
if (point != null) {
point.x = event.getX(i);
point.y = event.getY(i);
}
}
break;
}
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
case MotionEvent.ACTION_CANCEL: {
mActivePointers.remove(pointerId);
break;
}
}
invalidate();
return true;
}
Source : Check this

How to stop other images to move while dragging of one image

In my application i am able to overlap images one by another, when i drag one image from the group of images the left and right images are also moving on the screen.
How restrict this, below is my code
int cards[] = {R.drawable.c1,R.drawable.c2,R.drawable.c3,R.drawable.c4,R.drawable.c5,R.drawable.c6,
R.drawable.c7,R.drawable.c8,R.drawable.c9,R.drawable.c10,R.drawable.c11,R.drawable.c12,R.drawable.c13};
ImageView[] Images = new ImageView[cards.length];
for (int i = 0; i < cards.length; i++) {
Images[i] = new ImageView(this);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
if (i != 0) {
params.addRule(RelativeLayout.ALIGN_LEFT,i-1);
params.leftMargin= 40;
Images[i].setImageBitmap(BitmapFactory.decodeResource(getResources(), cards[i]));
Images[i].setId(i);
Images[i].setOnTouchListener(this);
layout.addView(Images[i], params);
} else {
Images[i].setImageBitmap(BitmapFactory.decodeResource(getResources(), cards[i]));
Images[i].setId(i);
Images[i].setOnTouchListener(this);
layout.addView(Images[i], params);
}
}
//Ontouch
#Override
public boolean onTouch(View p_v, MotionEvent p_event){
params = (RelativeLayout.LayoutParams)p_v.getLayoutParams();
switch (p_event.getAction()){
case MotionEvent.ACTION_DOWN:
{
status = START_DRAGGING;
imageView1 = new ImageView(this);
imageView1.setImageBitmap(p_v.getDrawingCache());
m_lastTouchX = p_event.getX();
m_lastTouchY = p_event.getY();
break;
}
case MotionEvent.ACTION_UP:
{
status=STOP_DRAGGING;
break;
}
case MotionEvent.ACTION_MOVE:
{
if (status == START_DRAGGING) {
m_dx = p_event.getX() - m_lastTouchX;
m_dy = p_event.getY() - m_lastTouchY;
m_posX = m_prevX + m_dx;
m_posY = m_prevY + m_dy;
System.out.println("Dragging");
params.leftMargin = (int) m_posX;
params.topMargin=(int) m_posY;
p_v.bringToFront();
p_v.setLayoutParams(params);
imageView1.invalidate();
m_prevX = m_posX;
m_prevY = m_posY;
}
break;
}
}
return true;
}
Here is a small snippet to get you going. I added some images into RelativeLayout. The drawing is done in canvas for better performance of dragging. You just need to handle the layout params update MotionEvent.ACTION_UP event:
private ImageView[] Images;
private boolean mDragging = false;
private Rect mImageRect = new Rect();
int mX = 0;
int mY = 0;
private Bitmap mBitmap;
private ImageView mImage;
#Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mX = (int) ev.getX();
mY = (int) ev.getY();
for (ImageView image : Images) {
image.getHitRect(mImageRect);
if (mImageRect.contains(mX, mY)) {
mDragging = true;
mImage = image;
mBitmap = ((BitmapDrawable) mImage.getDrawable())
.getBitmap();
mImage.setVisibility(View.GONE);
postInvalidate();
break;
}
}
break;
case MotionEvent.ACTION_MOVE:
if (mDragging) {
mX = (int) ev.getX();
mY = (int) ev.getY();
postInvalidate();
}
break;
case MotionEvent.ACTION_UP:
if (mDragging) {
mDragging = false;
mBitmap = null;
mImage.setVisibility(View.VISIBLE);
mImage = null;
}
break;
}
return super.onTouchEvent(ev);
}
#Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
if (mBitmap != null) {
canvas.drawBitmap(mBitmap, mX, mY, null);
}
}
My guess would be that because your images overlap, all three images get the onTouch event and start dragging. You should add some logic that would determine which image is the one that should drag (for example the one that processes the event first) and then START_DRAGGING only that image. You already have a "global" value status. Beside it just add int imageNo and set it in the ACTION_DOWN case statement.
While on the subject: you should only process ACTION_DOWN if status != START_DRAGGING.

Android ImageView Scaling and translating issue

I’m developing an android application (API 19 4.4) and I encounter some issue with ImageViews.
I have a SurfaceView, in which I dynamically add ImageViews which I want to react to touch events.
On so far, I have managed to make the ImageView move and scale smoothly but I have an annoying behavior.
When I scale down the image to a certain limit (I would say half the original size) and I try to move it, the image flicker.
After a short analysis, it seems that it’s switching its position symmetrically around the finger point on the screen, cumulating distance, and finally gets out of sight (all that happens very fast ( < 1s).
I think I am missing something with the relative value of the touch event to the ImageView/SurfaceView, but I’m a quite a noob and I’m stucked…
Here is my code
public class MyImageView extends ImageView {
private ScaleGestureDetector mScaleDetector ;
private static final int MAX_SIZE = 1024;
private static final String TAG = "MyImageView";
PointF DownPT = new PointF(); // Record Mouse Position When Pressed Down
PointF StartPT = new PointF(); // Record Start Position of 'img'
public MyImageView(Context context) {
super(context);
mScaleDetector = new ScaleGestureDetector(context,new MySimpleOnScaleGestureListener());
setBackgroundColor(Color.RED);
setScaleType(ScaleType.MATRIX);
setAdjustViewBounds(true);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
lp.setMargins(-MAX_SIZE, -MAX_SIZE, -MAX_SIZE, -MAX_SIZE);
this.setLayoutParams(lp);
this.setX(MAX_SIZE);
this.setY(MAX_SIZE);
}
int firstPointerID;
boolean inScaling=false;
#Override
public boolean onTouchEvent(MotionEvent event) {
// get pointer index from the event object
int pointerIndex = event.getActionIndex();
// get pointer ID
int pointerId = event.getPointerId(pointerIndex);
//First send event to scale detector to find out, if it's a scale
boolean res = mScaleDetector.onTouchEvent(event);
if (!mScaleDetector.isInProgress()) {
int eid = event.getAction();
switch (eid & MotionEvent.ACTION_MASK)
{
case MotionEvent.ACTION_MOVE :
if(pointerId == firstPointerID) {
PointF mv = new PointF( (int)(event.getX() - DownPT.x), (int)( event.getY() - DownPT.y));
this.setX((int)(StartPT.x+mv.x));
this.setY((int)(StartPT.y+mv.y));
StartPT = new PointF( this.getX(), this.getY() );
}
break;
case MotionEvent.ACTION_DOWN : {
firstPointerID = pointerId;
DownPT.x = (int) event.getX();
DownPT.y = (int) event.getY();
StartPT = new PointF( this.getX(), this.getY() );
break;
}
case MotionEvent.ACTION_POINTER_DOWN: {
break;
}
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
case MotionEvent.ACTION_CANCEL: {
firstPointerID = -1;
break;
}
default :
break;
}
return true;
}
return true;
}
public boolean onScaling(ScaleGestureDetector detector) {
this.setScaleX(this.getScaleX()*detector.getScaleFactor());
this.setScaleY(this.getScaleY()*detector.getScaleFactor());
invalidate();
return true;
}
private class MySimpleOnScaleGestureListener extends SimpleOnScaleGestureListener {
#Override
public boolean onScale(ScaleGestureDetector detector) {
return onScaling(detector);
}
#Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
Log.d(TAG, "onScaleBegin");
return true;
}
#Override
public void onScaleEnd(ScaleGestureDetector arg0) {
Log.d(TAG, "onScaleEnd");
}
}
}
I have also another questions about rotations. How should I implement this?
Could I use the ScalegestureDetector in some way or have I to make this works in the view touch event? I would like to be able to scale and rotate in the same gesture (and move in another).
Thank for helping me, I would really appreciate!
Sorry for my english
this is a working example of two fingers move/scale/rotate (note: the code is quite short due to smart detector used - see MatrixGestureDetector):
class ViewPort extends View {
List<Layer> layers = new LinkedList<Layer>();
int[] ids = {R.drawable.layer0, R.drawable.layer1, R.drawable.layer2};
public ViewPort(Context context) {
super(context);
Resources res = getResources();
for (int i = 0; i < ids.length; i++) {
Layer l = new Layer(context, this, BitmapFactory.decodeResource(res, ids[i]));
layers.add(l);
}
}
#Override
protected void onDraw(Canvas canvas) {
for (Layer l : layers) {
l.draw(canvas);
}
}
private Layer target;
#Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
target = null;
for (int i = layers.size() - 1; i >= 0; i--) {
Layer l = layers.get(i);
if (l.contains(event)) {
target = l;
layers.remove(l);
layers.add(l);
invalidate();
break;
}
}
}
if (target == null) {
return false;
}
return target.onTouchEvent(event);
}
}
class Layer implements MatrixGestureDetector.OnMatrixChangeListener {
Matrix matrix = new Matrix();
Matrix inverse = new Matrix();
RectF bounds;
View parent;
Bitmap bitmap;
MatrixGestureDetector mgd = new MatrixGestureDetector(matrix, this);
public Layer(Context ctx, View p, Bitmap b) {
parent = p;
bitmap = b;
bounds = new RectF(0, 0, b.getWidth(), b.getHeight());
matrix.postTranslate(50 + (float) Math.random() * 50, 50 + (float) Math.random() * 50);
}
public boolean contains(MotionEvent event) {
matrix.invert(inverse);
float[] pts = {event.getX(), event.getY()};
inverse.mapPoints(pts);
if (!bounds.contains(pts[0], pts[1])) {
return false;
}
return Color.alpha(bitmap.getPixel((int) pts[0], (int) pts[1])) != 0;
}
public boolean onTouchEvent(MotionEvent event) {
mgd.onTouchEvent(event);
return true;
}
#Override
public void onChange(Matrix matrix) {
parent.invalidate();
}
public void draw(Canvas canvas) {
canvas.drawBitmap(bitmap, matrix, null);
}
}
class MatrixGestureDetector {
private static final String TAG = "MatrixGestureDetector";
private int ptpIdx = 0;
private Matrix mTempMatrix = new Matrix();
private Matrix mMatrix;
private OnMatrixChangeListener mListener;
private float[] mSrc = new float[4];
private float[] mDst = new float[4];
private int mCount;
interface OnMatrixChangeListener {
void onChange(Matrix matrix);
}
public MatrixGestureDetector(Matrix matrix, MatrixGestureDetector.OnMatrixChangeListener listener) {
this.mMatrix = matrix;
this.mListener = listener;
}
public void onTouchEvent(MotionEvent event) {
if (event.getPointerCount() > 2) {
return;
}
int action = event.getActionMasked();
int index = event.getActionIndex();
switch (action) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_POINTER_DOWN:
int idx = index * 2;
mSrc[idx] = event.getX(index);
mSrc[idx + 1] = event.getY(index);
mCount++;
ptpIdx = 0;
break;
case MotionEvent.ACTION_MOVE:
for (int i = 0; i < mCount; i++) {
idx = ptpIdx + i * 2;
mDst[idx] = event.getX(i);
mDst[idx + 1] = event.getY(i);
}
mTempMatrix.setPolyToPoly(mSrc, ptpIdx, mDst, ptpIdx, mCount);
mMatrix.postConcat(mTempMatrix);
if(mListener != null) {
mListener.onChange(mMatrix);
}
System.arraycopy(mDst, 0, mSrc, 0, mDst.length);
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
if (event.getPointerId(index) == 0) ptpIdx = 2;
mCount--;
break;
}
}
}
I tried to implementation of multiple touch on view not on bitmap using matrix, now i success. Now i think it will helpful to you for individual gesture for multiple image. Try it, it work best for me.
public class MultiTouchImageView extends ImageView implements OnTouchListener{
float[] lastEvent = null;
float d = 0f;
float newRot = 0f;
public static String fileNAME;
public static int framePos = 0;
//private ImageView view;
private boolean isZoomAndRotate;
private boolean isOutSide;
// We can be in one of these 3 states
private static final int NONE = 0;
private static final int DRAG = 1;
private static final int ZOOM = 2;
private int mode = NONE;
private PointF start = new PointF();
private PointF mid = new PointF();
float oldDist = 1f;
public MultiTouchImageView(Context context) {
super(context);
}
public MultiTouchImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public MultiTouchImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#SuppressWarnings("deprecation")
#Override
public boolean onTouch(View v, MotionEvent event) {
//view = (ImageView) v;
bringToFront();
// Handle touch events here...
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
//savedMatrix.set(matrix);
start.set(event.getX(), event.getY());
mode = DRAG;
lastEvent = null;
break;
case MotionEvent.ACTION_POINTER_DOWN:
oldDist = spacing(event);
if (oldDist > 10f) {
midPoint(mid, event);
mode = ZOOM;
}
lastEvent = new float[4];
lastEvent[0] = event.getX(0);
lastEvent[1] = event.getX(1);
lastEvent[2] = event.getY(0);
lastEvent[3] = event.getY(1);
d = rotation(event);
break;
case MotionEvent.ACTION_UP:
isZoomAndRotate = false;
case MotionEvent.ACTION_OUTSIDE:
isOutSide = true;
mode = NONE;
lastEvent = null;
case MotionEvent.ACTION_POINTER_UP:
mode = NONE;
lastEvent = null;
break;
case MotionEvent.ACTION_MOVE:
if(!isOutSide){
if (mode == DRAG && !isZoomAndRotate) {
isZoomAndRotate = false;
setTranslationX((event.getX() - start.x) + getTranslationX());
setTranslationY((event.getY() - start.y) + getTranslationY());
} else if (mode == ZOOM && event.getPointerCount() == 2) {
isZoomAndRotate = true;
boolean isZoom = false;
if(!isRotate(event)){
float newDist = spacing(event);
if (newDist > 10f) {
float scale = newDist / oldDist * getScaleX();
setScaleX(scale);
setScaleY(scale);
isZoom = true;
}
}
else if(!isZoom){
newRot = rotation(event);
setRotation((float)(getRotation() + (newRot - d)));
}
}
}
break;
}
new GestureDetector(new MyGestureDectore());
Constants.currentSticker = this;
return true;
}
private class MyGestureDectore extends GestureDetector.SimpleOnGestureListener{
#Override
public boolean onDoubleTap(MotionEvent e) {
bringToFront();
return false;
}
#Override
public boolean onDoubleTapEvent(MotionEvent e) {
return false;
}
}
private float rotation(MotionEvent event) {
double delta_x = (event.getX(0) - event.getX(1));
double delta_y = (event.getY(0) - event.getY(1));
double radians = Math.atan2(delta_y, delta_x);
return (float) Math.toDegrees(radians);
}
private float spacing(MotionEvent event) {
float x = event.getX(0) - event.getX(1);
float y = event.getY(0) - event.getY(1);
return FloatMath.sqrt(x * x + y * y);
}
private void midPoint(PointF point, MotionEvent event) {
float x = event.getX(0) + event.getX(1);
float y = event.getY(0) + event.getY(1);
point.set(x / 2, y / 2);
}
private boolean isRotate(MotionEvent event){
int dx1 = (int) (event.getX(0) - lastEvent[0]);
int dy1 = (int) (event.getY(0) - lastEvent[2]);
int dx2 = (int) (event.getX(1) - lastEvent[1]);
int dy2 = (int) (event.getY(1) - lastEvent[3]);
Log.d("dx1 ", ""+ dx1);
Log.d("dx2 ", "" + dx2);
Log.d("dy1 ", "" + dy1);
Log.d("dy2 ", "" + dy2);
//pointer 1
if(Math.abs(dx1) > Math.abs(dy1) && Math.abs(dx2) > Math.abs(dy2)) {
if(dx1 >= 2.0 && dx2 <= -2.0){
Log.d("first pointer ", "right");
return true;
}
else if(dx1 <= -2.0 && dx2 >= 2.0){
Log.d("first pointer ", "left");
return true;
}
}
else {
if(dy1 >= 2.0 && dy2 <= -2.0){
Log.d("seccond pointer ", "top");
return true;
}
else if(dy1 <= -2.0 && dy2 >= 2.0){
Log.d("second pointer ", "bottom");
return true;
}
}
return false;
}
}
I finally use this (spacing is used to calculated the distance between two fingers), I offset the imageview after scaling to keep it centered, works fine for now :
float newDist = spacing(event);
float scale = newDist / oldDist;
int oldH =getLayoutParams().height;
int oldW =getLayoutParams().width;
int newH =(int) (getLayoutParams().height*scale);
int newW =(int) (getLayoutParams().width*scale);
if(newH<MAX_SIZE && newW<MAX_SIZE){
//scale the height and width of the view
getLayoutParams().height = newH;
getLayoutParams().width = newW;
//calculate the X and Y offset to apply after scaling to keep the image centered
int xOffset = (int)(getLayoutParams().height - oldH)/2;
int yOffset = (int)(getLayoutParams().width - oldW)/2;
setX(getX()-xOffset);
setY(getY()-yOffset);
requestLayout();
setAdjustViewBounds(true);
oldDist=newDist;
All these examples had a glitchy gesture support because of scaleType was set to matrix. When I tried to zoom, I was not able to keep the image in center and control the amount of zoom. So I did some study and wrote a small, easy but very pleasing code for this: https://stackoverflow.com/a/65697376/13339685

How to draw an arrowhead in a free handed drawn line in Android?

I need to make a arrow head in a line that is defined by a lot of points, that the user will drawn.
I hope that I could be clear about what is my question.
Thanks.
Note: All the questions/answers that I saw here were to resolve the problem of a line that was defined by two points, taken in the ACTION_DOWN and ACTION_UP. It's different in my case, because I need to take the first point while the line is being drawn.
This is my onTouch() method. It just draw a line defined by where the user touches in the screen.
public boolean onTouch(View v, MotionEvent event) {
if(getEditMode()) {
float eventX = event.getX();
float eventY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
path.moveTo(eventX, eventY);
break;
case MotionEvent.ACTION_MOVE:
path.lineTo(eventX, eventY);
break;
case MotionEvent.ACTION_UP:
//Here i have to draw an arrow.
drawCanvas.drawPath(path, paint);
path.reset();
invalidate();
break;
}
invalidate();
return true;
} else {
return false;
}
}
I override draw and rotate the canvas before drawing the arrow.
//NOTE: 0, 0 is the bottom center point
vehicle.draw(canvas);
//draw arrow
if (arrow != null && heading != BusLocation.NO_HEADING)
{
//put the arrow in window
int arrowLeft = -(arrow.getIntrinsicWidth() / 4);
int arrowTop = -vehicle.getIntrinsicHeight() + arrowTopDiff;
//use integer division when possible. This code is frequently executed
int arrowWidth = (arrow.getIntrinsicWidth() * 6) / 10;
int arrowHeight = (arrow.getIntrinsicHeight() * 6) / 10;
int arrowRight = arrowLeft + arrowWidth;
int arrowBottom = arrowTop + arrowHeight;
arrow.setBounds(arrowLeft, arrowTop, arrowRight, arrowBottom);
canvas.save();
//set rotation pivot at the center of the arrow image
canvas.rotate(heading, arrowLeft + arrowWidth/2, arrowTop + arrowHeight / 2);
Rect rect = arrow.getBounds();
arrow.draw(canvas);
arrow.setBounds(rect);
canvas.restore();
}
}
So, I found a solution.
I store all the points that construct the line in an arraylist.
After I took a point of the line that would be in the 0.9 * arraylist.size() as reference to draw an arrowhead that follow the line direction.
Here is my onTouch() method and the funciont that I used to draw the arrow.
public boolean onTouch(View v, MotionEvent event) {
if(getEditMode()) {
float eventX = event.getX();
float eventY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
path.moveTo(eventX, eventY);
pList.clear(); // When I start a line need to clear the previous coorfinates.
break;
}
case MotionEvent.ACTION_MOVE: {
int hSize = event.getHistorySize();
path.lineTo(eventX, eventY);
PointF aux, auxH;
if(darrow) {
if(hSize > 0) { // If movement is too fast.
for(int i = 0; i < hSize; i++) {
auxH = new PointF(event.getHistoricalX(i), event.getHistoricalY(i));
pList.add(auxH);
}
}
aux = new PointF(eventX, eventY);
pList.add(aux);
}
break;
}
case MotionEvent.ACTION_UP: {
pend.x = eventX;
pend.y = eventY;
if(darrow) { // If need to draw an arrow head to the end of the line;
arrowPath = drawArrow(pend); // Store the right arrowhead to a path.
}
drawCanvas.drawPath(path, paint);
drawCanvas.drawPath(arrowPath, paint);
path.reset();
arrowPath.reset();
invalidate();
break;
}
}
invalidate();
return true;
} else {
return false;
}
}
And the drawArrow(PointF) function:
private Path drawArrow(PointF pfinal) {
float dx, dy;
PointF p1, p2;
PointF pstart;
Path auxPath = new Path();
if(pList.size() > 0) {
PointF[] auxArray = pList.toArray(new PointF[pList.size()]);
int index = (int)(auxArray.length * 0.9);
Log.d(msg, "Size: " + auxArray.length + " | index: " + index);
pstart = auxArray[index];
dx = pfinal.x - pstart.x;
dy = pfinal.y - pstart.y;
float length = (float)Math.sqrt(dx * dx + dy * dy);
float unitDx = dx / length;
float unitDy = dy / length;
final int arrowSize = 10;
p1 = new PointF(
(float)(pfinal.x - unitDx * arrowSize - unitDy * arrowSize),
(float)(pfinal.y - unitDy * arrowSize + unitDx * arrowSize));
p2 = new PointF(
(float)(pfinal.x - unitDx * arrowSize + unitDy * arrowSize),
(float)(pfinal.y - unitDy * arrowSize - unitDx * arrowSize));
auxPath.moveTo(pfinal.x, pfinal.y);
auxPath.lineTo(p1.x, p1.y);
auxPath.moveTo(pfinal.x, pfinal.y);
auxPath.lineTo(p2.x, p2.y);
auxPath.close();
}
return auxPath;
}

Rotation around 3d object on touch using min3d/Rajawali framework (android)

I am working on an algorithm for rotating the camera around a 3D object using the Min3d/Rajawali framework.
With my implementation, the rotation around axis X is not working properly. I think the method setLookAt() is not working properly.
The problem:
When I rotate the sphere vertically, I can't fully see it. For example, turning the planet Earth, I can not fully see the Antarctic, because the algorithm resets the camera down.
Is it possible to realize the camera rotation around an object without using the method "setLookAt"?
I have tried different solutions, but have not been able to get it working correctly.
Below is my code:
initScene:
scene.camera().position.z = 90;
scene.camera().target = raketeOBJ.position();
onTouchEvent:
public boolean onTouchEvent(MotionEvent me) {
if (me.getAction() == MotionEvent.ACTION_DOWN) {
xpos = me.getX();
ypos = me.getY();
return true;
}
if (me.getAction() == MotionEvent.ACTION_UP) {
xpos = -1;
ypos = -1;
touchTurn = 0;
touchTurnUp = 0;
return true;
}
if (me.getAction() == MotionEvent.ACTION_MOVE) {
float xd = me.getX() - xpos;
float yd = me.getY() - ypos;
xpos = me.getX();
ypos = me.getY();
touchTurn = xd / -200f;
touchTurnUp = yd / -200f;
return true;
}
try {
Thread.sleep(15);
} catch (Exception e) {
}
return super.onTouchEvent(me);
}
UpdateScene:
if (touchTurn != 0) {
scene.camera().position.rotateY(touchTurn);
touchTurn = 0;
}
if (touchTurnUp != 0) {
scene.camera().position.rotateX(touchTurnUp);
touchTurnUp = 0;
}
Number3d target = scene.camera.target;
Number3d cp = scene.camera.position.clone();
// move position like target is (0,0,0)
cp.x -= target.x;
cp.y -= target.y;
cp.z -= target.z;
cp.roateX(angle);
// restore offset
cp.x += target.x;
cp.y += target.y;
cp.z += target.z;
scene.camera.position.setAllFrom(cp);
A bit late but in case anyone has trouble with that, like me.
Rajawali offers a camera called ArcballCamera, which does exactly what you/we are trying to do.
In your Renderer add the following:
ArcballCamera arcball = new ArcballCamera(mContext, ((Activity)mContext).findViewById(R.id.contentView));
arcball.setTarget(mObjectGroup); //your 3D Object
arcball.setPosition(0,0,4); //optional
getCurrentScene().replaceAndSwitchCamera(getCurrentCamera(), arcball);
now you can rotate and zoom the object without a dozen lines of code.
setLookAt() needs to be called onDrawFrame if you want the camera to update regularly. But you need to care more about creating a "RotateAroundAnimation". See here for more info: http://www.rozengain.com/blog/2012/03/26/rajawali-tutorial-12-animation-classes/
You'll have to make yourAnimation.setTransformable3D(mCamera), and then it should control your main camera. I often use this methodology and then call the "yourAnimation.start()" on touch, or other external stimulus.
This is my way to rotate 3d model according as x and y
in Render class
public boolean left, right;
public boolean up, down;
and in onDrawFrame
#Override
public void onDrawFrame(GL10 glUnused) {
super.onDrawFrame(glUnused);
// getCurrentCamera().setRotY(getCurrentCamera().getRotY() + 1);
if (left) {
getCurrentCamera().setRotX(getCurrentCamera().getRotX() - 1);
}
if (right) {
getCurrentCamera().setRotX(getCurrentCamera().getRotX() + 1);
}
if (up) {
getCurrentCamera().setRotY(getCurrentCamera().getRotY() - 1);
}
if (down) {
getCurrentCamera().setRotY(getCurrentCamera().getRotY() + 1);
}
}
and in MainActivity
#Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
xpos = event.getX();
ypos = event.getY();
}
if (event.getAction() == MotionEvent.ACTION_UP) {
xpos = -1;
ypos = -1;
mRender.left = false;
mRender.right = false;
mRender.up = false;
mRender.down = false;
}
if (event.getAction() == MotionEvent.ACTION_MOVE) {
xd = event.getX() - xpos;
yd = event.getY() - ypos;
xpos = event.getX();
ypos = event.getY();
if (xd < 0) {
mRender.up = true;
} else {
mRender.down = true;
}
if (yd < 0) {
mRender.left = true;
} else {
mRender.right = true;
}
}
return super.onTouchEvent(event);
}
by this way, i can rotate my model :)

Categories

Resources