针绕其指针头旋转

Question

我有一个针图像，当给定值改变时我需要旋转它。获得的值是随机的。

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

      <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底图是224*224

Answer 1

你只需要让针的图片和底图一样大，居中即可。你必须创建另一个 224*224 的透明图像，针在中心，然后旋转应该很容易与中心匹配。然后使用以下旋转构造函数就足够了：

RotateAnimation(float fromDegrees, float toDegrees)

Answer 2

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

选项 1：

将您的针图像调整为与背景图像完全相同的大小，即从 31 x 113 到 224 x 224。执行此操作时，请确保您实际上不只是将图像缩放到此大小（这将导致奇怪的拉伸针图像）。你要做的是创建一个 224x224 的透明图像，并将原始尺寸 (31x113) 的针图像复制粘贴到这个新的透明图像中，使针的基圆正好位于 224x224 透明图像的中心，并且与 "imaginary" 背景正确对齐。将图像保存并导出为 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)

就是这样！可能需要更多调整才能使定位完美，但这就是它的要点。

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

针绕其指针头旋转

Needle rotating about its pointer head

animation

android

rotation