XML 在 canvas 上绘图时的可绘制比例
XML drawable scale when drawing on canvas
我正在尝试制作一个看起来像带阴影的圆圈的可绘制对象。它需要缩放到不同的大小,需要绘制在 canvas 上。我使用 setBounds 来设置坐标和比例。
我的可绘制对象:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="0dp"
android:left="5dp"
android:right="5dp"
android:top="10dp">
<shape android:shape="oval">
<size
android:width="115dp"
android:height="115dp" />
<solid android:color="@color/level_button_dark" />
</shape>
</item>
<item
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<shape android:shape="oval">
<size
android:width="115dp"
android:height="115dp" />
<solid android:color="@color/level_button" />
</shape>
</item>
</layer-list>
我的绘图代码
mButtonDrawable.setBounds(20, 20, 220, 220);
mButtonDrawable.draw(canvas);
mButtonDrawable.setBounds(270, 20, 370, 120);
mButtonDrawable.draw(canvas);
mButtonDrawable.setBounds(420, 20, 470, 70);
mButtonDrawable.draw(canvas);
结果:
我想为所有比例实现一致的外观。
在模拟器上测试 api 18.
问题是您的圈子绑定到相同的坐标。所以当你打电话给
public void setBounds (int left, int top, int right, int bottom)
它改变坐标,画两个圆,但是它们之间的距离也应该变小。所以我猜一个 drawable 不会做。每个圆圈需要两个单独的可绘制对象。并独立改变他们的界限。这就是您可以达到预期效果的方法。
虽然@RexSplode 方法是有效的,但我找到了一种使用一个可绘制对象来完成此操作的方法。您只是不应该调用 setBounds()
并使用 canvas.
进行操作
请参阅下面的示例。
mButtonDrawable.setBounds(0, 0, mButtonDrawable.getIntrinsicWidth(), mButtonDrawable.getIntrinsicHeight());
canvas.save();
canvas.translate(20, 20);
canvas.scale(1, 1);
mButtonDrawable.draw(canvas);
canvas.restore();
canvas.save();
canvas.translate(420, 20);
canvas.scale(0.5f, 0.5f);
mButtonDrawable.draw(canvas);
canvas.restore();
canvas.save();
canvas.translate(620, 20);
canvas.scale(0.25f, 0.25f);
mButtonDrawable.draw(canvas);
canvas.restore();
结果:
我从 ImageView source 那里得到了一个想法。
我正在尝试制作一个看起来像带阴影的圆圈的可绘制对象。它需要缩放到不同的大小,需要绘制在 canvas 上。我使用 setBounds 来设置坐标和比例。
我的可绘制对象:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="0dp"
android:left="5dp"
android:right="5dp"
android:top="10dp">
<shape android:shape="oval">
<size
android:width="115dp"
android:height="115dp" />
<solid android:color="@color/level_button_dark" />
</shape>
</item>
<item
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<shape android:shape="oval">
<size
android:width="115dp"
android:height="115dp" />
<solid android:color="@color/level_button" />
</shape>
</item>
</layer-list>
我的绘图代码
mButtonDrawable.setBounds(20, 20, 220, 220);
mButtonDrawable.draw(canvas);
mButtonDrawable.setBounds(270, 20, 370, 120);
mButtonDrawable.draw(canvas);
mButtonDrawable.setBounds(420, 20, 470, 70);
mButtonDrawable.draw(canvas);
结果:
我想为所有比例实现一致的外观。 在模拟器上测试 api 18.
问题是您的圈子绑定到相同的坐标。所以当你打电话给
public void setBounds (int left, int top, int right, int bottom)
它改变坐标,画两个圆,但是它们之间的距离也应该变小。所以我猜一个 drawable 不会做。每个圆圈需要两个单独的可绘制对象。并独立改变他们的界限。这就是您可以达到预期效果的方法。
虽然@RexSplode 方法是有效的,但我找到了一种使用一个可绘制对象来完成此操作的方法。您只是不应该调用 setBounds()
并使用 canvas.
请参阅下面的示例。
mButtonDrawable.setBounds(0, 0, mButtonDrawable.getIntrinsicWidth(), mButtonDrawable.getIntrinsicHeight());
canvas.save();
canvas.translate(20, 20);
canvas.scale(1, 1);
mButtonDrawable.draw(canvas);
canvas.restore();
canvas.save();
canvas.translate(420, 20);
canvas.scale(0.5f, 0.5f);
mButtonDrawable.draw(canvas);
canvas.restore();
canvas.save();
canvas.translate(620, 20);
canvas.scale(0.25f, 0.25f);
mButtonDrawable.draw(canvas);
canvas.restore();
结果:
我从 ImageView source 那里得到了一个想法。