绘制图像时绘制外阴影 [英] Drawing an outer shadow when drawing an image

问题描述

我目前通过在画布上绘制来在我的应用中创建一个圆形版本的图像.我想在图像周围画一个微弱的外阴影，但我不能完全正确.我有两个问题:1. 如何绘制外阴影(我似乎只能绘制带有 x 或 y 偏移量的阴影)2. 我怎样才能绘制阴影，使其没有附加图像中显示的伪影.代码:

I currently create a rounded version of an image in my app by drawing to a canvas. I would like to draw a faint outershadow around the image, but I cant quite get it right. I have 2 questions: 1. How can I draw an outer shadow (I can only seem to draw a shadow with a x or y offset) 2. How can I draw the shadow so that it does not have the artifacts shown in the attached image. Code:

![public Bitmap getRoundedCornerBitmap(Bitmap bitmap, float cornerRadius) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth()+6, bitmap.getHeight() +6, Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;
        int shadowRadius = getDipsFromPixel(3);
        final Rect imageRect = new Rect(shadowRadius, shadowRadius, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(imageRect);

        // This does not achieve the desired effect
        Paint shadowPaint = new Paint();
        shadowPaint.setAntiAlias(true);
        shadowPaint.setColor(Color.BLACK);
        shadowPaint.setShadowLayer((float)shadowRadius, 2.0f, 2.0f,Color.BLACK);
        canvas.drawOval(rectF, shadowPaint);

        canvas.drawARGB(0, 0, 0, 0);
        final Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(color);

        canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint);

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(bitmap, imageRect, imageRect, paint);

        return output;
    }][1]

这是我想要达到的效果的一个例子:

This is an example of the effect I am trying to achieve:

推荐答案

开始

是的，我还在挖掘 Nexus S

Yup I still dig the Nexus S

首先，请停止以这种方式屏蔽位图，您可以在不分配另一个 Bitmap 的情况下完成此操作，请查看 这篇关于如何绘制圆形(实际上是任何形状)图像的博客文章.

First of all, please stop masking bitmaps that way, you can accomplish this without allocating another Bitmap, checkout this blog post about how to draw rounded (and actually any shape) images.

第二次使用 Drawable 你可能可以弄清楚如何添加你的阴影，只要确保它不会被剪裁，在 18 岁以上你可以使用 ViewOverlays还要记住，有几种不支持的硬件绘图操作加速层，包括setShadowLayer 和BlurMaskFilter，如果性能对你来说不是问题，你可以像往常一样禁用它:

Second using that Drawable you probably can figure out how to add your shadow, just make sure it does not get clipped, on 18+ you could use ViewOverlays for that, also keep in mind that there are several unsupported drawing operations for hardware accelerated layers, that includes setShadowLayer and BlurMaskFilter, if performance is not an issue for you, you can disable it as always:

if (SDK_INT >= HONEYCOMB) {
  view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

并使用 setShadowLayer 就像您已经尝试过的那样:

And use setShadowLayer as you were trying already:

somePaint.setShadowLayer(shadowSize, deltaX, deltaY, shadowColor);

有关示例，请查看末尾的链接.

For a sample please check the link at the end.

如果你仍然想要硬件加速，你将不得不冒着过度绘制的风险伪造它，你可以使用径向渐变或自己绘制另一个椭圆来模糊它(如前所述不能使用BlurMaskFilter) 或使用预先模糊的Bitmap(更多遮罩).

If you still want to be hardware accelerated you will have to fake it at risk of overdrawing, you could use a radial gradient or draw another oval blurring it yourself (as mentioned before can't use BlurMaskFilter) or use a pre-blurred Bitmap (more masking).

对于如此微妙的阴影，如果需要性能，我宁愿平铺，完整的酱汁在香蕉架.

For such a subtle shadow I would rather just go flat if performance is required, the full sauce is in the banana stand.

更新:从 L 开始你可以使用真实的阴影.

这篇关于绘制图像时绘制外阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！