在android中创建带点的图像

时间:2013-02-01 03:01:26

标签: android image

我想创建类似于这个问题的Can I convert an image into a grid of dots?,但我找不到任何问题的答案。基本的想法是从手机加载图片并应用这个点网格。我将不胜感激任何建议。

2 个答案:

答案 0 :(得分:3)

正如其他人可能建议的那样,您的问题也可以使用OpenGL着色语言(GLSL)中的片段着色器来解决。 GLSL可能需要痛苦的设置。

以下是我使用Android Renderscript的解决方案(很像GLSL,但专为Android设计。它使用不多)。首先,设置Renderscript> Hello Compute示例来自官方Android SDK示例。接下来,使用以下内容替换mono.rs:

#pragma version(1)
#pragma rs java_package_name(com.android.example.hellocompute)

rs_allocation gIn;
rs_allocation gOut;
rs_script gScript;

static int mImageWidth;
const uchar4 *gPixels;

const float4 kBlack = {
    0.0f, 0.0f, 0.0f, 1.0f
};

// There are two radius's for each circle for anti-aliasing reasons. 
const static uint32_t radius = 15; 
const static uint32_t smallerRadius = 13;

// Used so that we have smooth circle edges
static float smooth_step(float start_threshold, float end_threshold, float value) {
    if (value < start_threshold) {
        return 0;
    }
    if (value > end_threshold) {
        return 1;
    }
    value = (value - start_threshold)/(end_threshold - start_threshold);
    // As defined at http://en.wikipedia.org/wiki/Smoothstep
    return value*value*(3 - 2*value);
}

void root(const uchar4 *v_in, uchar4 *v_out, uint32_t u_x, uint32_t u_y) {
    int32_t diameter = radius * 2;

    // Compute distance from center of the circle
    int32_t x = u_x % diameter - radius;
    int32_t y = u_y % diameter - radius;
    float dist = hypot((float)x, (float)y);

    // Compute center of the circle
    uint32_t center_x = u_x /diameter*diameter + radius;
    uint32_t center_y = u_y /diameter*diameter + radius;

    float4 centerColor = rsUnpackColor8888(gPixels[center_x + center_y*mImageWidth]);
    float amount = smooth_step(smallerRadius, radius, dist);
    *v_out = rsPackColorTo8888(mix(centerColor, kBlack, amount));
}

void filter() {
    mImageWidth = rsAllocationGetDimX(gIn);
    rsForEach(gScript, gIn, gOut); // You may need a forth parameter, depending on your target SDK.
}

在HelloCompute.java中,使用以下内容替换createScript():

private void createScript() {
      mRS = RenderScript.create(this);

        mInAllocation = Allocation.createFromBitmap(mRS, mBitmapIn,
                                                    Allocation.MipmapControl.MIPMAP_NONE,
                                                    Allocation.USAGE_SCRIPT);
        mOutAllocation = Allocation.createTyped(mRS, mInAllocation.getType());

        mScript = new ScriptC_mono(mRS, getResources(), R.raw.mono);

        mScript.bind_gPixels(mInAllocation);

        mScript.set_gIn(mInAllocation);
        mScript.set_gOut(mOutAllocation);
        mScript.set_gScript(mScript);
        mScript.invoke_filter();
        mOutAllocation.copyTo(mBitmapOut);
}

最终结果将如下所示 enter image description here

ALTERNATIVE

如果您不关心每个点是纯色,您可以执行以下操作:

有一种非常简单的方法可以做到这一点。图片需要BitmapDrawable,覆盖图块需要BitmapDrawable(我们称之为overlayTile)。在overlayTile,请致电

overlayTile.setTileModeX(Shader.TileMode.REPEAT);
overlayTile.setTileModeY(Shader.TileMode.REPEAT);

接下来,使用LayerDrawable将两个Drawable合并为一个Drawable。如果您愿意,可以将结果LayerDrawable用作某些ImageView的src。或者,您可以convert the Drawable to a Bitmap并将其保存到磁盘。

答案 1 :(得分:1)

我认为学习OpenGL可能对你想要达到的目标有所帮助。

您可能想要了解Displaying Graphics with OpenGL ES

的基础知识

希望有所帮助。 :)