填写两个图像叠加像搜索栏上的图像视图触摸事件 [英] Fill two image overlay like seekbar on touch event of image-view

问题描述

有两个图像黑色和蓝色，而触及蓝色图像应该填补像的进步，我使用多个削减图像来实现，而无需使用帆布，但没有得到光滑度触摸，像<一个href="https://play.google.com/store/apps/details?id=alexcrusher.just6weeks.pushups&feature=search_result#?t=W251bGwsMSwxLDEsImFsZXhjcnVzaGVyLmp1c3Q2d2Vla3MucHVzaHVwcyJd">100俯卧撑应用。

There are two image black and blue while touching on blue image it should fill like progress, I achieved using multiple cuts images without using canvas but not get smoothness on touch, like 100 Pushups application.

其实我想实现类似像100俯卧撑的应用程序，因为我上面提到的，我得到了一个的链接以但那是用帆布实现，我想实现利用图像，我谷歌，但没有运气，任何一个环节或教程类似的应用程序（100个俯卧撑）？

Actually I'm trying to achieve similar like 100 Pushups application as I mention above, I got one link to but that's achieved using canvas and I want to achieve using Images, I Google but no luck, any link or tutorial similar to that application(100 push-ups)?

推荐答案

这里的东西我想出了用夹路径。我用下面的图像（codeR颜色）外面的背景是一个坚实的和前景有一个含有透明背景的只有蓝色的圆圈。第一背景图像被绘制到屏幕上，然后夹路径被设置，使得进度图像，前景之一，被吸入适当在它的上面。

Here's something I came up with using clip path. I'm using following images (coder colours) out of which background is a solid one and foreground one contains only blue circle on transparent background. First background image is drawn onto screen, then clip path is set so that progress image, foreground one, is drawn properly on top of it.

背景图片; http://i.imgur.com/Sf6kg.png
前景图像; http://i.imgur.com/Svtoh.png

Background image; http://i.imgur.com/Sf6kg.png
Foreground image; http://i.imgur.com/Svtoh.png

而code;

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();
    }   
}

这应该不会太困难，用体面的替代我的临时的图像和更适当的方式更新的角度。

Should it not be too difficult to replace my temporary images with decent ones and update the angle in a more appropriate way.

这篇关于填写两个图像叠加像搜索栏上的图像视图触摸事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！