How to clip part of a rectangle (to create a polygonal shape) (Lightning 2)

Get Help
1

I want to clip a part of a rectangle to create the following shape. I also need to apply a gradient on the item.
customLabel - Copy

Was able to achieve it with two rectangles. But then applying the gradient across becomes an issue.
Any suggestions would be helpful

2

Hi @lightningtny . As of now, the only way to clip content is from a rect texture. I believe that, for you to accomplish this effect, you might need to create your own shader.

Now, you might be able to accomplish this by combining multiple textures. For the diagonal part, you might create a slim rectangle and rotate it. For the rest of the borders of the shape you can use additional rectangles with the same properties of the diagonal. Finally, you could rotate another rect in a square shape and rotate it to achieve a triangle for the white part.

Let me see if I can come up with something!

3

Hi again @lightningtny. While this solution is not perfect and doesn’t cover arbitrary shape resizing, you should be able to manually adjust it if you need to change the size of the shape.

Here’s a working example:

https://lightningjs.io/playground/#I0IMrXp0I8dP

HelloWorld.js

import Lightning from '@lightningjs/core';

import Polygon from './Polygon.js';

export default class App extends Lightning.Application {
    static _template() {
        return {
            rect: true,
            color: 0xffffffff,
            w: 800,
            h: 500,
            Polygon: {
                type: Polygon,
                mount: 0.5,
                x: w => w/3,
                y: h => h/2,
            }
        }
    }
}

Polygon.js

import Lightning from '@lightningjs/core';

export default class Polygon extends Lightning.Component {
    static _template() {
        const BORDER_WIDTH = 5;
        const DIAGONAL_IN_RADIANS = 0.401426;
        const SHAPE_WIDTH = 300;
        const SHAPE_HEIGHT = 150;

        return {
            w: SHAPE_WIDTH,
            h: SHAPE_HEIGHT,
            rect: true,
            clipping: true,

            Background: {
                w: w => w,
                h: h => h,
                rect: true,
                colorTop: 0xffff7400,
                colorBottom: 0xffffde1a
            },
            TopBorder: {
                rect: true,
                color: 0xff000000,
                w: w => w,
                h: BORDER_WIDTH,
            },
            LeftBorder: {
                rect: true,
                color: 0xff000000,
                w: BORDER_WIDTH,
                h: h => h, 
            },
            BottomBorder: {
                rect: true,
                color: 0xff000000,
                w: w => w - (BORDER_WIDTH * 13),
                h: BORDER_WIDTH,
                y: h => h - BORDER_WIDTH,
            },
            RightBorder: {
                rect: true,
                color: 0xff000000,
                w: BORDER_WIDTH,
                h: h => h + (BORDER_WIDTH * 3), 
                x: w => w - (BORDER_WIDTH*7),
                y: (BORDER_WIDTH * -1),
                rotation: DIAGONAL_IN_RADIANS,
            },
            Triangle: {
                rect: true,
                color: 0xffffffff,
                w: w => w + (BORDER_WIDTH * 3),
                h: h => h + (BORDER_WIDTH * 3), 
                x: w => w - ((BORDER_WIDTH * 8) + 2),
                y: h => (h / 3) + 6,
                rotation: DIAGONAL_IN_RADIANS,
            }
        }
    }
}

And the result:

image