Перемещение и поворот треугольника одновременно по кругу: Android

Question

У меня есть изображение треугольника, у которого одно ребро всегда в том же направлении, что и круг. Это изображение должно быть перемещено по кругу на основе пользовательского прокрутки/перетаскивания. Таким образом, он должен вращаться (так, чтобы он был в том же направлении, что и круг), и в то же время вращаться вокруг круга.

Как реализовать эту функцию?

UPDATE: Мой заказ Просмотр выглядит следующим образом:

public class ThermoView extends FrameLayout{ 

    private ImageView mThermoBgrd; 
    private ImageView mCurTempArrow; 
    public static final int THEMROSTAT_BACKGROUND = 0; 
    public static final int THEMROSTAT_CURR_TEMP = 1; 



    public ThermostatView(Context context, AttributeSet attrs) { 
     super(context, attrs); 

     mThermoBgrd = new ImageView(context); 
     mThermoBgrd.setImageResource(R.drawable.circle_icon); 

     addView(mThermoBgrd, ThermostatView.THEMROSTAT_BACKGROUND); 


     mCurTempArrow = new ImageView(context); 
     mCurTempArrow.setImageResource(R.drawable.ruler_triangle_icon); 
     mCurTempArrow.setScaleType(ImageView.ScaleType.MATRIX); 
     addView(mCurTempArrow, ThermostatView.THEMROSTAT_CURR_TEMP, new LayoutParams(50, 50)); 


    } 

    @Override 
    protected void onLayout(boolean changed, int left, int top, int right, 
      int bottom) { 
     super.onLayout(changed, left, top, right, bottom); 

     int currTempHeight = mCurTempArrow.getMeasuredHeight(); 
     int currTempWidth = mCurTempArrow.getMeasuredWidth(); 


     int parentWidth = right - left; 
     int parentHeight = bottom - top; 
     int padding = currTempHeight; 

     //We need square container for the circle. 
     int containerLeft = padding; 
     int containerTop = parentHeight - parentWidth + padding; 
     int containerRight = parentWidth - padding; 
     int containerBottom = parentHeight - padding; 
     int containerWidth = containerRight - containerLeft; 
     int containerHeight = containerBottom - containerTop; 


     //place the arrow indicating current temperature 
     int curTempLeft = containerRight - ((containerWidth/2) + currTempWidth/2); 
     int curTempTop = containerTop - (currTempHeight/2); 
     int curTempRight = curTempLeft + currTempWidth; 
     int curTempBottom = curTempTop + currTempHeight; 

     mCurTempArrow.layout(curTempLeft, curTempTop, curTempRight, curTempBottom); 

    } 

Answer 1

Поскольку я не знаю, если вы используете Open GL или стандартный canevas, я не могу дать вам рабочий код. Но общая идея (если у вас есть текущее положение треугольника (х, у) хранится, и в центре вашего круга (сх, су), хранящуюся

Выполните следующие действия:.

v = (cx-x, cy-y) // v is the normal vector of your triangle: it faces the center of the circle 
triangle.translate(v) // translate to the center of the circle 
triangle.rotate(angle) // rotate the triangle on itself 
v.rotate(angle) // apply the same rotation on the normal vector 
triangle.translate(-v) // translate back on the circle, but since v is rotated, the position will be updated 

Я надеюсь, что это достаточно ясно, удачи

EDIT: во-первых, вы должны действительно стараться быть более точным: в первом посте, вы не сказали, что треугольник был образ (это важно). Тогда вы не говорите, каков ваш текущий рендеринг, что работает, а что нет. Мне было бы легче помочь вам kno w, которую отображает ваша программа.

Из вашего кода я предполагаю, что вы правильно поместили изображение треугольника, но оно не повернуто. Итак, сначала попробуйте добавить

//place the arrow indicating current temperature 
    int curTempLeft = containerRight - ((containerWidth/2) + currTempWidth/2); 
    int curTempTop = containerTop - (currTempHeight/2); 
    int curTempRight = curTempLeft + currTempWidth; 
    int curTempBottom = curTempTop + currTempHeight; 

    mCurTempArrow.setRotate(angle); // rotate the image. angle is in degrees 

    mCurTempArrow.layout(curTempLeft, curTempTop, curTempRight, curTempBottom); 

Если вы не знаете, угол, возможно, придется вычислить его из предыдущего положения треугольника

Answer 2

попробовать это (он использует Paths вместо Bitmaps но идея такая же):

public class MyView extends View { 

    private Paint mPaint; 
    private Path mTriangle; 
    private Path mCircle; 
    private Matrix mMatrix; 
    private float mAngle; 

    public MyView(Context context) { 
     super(context); 
     mPaint = new Paint(); 
     mPaint.setStrokeWidth(10); 
     mPaint.setStyle(Style.STROKE); 

     mTriangle = new Path(); 
     mTriangle.moveTo(0, -21); 
     mTriangle.lineTo(0, 21); 
     mTriangle.lineTo(36, 0); 
     mTriangle.close(); 

     mCircle = new Path(); 
     mCircle.addCircle(0, 0, 50, Direction.CW); 

     mMatrix = new Matrix(); 
    } 

    @Override 
    public boolean onTouchEvent(MotionEvent event) { 
     float w2 = getWidth()/2f; 
     float h2 = getHeight()/2f; 
     mAngle = (float) (180 * Math.atan2(event.getY() - h2, event.getX() - w2)/Math.PI); 
     invalidate(); 
     return true; 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
     float w2 = getWidth()/2f; 
     float h2 = getHeight()/2f; 
     mMatrix.reset(); 
     mMatrix.postTranslate(w2, h2); 
     canvas.concat(mMatrix); 
     mPaint.setColor(0xaaff0000); 
     canvas.drawPath(mCircle, mPaint); 

     mMatrix.reset(); 
     mMatrix.postTranslate(60, 0); 
     mMatrix.postRotate(mAngle); 
     canvas.concat(mMatrix); 
     mPaint.setColor(0xaa00ff00); 
     canvas.drawPath(mTriangle, mPaint); 
    } 
}