How to make a gradient rectangle in 2D gui?

kekeqy · March 8, 2021, 3:46am

Can someone give me a PG?

msDestiny14 · March 8, 2021, 6:54am

Looking at this forum post here: CSS vs BabylonJS GUI questions: line height, letter spacing, inline text styles, units, calc(), and gradients

I do not believe it is possible However, you can simple upload an image of a gradient and use that instead for your gui.

aWeirdo · March 8, 2021, 8:43am

You can extend GUI Rectangle control, overwrite the draw function, gadients can be made on canvas context:

context.createLinearGradient(x0, y0, x1, y1);

github.com

BabylonJS/Babylon.js/blob/master/gui/src/2D/controls/rectangle.ts

import { Container } from "./container";
import { Measure } from "../measure";
import { _TypeStore } from 'babylonjs/Misc/typeStore';
import { serialize } from 'babylonjs/Misc/decorators';

/** Class used to create rectangle container */
export class Rectangle extends Container {
    private _thickness = 1;
    private _cornerRadius = 0;

    /** Gets or sets border thickness */
    @serialize()
    public get thickness(): number {
        return this._thickness;
    }

    public set thickness(value: number) {
        if (this._thickness === value) {
            return;
        }

This file has been truncated. show original

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient#filling_a_rectangle_with_a_linear_gradient

kekeqy · March 8, 2021, 9:11am

I tried to do so, but the result were not correct.

let gradient = context.createLinearGradient(0, 0, 0, 100);
gradient.addColorStop(0, 'green');
gradient.addColorStop(0.25, 'blue');
gradient.addColorStop(1, 'red');
context.fillStyle = gradient;

Above is my code, the result shows only red.

aWeirdo · March 8, 2021, 9:21am

something like this should work
https://playground.babylonjs.com/#NTZ766

kekeqy · March 8, 2021, 9:24am

Thank you very much!