移动和周围cirle simulataneously旋转一个三角形：机器人 [英] Moving and rotating a triangle simulataneously around a cirle: Android
本文介绍了移动和周围cirle simulataneously旋转一个三角形：机器人的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个三角形图象其一个边缘总是在相同的方向上的圆。
此图片大约有根据用户的刷卡/拖动圆圈移动。因此，它具有两个旋转（以便它的边缘是在相同的方向上的圆），并在同一时间环绕一圈旋转。
可能有人请该功能的实现提供了思路。一个例子/样本将大大AP preciated。
感谢。
更新：我的自定义视图如下：
公共类ThermoView扩展的FrameLayout { 私人ImageView的mThermoBgrd;
私人ImageView的mCurTempArrow;
公共静态最终诠释THEMROSTAT_BACKGROUND = 0;
公共静态最终诠释THEMROSTAT_CURR_TEMP = 1; 公共ThermostatView（上下文的背景下，ATTRS的AttributeSet）{
超（背景下，ATTRS）; mThermoBgrd =新ImageView的（上下文）;
mThermoBgrd.setImageResource（R.drawable.circle_icon）; addView（mThermoBgrd，ThermostatView.THEMROSTAT_BACKGROUND）;
mCurTempArrow =新ImageView的（上下文）;
mCurTempArrow.setImageResource（R.drawable.ruler_triangle_icon）;
mCurTempArrow.setScaleType（ImageView.ScaleType.MATRIX）;
addView（mCurTempArrow，ThermostatView.THEMROSTAT_CURR_TEMP，新的LayoutParams（50，50））;
} @覆盖
保护无效onLayout（布尔变化，诠释离开，诠释顶部，向右诠释，
INT底部）{
super.onLayout（改，左，上，右，下）; INT currTempHeight = mCurTempArrow.getMeasuredHeight（）;
INT currTempWidth = mCurTempArrow.getMeasuredWidth（）;
INT上级宽度=右 - 左;
INT上级高度=底 - 顶;
INT填充= currTempHeight; //我们需要圆方形容器。
INT containerLeft =填充;
INT containerTop =上级高度 - 上级宽度+填充;
INT containerRight =上级宽度 - 填充;
INT containerBottom =上级高度 - 填充;
INT containerWidth = containerRight - containerLeft;
INT containerHeight = containerBottom - containerTop;
//把箭头指示当前的温度
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）; }
解决方案
试试这个（它使用路径，而不是位图，但这个想法是一样的）：
公共类MyView的扩展视图{ 私人涂料mPaint;
私人路径mTriangle;
私人路径mCircle;
私人矩阵mMatrix;
私人浮动裂伤; 公共MyView的（上下文的背景下）{
超级（上下文）;
mPaint =新的油漆（）;
mPaint.setStrokeWidth（10）;
mPaint.setStyle（Style.STROKE）; mTriangle =新路径（）;
mTriangle.moveTo（0，-21）;
mTriangle.lineTo（0，21）;
mTriangle.lineTo（36，0）;
mTriangle.close（）; mCircle =新路径（）;
mCircle.addCircle（0，0，50，Direction.CW）; mMatrix =新的Matrix（）;
} @覆盖
公共布尔onTouchEvent（MotionEvent事件）{
浮W2 =的getWidth（）/ 2F;
浮H2 =的getHeight（）/ 2F;
裂伤=（浮点）（180 * Math.atan2（event.getY（） - H2，event.getX（） - W2）/ Math.PI）;
无效（）;
返回true;
} @覆盖
保护无效的onDraw（帆布油画）{
浮W2 =的getWidth（）/ 2F;
浮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（裂伤）;
canvas.concat（mMatrix）;
mPaint.setColor（0xaa00ff00）;
canvas.drawPath（mTriangle，mPaint）;
}
}
I have a triangle image whose one edge is always in the same direction as the circle. This image has to be moved around the circle based on user swipe/drag. So, it has to both rotate (so that it's edge is in same direction as the circle) and at the same time revolve around the circle.
Could someone please provide ideas for the implementation of this feature. An example/sample would be greatly appreciated.
Thanks.
UPDATE: My custom View is as follows:
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);
}
解决方案
try this (it uses Paths instead of Bitmaps but the idea is the same):
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);
}
}
这篇关于移动和周围cirle simulataneously旋转一个三角形：机器人的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
