# Paint Property setup as gradient

**URL:** <https://forum.inductiveautomation.com/t/paint-property-setup-as-gradient/82799>\
**Category:** Module Development\
**Tags:** vision\
**Created:** [December 6, 2023, 4:44pm UTC](https://forum.inductiveautomation.com/t/paint-property-setup-as-gradient/82799 "2023-12-06T16:44:16Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 6, 2023, 4:44pm UTC](https://forum.inductiveautomation.com/t/paint-property-setup-as-gradient/82799/1 "2023-12-06T16:44:16Z")

</div>

I have a paint property which is supposed to fill the top of my component and it does. However if I set it up as a gradient it looks proper on the original size of the component but the gradient doesn't stretch along with the component. I hope some screenshots will make it clear.

The property of type "Paint"  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/b/bb6cba98a296c663a4872c55ab6153004a02b8aa.png)

Original component size  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/d/5d828b628996b131ee607bba8ef1df437fbe6923.png)

Stretched component  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/c/5c83c6d007e8609157b01d1e29a7de4d0395677b.png)

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 6, 2023, 4:46pm UTC](https://forum.inductiveautomation.com/t/paint-property-setup-as-gradient/82799/2 "2023-12-06T16:46:23Z")

</div>

The code for painting this part of the component looks like this:

```auto
g.setPaint(jobColor);
g.fill(binHeader);
g.setPaint(strokePaint);
g.draw(binHeader);

```

where `binHeader` is an `Ellipse2D` object

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 6, 2023, 4:49pm UTC](https://forum.inductiveautomation.com/t/paint-property-setup-as-gradient/82799/3 "2023-12-06T16:49:25Z")

</div>

Try using a `RelativeLinearGradientPaint`?

> **[RelativeLinearGradientPaint](https://files.inductiveautomation.com/sdk/javadoc/ignition81/8.1.33/com/inductiveautomation/ignition/client/util/gui/paints/RelativeLinearGradientPaint.html)**
>
> declaration: package: com.inductiveautomation.ignition.client.util.gui.paints, class: RelativeLinearGradientPaint

> Similar to LinearGradientPaint, but this one specifies it's points as percentages of the user-space bounds of the object it will fill.

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 6, 2023, 4:53pm UTC](https://forum.inductiveautomation.com/t/paint-property-setup-as-gradient/82799/4 "2023-12-06T16:53:42Z")

</div>

Having the property setup as type `Paint` allows for this window (see screenshot) to popup and set the fill to either solid, linear gradient, or radial gradient. If I change the property type to `RelativeLinearGradientPaint`, then I lose that variety.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/7/77453945dd2b81d8cef1f9d18bbf3a7c6559635a.png)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 6, 2023, 5:01pm UTC](https://forum.inductiveautomation.com/t/paint-property-setup-as-gradient/82799/5 "2023-12-06T17:01:48Z")

</div>

Actually, apparently that editor spits out a RelativeLinearGradientPaint anyways, so it's not the quick fix to your problem.

Can you try specifying the shape size by calling the `beforePaint` method if the paint you have is a `RelativePaint`?

> **[RelativePaint](https://files.inductiveautomation.com/sdk/javadoc/ignition81/8.1.33/com/inductiveautomation/ignition/client/util/gui/paints/RelativePaint.html#beforePaint(java.awt.geom.Rectangle2D))**
>
> declaration: package: com.inductiveautomation.ignition.client.util.gui.paints, interface: RelativePaint

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 6, 2023, 5:39pm UTC](https://forum.inductiveautomation.com/t/paint-property-setup-as-gradient/82799/6 "2023-12-06T17:39:06Z")

</div>

Not sure how to go about that

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 6, 2023, 5:41pm UTC](https://forum.inductiveautomation.com/t/paint-property-setup-as-gradient/82799/7 "2023-12-06T17:41:55Z")

</div>

Something like this:

```java
            if (fillPaint instanceof RelativePaint) {
                ((RelativePaint) fillPaint).beforePaint(logicalBounds);
            }
            g.setPaint(fillPaint);

```

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 6, 2023, 5:46pm UTC](https://forum.inductiveautomation.com/t/paint-property-setup-as-gradient/82799/8 "2023-12-06T17:46:49Z")

</div>

Perfect, that solved it.  
Thank You!