开发者

How to create a custom Java Swing GUI Component with a shape and gradient

开发者 https://www.devze.com 2023-03-22 13:52 出处:网络
I have to create a custom component on my JFrame, the Component will show the storage status of that user, the storage will be in percentage.

I have to create a custom component on my JFrame, the Component will show the storage status of that user, the storage will be in percentage.

I need to create something like this:

How to create a custom Java Swing GUI Component with a shape and gradient

I tried a custom JLabel t开发者_C百科o create a label and then coloring that label from left to right, but I was unable to create a cloud shape Label and then filling that label according to a variable value.

How should I do this and what is the best way to do it?

One time I thought I should use series of images to show the status of user storage.

Thanks!


I think you're going to need to use an image mask (examples here and here) if you are to replicate that cloud exactly.

The process will require 2 images:

  • The cloud outline (the blue parts)
  • An image mask is the shape of the cloud, probably black outside and white inside

Then your drawing process, which you'll have to do each time the % storage changes will be:

  1. Create a new buffered image
  2. Draw then green fill bar in the style you want (e.g. slanted as in this image)
  3. Copy the image mask over this
  4. Draw this new image to the screen, with the mask applied as described here
  5. Draw the cloud outline image to screen

That's going to take an hour or so for you to put together, so I'm not going to do it for you. Have a go, and if you run in to problems (or don't understand anything I just described) then ask about that specifically.


You can use GlyphVector#getGlyphOutline() to get the shape of a Unicode character like ☁ \u2601 and fill it with a GradientPaint.


You can do that with a JLabel and a custom-implemented class derived from Icon.


doesn't this help? Java gradient label example

And if you understand (or can translate from) portuguese, there's also this discussion with a solution at the end

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号