如何绘制“阴影”?图像的版本?

发布于 2024-08-15 14:31:24 字数 1530 浏览 11 评论 0原文

我陷入了一个简单的问题,这让我发疯。在标准 Android MapView 中,当您调用 drawAt 方法时,覆盖图像会自动绘制阴影。我想重新创建相同的阴影效果,但我不确定如何使图像的阴影版本(与主图像分开绘制)与主图像正确对齐。

private static class SampleView extends View {
    private Drawable mDrawable;
    private int mMarkerXOffset;
    private int mMarkerYOffset;

    public SampleView(Context context) {
        super(context);

        mDrawable = context.getResources().getDrawable(R.drawable.icon); 
        mDrawable.setBounds(0, 0, mDrawable.getIntrinsicWidth(), mDrawable.getIntrinsicHeight()); 

        mMarkerXOffset = (mDrawable.getIntrinsicWidth() / 2);
        mMarkerYOffset = mDrawable.getIntrinsicHeight();
    }

    private void DrawNormalImg(Canvas canvas, int nX, int nY)  {   
        canvas.save(Canvas.MATRIX_SAVE_FLAG);   
        canvas.translate(nX, nY);   
        mDrawable.draw(canvas);   
        canvas.restore();   
    }   

    private void DrawShadowImg(Canvas canvas, int nX, int nY)  { 
        canvas.save(Canvas.MATRIX_SAVE_FLAG);

        mDrawable.setColorFilter(0x7f000000, PorterDuff.Mode.SRC_IN);   

        canvas.translate(nX,nY);   
        canvas.skew(-0.9F, 0.0F);   
        canvas.scale(1.0F, 0.5F);   

        mDrawable.draw(canvas);   
        mDrawable.clearColorFilter();   

        canvas.restore();   
    }  

    @Override protected void onDraw(Canvas canvas) {
        int nX = 100;   
        int nY = 50;   

        canvas.drawColor(Color.WHITE);

        DrawShadowImg(canvas, nX, nY);   
        DrawNormalImg(canvas, nX, nY);
    }

I'm stuck on a simple problem which is driving me nuts. In the standard Android MapView overlay images have a shadow drawn for them automatically when you call the drawAt method. I want to recreate the same shadow effect, but I'm not sure how to make the shadow version of the image (which is drawn separately from the main image) align properly with the main image.

private static class SampleView extends View {
    private Drawable mDrawable;
    private int mMarkerXOffset;
    private int mMarkerYOffset;

    public SampleView(Context context) {
        super(context);

        mDrawable = context.getResources().getDrawable(R.drawable.icon); 
        mDrawable.setBounds(0, 0, mDrawable.getIntrinsicWidth(), mDrawable.getIntrinsicHeight()); 

        mMarkerXOffset = (mDrawable.getIntrinsicWidth() / 2);
        mMarkerYOffset = mDrawable.getIntrinsicHeight();
    }

    private void DrawNormalImg(Canvas canvas, int nX, int nY)  {   
        canvas.save(Canvas.MATRIX_SAVE_FLAG);   
        canvas.translate(nX, nY);   
        mDrawable.draw(canvas);   
        canvas.restore();   
    }   

    private void DrawShadowImg(Canvas canvas, int nX, int nY)  { 
        canvas.save(Canvas.MATRIX_SAVE_FLAG);

        mDrawable.setColorFilter(0x7f000000, PorterDuff.Mode.SRC_IN);   

        canvas.translate(nX,nY);   
        canvas.skew(-0.9F, 0.0F);   
        canvas.scale(1.0F, 0.5F);   

        mDrawable.draw(canvas);   
        mDrawable.clearColorFilter();   

        canvas.restore();   
    }  

    @Override protected void onDraw(Canvas canvas) {
        int nX = 100;   
        int nY = 50;   

        canvas.drawColor(Color.WHITE);

        DrawShadowImg(canvas, nX, nY);   
        DrawNormalImg(canvas, nX, nY);
    }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

彩虹直至黑白 2024-08-22 14:31:24

好问题!我认为解决方案是将图像倾斜为平行四边形。考虑一个地图图钉的图像,看起来像这样:

..X..
.XXX.
..X..
..|..
..|..
..|..

Where 。是透明度。您可能希望像这样倾斜图像以获得阴影:

     ..X..
    .XXX.
   ..X..
  ..|..
 ..|..
..|..

请注意,顶部和底部的宽度与原始图像中的宽度相同。

Nice question! I think the solution will be skew the image as a parallelogram. Consider an image of a map pin that looks something like this:

..X..
.XXX.
..X..
..|..
..|..
..|..

Where . is transparency. You would want to skew the image like this for the shadow:

     ..X..
    .XXX.
   ..X..
  ..|..
 ..|..
..|..

Notice the top and bottom are the same width as in the original image.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文