Auto Draft

3
(2)
Created on September 03, 2019, Last modified on June 08, 2021

An element will only render something when a texture is defined. A texture is rendered as a background, and the children are rendered in front of it. The easiest way to define a texture is by specifying any of the following shorthand properties:

NameTypeDefaultDescription
rectBooleanfalseEnables a solid color or gradient
srcString''Enables image texture
textObject{}Enables text texture

These properties are just shorthands. You can also specify the texture object directly by using one of the available texture types.

Live demo

class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            GradientTexture:{
                x: 50, y: 50, w: 150, h: 150, rect: true, colorUl: 0xFFD67210, colorBr: 0xFF144B83,
                Desc:{ x: 0, y: 160, text:{ text: 'I am a "gradient" texture', fontSize: 22, wordWrap: true, wordWrapWidth: 450, lineHeight: 30 }},
            },
            ImageTexture:{
                x: 350, y: 150, src: '/Lightning/img/LngDocs_LilLightningIdle.png',
                Desc:{ x: 0, y: 190, text:{ text: 'I am a "image" texture', fontSize: 22, wordWrap: true, wordWrapWidth: 450, lineHeight: 30 }},
            },
            TextTexture:{
                x: 50, y: 400, colorTop: 0xFFF1F1F1, colorBottom: 0xFF144B83, text:{ text: 'TEXT', fontSize: 40, wordWrap: true, wordWrapWidth: 450, lineHeight: 30 },
                Desc:{ x: 0, y: 50, text:{ text: 'I am a "text" texture', fontSize: 22, wordWrap: true, wordWrapWidth: 450, lineHeight: 30 }},
            },
            SolidColorTexture:{
                x: 350, y: 450, w: 150, h: 150, rect: true, color: 0xFF144B83,
                Desc:{ x: 0, y: 160, text:{ text: 'I am a "solid color" texture', fontSize: 22, wordWrap: true, wordWrapWidth: 450, lineHeight: 30 }},
            }
        }
    }
}

const app = new BasicUsageExample({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(app.stage.getCanvas());

Give feedback

Rating - 3 / 5. . Reviews - 2

No votes so far! Be the first to rate this post.

Go To Top