在图像视图的触摸事件上填充两个图像叠加,如搜索条

Question

有两个图像黑色和蓝色,而触摸蓝色图像它应该像进展一样填充,我实现使用多个切割图像,而不使用画布但不smoothness接触,如100 Pushups应用程序.

实际上我正在尝试实现类似100 Pushups应用程序,如上所述,我有一个 链接,但是使用画布实现,我想实现使用图像,我谷歌但没有运气,任何链接或教程类似于该应用程序( 100次俯卧撑)？

Answer 1

这是我使用剪辑路径想出的东西。我正在使用以下图像（编码器颜色），其中背景是实心的，前景图像在透明背景上仅包含蓝色圆圈。第一个背景图像被绘制到屏幕上，然后设置剪辑路径，以便进度图像（前景图像）正确地绘制在其顶部。

背景图; https://i.stack.imgur.com/Rvxxj.png
前景图像；https://i.stack.imgur.com/1aTdG.png

和代码；

private class ProgressView extends View {

    private Bitmap bgBitmap;
    private Bitmap fgBitmap;
    private RectF fullRect = new RectF();
    private Path clipPath = new Path();

    public ProgressView(Context context) {
        super(context);
        bgBitmap = BitmapFactory.decodeResource(
                                   context.getResources(), R.drawable.bg);
        fgBitmap = BitmapFactory.decodeResource(
                                   context.getResources(), R.drawable.fg);
    }

    @Override
    public void onDraw(Canvas c) {
        fullRect.right = getWidth();
        fullRect.bottom = getHeight();

        c.drawBitmap(bgBitmap, null, fullRect, null);

        float angle = SystemClock.uptimeMillis() % 3600 / 10.0f;

        clipPath.reset();
        clipPath.setLastPoint(getWidth() / 2, getHeight() / 2);
        clipPath.lineTo(getWidth() / 2, getHeight());
        clipPath.arcTo(fullRect, -90, angle);
        clipPath.lineTo(getWidth() / 2, getHeight() / 2);
        c.clipPath(clipPath);

        c.drawBitmap(fgBitmap, null, fullRect, null);

        invalidate();
    }   
}

用合适的图像替换我的临时图像并以更合适的方式更新角度应该不会太困难。