android - 针绕其指针头旋转

Question

当给定值发生变化时，我需要旋转一个针形图像。获得的值是随机的。

我在 xml 中创建了图像，它是一个 ImageView 。

      <RelativeLayout
    android:id="@+id/relativeLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerInParent="false" >

    <ImageView
        android:id="@+id/meter_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:layout_marginTop="54dp"
        android:src="@drawable/gauge_meter" />

    <ImageView
        android:id="@+id/meter_needle_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/meter_image"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="14dp"
        android:src="@drawable/meter_needle" />
</RelativeLayout>

我使用以下代码进行了旋转，但它不是在其底轴上旋转

 RotateAnimation rpmNeedleDeflection = new RotateAnimation((float) (0.5f), (float) (90), 130, 0);

     rpmNeedleDeflection.setDuration(500);

     rpmNeedleDeflection.setFillAfter(true);

     rpmArrowView.startAnimation(rpmNeedleDeflection);

我仍在弄清楚旋转是如何工作的，在我的例子中，我需要根据速度设置角度。但是现在给定一个值，我如何让它从针的底部转向并绕着那个轴？

编辑:针是31*113， basemap 是224*224

Answer 1

要解决这个问题，您有 2 个选择:

选项 1:

将您的针图像调整为与背景图像完全相同的大小，即从 31 x 113 到 224 x 224。执行此操作时，确保您实际上不只是将图像缩放到这个大小(这将导致奇怪的拉伸(stretch)针图像)。你要做的是创建一个 224x224 的透明图像，并将原始尺寸 (31x113) 的针图像复制粘贴到这个新的透明图像中，使针的基圆正好位于 224x224 透明图像的中心，并且与“虚构”背景正确对齐。将图像保存并导出为 png 格式，并将此图像用作您的针图像。

您现在需要做的就是确保 2 张图像彼此完美对齐。这应该不难，因为它们的大小应该相同。当您旋转针图像时，您将获得所需的结果。

选项 2:

假设您无法调整图像的大小 - 可能是因为它被您的程序的其他部分使用，或者其他一些原因。您的第二个选择是定位图像，并使用轴心点来确保它通过代码正确定位。

为此，您需要将图像水平和垂直居中，您需要对齐它，使针的底部直接位于背景的中心。

就定位而言，需要反复尝试才能使其完美，但您似乎已经确定了该部分。你缺少的是旋转的枢轴点。让我们看看如何计算它:

数学时间!

我猜测直径等于图像的宽度，因为它是最宽的部分。这意味着针的水平中心位于图像宽度的一半:

final int pivotX = rpmArrowView.getMeasuredWidth() / 2;

图片的垂直中心应该是一样的，除了从图片的底部:

final int pivotY = rpmArrowView.getMeasuredHeight() - rpmArrowView.getMeasuredWidth() / 2;

现在，在制作动画之前，请确保设置轴心点:

rpmArrowView.setPivotX(pivotX);
rpmArrowView.setPivotY(pivotY);

然后动画:

rpmArrowView.animate().rotation(someDegree).setDuration(someDuration)

就是这样!可能需要进行更多调整才能获得完美的定位，但这就是它的要点。

希望这些选项之一对您有所帮助。