同心旋转叠加图像

时间:2013-11-17 12:11:58

标签: android image rotation imageview overlay

我非常接近解决方案,但最后一点是躲避我。我有两个相同大小的图像,我已经覆盖在我的布局的一部分中。这些图像将根据屏幕尺寸进行缩放以适合屏幕。如果相关,我使用了多个drawable。

基本上,一个图像是一个圆圈,中间有一架飞机,另一个是一个小风向袋。我希望风向袋坐在风来自的相对位置。

我在开始时很好地覆盖了风向袋,我可以旋转它但是它不是同心旋转的,当我进行旋转时风向袋的比例会略有变化。我可以看到这一点,因为当我将旋转返回到零时,风向袋图形不在起始位置并且略大。

所以问题是如何将叠加层缩放为与创建初始视图时android所做的相同?

我的XML:

        <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_weight="0.60"
        android:gravity="center"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:textSize="12sp"
            android:text="@string/runwayDirection"
            android:textColor="#ffffff" />

         <EditText
            android:id="@+id/rwyDirection"
            android:layout_width="40dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="1dp"
            android:layout_marginRight="1dp"
            android:background="@drawable/border"
            android:ems="10"
            android:gravity="center"
            android:inputType="number"
            android:maxLength="3"
            android:text="@string/zero"
            android:textColor="#ffffff"
            android:textCursorDrawable="@null" />

    <FrameLayout 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
        <ImageView
                android:id="@+id/aircraftGraphic"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/windRose"
                android:src="@drawable/aircraftgraphic" />
        <ImageView
                android:id="@+id/windpic"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/windRose"
                android:src="@drawable/windsockring"
                />
    </FrameLayout>
    </LinearLayout>

我用来旋转的代码:

public void rotate_windsock(){

float relativeWind=90;
float rwydir;
float windDirection;

if (rwyDirection.getText().toString().matches("")) rwydir=0;
else rwydir=Float.parseFloat(rwyDirection.getText().toString());

if (windAngle.getText().toString().matches("")) windDirection=0;
else windDirection=Float.parseFloat(windAngle.getText().toString());

if (rwydir>windDirection) relativeWind=360-(rwydir-windDirection);
else relativeWind=(windDirection-rwydir);

Matrix matrix=new Matrix();
windSock.setScaleType(ScaleType.MATRIX);   //required
matrix.postRotate((float) relativeWind, aircraftGraphic.getWidth()/2, aircraftGraphic.getWidth()/2);
//matrix.postScale(aircraftGraphic.getWidth(), aircraftGraphic.getWidth());
windSock.setImageMatrix(matrix);

}

你可以看到我正在尝试获取底层图片的宽度,因为它是一个正方形用作postRotate的参数。我已经尝试获得LinearLayout的宽度,并且我尝试对底层图像进行旋转,希望它可以扩展到与覆盖图像相同但没有任何效果。它很接近,但显然不对。

有人帮帮我吗?我想到的另一件事是进一步缩小图像,使它们不缩放,但这会浪费大屏幕上的空间?

编辑:

我已尝试将轮换代码更改为:

Matrix mat = new Matrix();
Bitmap bMap = BitmapFactory.decodeResource(getResources(),R.drawable.windsockring);
mat.postRotate(relativeWind);
Bitmap bMapRotate = Bitmap.createBitmap(bMap, 0, 0,bMap.getWidth(),bMap.getHeight(), mat, true);
windSock.setImageBitmap(bMapRotate);

现在看起来效果很好,跑道方向和风向之间的差异是90的倍数,但风向袋的缩放会受到影响吗?!?!?!怎么了!

编辑#2:编辑#2: 好的对于未来的我,现在感谢这些链接: Rotate image without shrinking on Android http://learnandroideasily.blogspot.com.au/2013/07/imageview-animation-in-android.html

执行此操作的代码:

RotateAnimation rAnimClockWise = new RotateAnimation(0.0f, relativeWind, 1, 0.5f, 1, 0.5f);
rAnimClockWise.setFillAfter(true);
rAnimClockWise.setInterpolator(new LinearInterpolator());       
rAnimClockWise.setDuration(0);
windSock.startAnimation(rAnimClockWise);

我知道这最终会非常长,但我相信它会在将来帮助某人!!

1 个答案:

答案 0 :(得分:2)

请参阅我在原始问题中所做的编辑以获得答案!