Android 中的阴影画笔样式

发布于 2024-10-21 15:30:48 字数 58 浏览 1 评论 0 原文

我需要帮助在画布上绘制阴影矩形(对角线描边)。 现在我除了手动制作之外找不到其他方法。 有什么想法吗?

I need help with drawing hatched rectangle on canvas (diagonal stroke).
Now I cant find out no other way than make it manually.
Any ideas?

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

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

发布评论

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

评论(2

不弃不离 2024-10-28 15:30:48

You can create a hatching pattern on a small bitmap, and use that with a BitmapShader. There's a sample in ApiDemos/graphics, called Pattern.java that shows you how to do it. Although, if you only need to draw a hatched rectangle, it might be easier to just do the hatching there manually.

撩心不撩汉 2024-10-28 15:30:48

更新

您可以使用渐变着色器绘制阴影线,请参阅 画一条彩虹:高级 VectorDrawable渲染(Android 开发者峰会 '18)


原始答案

要按照@svdree的建议创建着色器,我们需要一个可重复的阴影部分,如下所示:

对于任何给定的线旋转 45°,其水平或垂直交叉点为 hypot = √(thickness² + Thickness²)。任何边都恰好包含两条线,因此我们需要一个 2×hypot 大小的方形位图。

从图中可以看出,较白的线条来自0,hypot/2hypot/2,0以及从hypot/2,size到<代码>大小,hypot/2。要使线条到达边界的末尾,可以使用 SQUARE Cap。

将所有这些放在一起,代码如下:

fun Hatching45Shader(@Px lineWidth: Int, @ColorInt background: Int, @ColorInt lineColor: Int): Shader {
    val hypot = hypot(lineWidth.toDouble(), lineWidth.toDouble()).toInt()
    val bm = Bitmap.createBitmap(hypot + hypot, hypot + hypot, Bitmap.Config.ARGB_8888)
    bm.eraseColor(background)
    val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        strokeWidth = lineWidth.toFloat()
        color = lineColor
        strokeCap = Paint.Cap.SQUARE
    }
    Canvas(bm).apply {
        val half = hypot / 2f
        drawLine(0f, half, half, 0f, paint)
        val size = (hypot + hypot).toFloat()
        drawLine(half, size, size, half, paint)
    }
    return BitmapShader(bm, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT)
}

PS 如果 lineColor 是半透明的,它将与 background 混合。这是故意的。

Update

You can draw hatching with a gradient shader, see Draw me a rainbow: Advanced VectorDrawable rendering (Android Dev Summit '18).


Original answer

To create a shader as suggested by @svdree, we need a repeatable hatching section like this:

hatching section

For any given line rotated by 45°, its horizontal or vertical crossing takes hypot = √(thickness² + thickness²). Any edge contains exactly two lines, thus we need a square Bitmap of 2×hypot size.

According to the picture, whiter lines come from 0, hypot/2 to hypot/2, 0 and from hypot/2, size to size, hypot/2. To make the lines go to the end of bounds, SQUARE Cap can be used.

Putting all this together, here's the code:

fun Hatching45Shader(@Px lineWidth: Int, @ColorInt background: Int, @ColorInt lineColor: Int): Shader {
    val hypot = hypot(lineWidth.toDouble(), lineWidth.toDouble()).toInt()
    val bm = Bitmap.createBitmap(hypot + hypot, hypot + hypot, Bitmap.Config.ARGB_8888)
    bm.eraseColor(background)
    val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        strokeWidth = lineWidth.toFloat()
        color = lineColor
        strokeCap = Paint.Cap.SQUARE
    }
    Canvas(bm).apply {
        val half = hypot / 2f
        drawLine(0f, half, half, 0f, paint)
        val size = (hypot + hypot).toFloat()
        drawLine(half, size, size, half, paint)
    }
    return BitmapShader(bm, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT)
}

P. S. If lineColor is translucent, it will blend with background. This is intentional.

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