Rectangle

Published: September 03, 2019
Edited: November 06, 2020

The rectangle texture is actually a single pixel texture that is stretched to the dimensions of the element. Using the color property it can be used to give an element to a solid background. When setting different colors for different edges (colorTop etc) linear gradients can be created.

class TextureDemo extends lng.Application {
    static _template() {
        return {
            RectangleDefault: {
                x: 100, y: 100, w: 200, h: 100, rect: true
            },
            RectangleWithColor: {
                x: 400, y: 100, w: 200, h: 100, rect: true, color: 0xFF1C27bC
            },
            RectangleWithGradientTopBottom: {
                x: 100, y: 300, w: 200, h: 100, rect: true, colorTop: 0xFF636EFB, colorBottom: 0xFF1C27bC
            },
            RectangleWithGradientLeftRight: {
                x: 400, y: 300, w: 200, h: 100, rect: true, colorLeft: 0xFF636EFB, colorRight: 0xFF1C27bC
            },
            RectangleWithGradientDiagonal: {
                x: 100, y: 500, w: 200, h: 100, rect: true, colorUl: 0xFF636EFB, colorUr: 0xFF00FF00, colorBr: 0xFF1C27bC, colorBl: 0xFF00FF00,
            },
            RectangleWithGradientDiagonalMixed: {
                x: 400, y: 500, w: 200, h: 100, rect: true, colorLeft: 0xFF00FF00, colorBr: 0xFF1C27bC, colorUr: 0xFFFF0000
            }
        }
    };
}

const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
const app = new TextureDemo(options);
document.body.appendChild(app.stage.getCanvas());
PHP Code Snippets Powered By : XYZScripts.com