One day, I came across this article [open source project], which is composed’s skeleton screen, which is simple and easy to use. After reading it, I thought of the possibility of using a similar implementation to create a watermark function. The watermark feature was used in a previous project (custom View & AspectJ implementation). This open source project will probably not be in the business at the moment, just to implement ideas, write interesting code, and be a repository of knowledge.

preview

Demo

Click download demo or source code to build your own

The project address

Github

There are currently no plans to publish to the Maven repository. If there is demand, CV directly

use

  1. Use it on nodes that need to be watermarkedModifier.waterMark
modifier = Modifier.waterMark(
    visible = true,
    config = WaterMarkConfig(
        markText = "@a nest of Chickenness.",
        mvTextColor = Color(0xffeeeeee),
        row = 3,
        column = 3, alignment = alignmentPair.second ? : Alignment.Center, degrees = degrees ) )Copy the code
  1. Configure watermark. By changing theWaterMarkConfigEach parameter modifies the watermark details.
config = WaterMarkConfig(
        markText = "@a nest of Chickenness.",
        mvTextColor = Color(0xffeeeeee),
        row = 3,
        column = 3,
        alignment = Alignment.Center,
        degrees = degrees
    )
Copy the code
  • The available properties
The property name The default value instructions
markText – Content of watermark
mvTextColor Color.LightGray The color of the watermark text
mvTextSize 36px Watermark text font, unit: pixel
row 3 The number of lines in the watermark
column 3 Number of watermark columns
alignment Alignment.Center Alignment of watermarks
degrees 0 Rotation Angle of watermark. Suggestion: 15 (bottom right)
paddingVertical 0 Vertical margin
paddingHorizontal 0 The level of margin

The basic principle of

  • inwatermarkThere are only two files in it. Just do it 👻👻
  • The most important point is the principle of the Modifier chain. Scroll down to RugerMc’s illustration for the Compose Modifier implementation principle, and it’s surprisingly simple! This article. Really enjoyed)
  • The basic implementation is to compute positions and draw
  • This is the only piece of code I think you can bookmark (how to draw text inside the Jetpack Compose Canvas)
/ /... Omit the code that initializes paint

// Calculate the width of the text
val textWidth = config.markText.length * config.mvTextSize
// Calculate the height of the text
val textHeight: Float = paint.descent() - paint.ascent()
/ / calculate the offset
val textOffset: Float = textHeight / 2 - paint.descent()

// Build the text drawing area
// Left and top are the watermark starting positions calculated in the code
val txtBound = RectF( left, top, left + textWidth, top + textHeight )
// Unfortunately Compose does not have an API for drawText. Therefore, nativeCanvas is called here to obtain a native instance of implementing the Canvas interface and draw through the native instance.
it.nativeCanvas.drawText(
    config.markText,
    txtBound.centerX(), // Center point x coordinates
    txtBound.centerY() + textOffset,// // Y coordinates of the center point plus Offset. The drawn text is centered above and below
    paint
)
Copy the code

conclusion

– support for ICONS may be delayed for a while – terminally ill patients and new heroes!

The resources

【 Open source project 】 The Compose version of the skeleton screen is easy to use, learn about ~

Compose Modifier implementation principle, surprisingly simple! by RugerMc

See my article also graph one happy, really want to learn something to still have to see 👆🏻 big guy, strongly suggest suggest to praise them ~

My casual is fine.

Free reprint, leave a message on the line ~