在 Android 中绘制可重复使用的图像

Question

我想在Android

中绘制这样的图像

我尝试使用设计工具设计图像并将其用作 Drawable，但它在 android 中变得像素化。我用UIBezierPath画在iOS app里。是否有可能在 Android 上实现同样的目标？这是我使用 XML <layer-list> drawable tag:

实现的

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:height="30dp" android:gravity="top">
    <shape android:shape="oval">
        <solid android:color="@color/grey" />
    </shape>
</item>
<item android:top="30dp" android:bottom="30dp" android:height="100dp" android:width="10dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/black" />
    </shape>
</item>
<item android:height="30dp" android:gravity="bottom">
    <shape android:shape="oval">
        <solid android:color="@color/white" />
    </shape>
</item>

并尝试使用 Paint and Canvas

public class CircleLineImage extends View{

//Setup initial color
private int paintColor = Color.BLACK;
//Defines paint and canvas
private Paint drawPaint;

public CircleLineImage(Context context, AttributeSet attrs) {
    super(context, attrs);
    setFocusable(true);
    setFocusableInTouchMode(true);
    setupPaint();
}

private void setupPaint() {
    drawPaint = new Paint();
    drawPaint.setColor(paintColor);
    drawPaint.setAntiAlias(true);
    drawPaint.setStrokeWidth(5);
    drawPaint.setStyle(Paint.Style.STROKE);
    drawPaint.setStrokeJoin(Paint.Join.ROUND);
    drawPaint.setStrokeCap(Paint.Cap.ROUND);
}

@Override
protected void onDraw(Canvas canvas) {
    canvas.drawCircle(0, 0, 10, drawPaint);
    canvas.drawLine(5, 10, 12, 200, drawPaint);
    canvas.drawCircle(0, 220, 20, drawPaint);
}
}

谢谢。

Answer 1

不同的屏幕密度需要不同尺寸的图像。如果可绘制对象只是 png 或 jpg，并且 drawable-hdpi 文件夹中只有一张图像，那么当您使用密度为 xxhdpi (Nexus 5) 的设备的应用程序时，图像会按比例放大。尝试制作不同大小的可绘制对象并将它们添加到不同的 android 资源文件夹。

drawable-mdpi（这将是基线，将此大小设置为 ImageView 的 dp）
drawable-hdpi（1.5 x 基线）
drawable-xhdpi（2 x 基线）
drawable-xxhdpi（3 x 基线）
drawable-xxxhdpi（4 x 基线）

在 android 教程中查看更多内容：http://developer.android.com/guide/practices/screens_support.html

Answer 2

请拿笔和纸，尝试画出您在 canvas 上想做的事情。 笔和纸仍然是掌握你想做的事情的最佳选择。

内容

你有 2 个椭圆和中间的一条线。它们都对齐相同的 x-Axis 值。 您的 draw* 调用中的 x 值应该没有变化。

绘画

drawPaint.setStyle(Paint.Style.STROKE);

不会填写。要填充圆圈，您需要在绘画对象上设置 FILL。

剪掉圆圈

你的圈子被切断了，因为你正在 canvas 之外尝试。同样，只要画出草图，您的视图和 canvas 就有宽度和高度，使用它们！不要只是为你的界限假设任意值。

所以...

去计算你的 canvas 的中心（例如 canvas.width() / 2）。对于 y 值均匀分布而不是硬编码也是如此。

更好的解决方案如下所示：

@Override
protected void onDraw(Canvas canvas) {
    drawPaint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(centerX, 30, 20, drawPaint);
    canvas.drawCircle(centerX, 170, 20, drawPaint);
    drawPaint.setStyle(Paint.Style.STROKE);
    canvas.drawLine(centerX, 50, centerX, 150, drawPaint);
}

在 Android 中绘制可重复使用的图像

Drawing a ReUsable Image in Android

android

android-layout

android-drawable

内容

绘画

剪掉圆圈

所以...