View all @here/harp-text-canvas analysis

harp-text-canvas

To help you get started, we’ve selected a few @here/harp-text-canvas examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

heremaps / harp.gl / @here / harp-examples / src / textcanvas_picking.ts View on Github

window.addEventListener("mouseup", onMouseClick);

        camera = new THREE.OrthographicCamera(
            -window.innerWidth / 2.0,
            window.innerWidth / 2.0,
            window.innerHeight / 2.0,
            -window.innerHeight / 2.0
        );
        camera.position.z = 1.0;
        camera.near = 0.0;
        camera.updateProjectionMatrix();

        // Init TextCanvas
        textRenderStyle = new TextRenderStyle({
            fontSize: {
                unit: FontUnit.Percent,
                size: 200.0,
                backgroundSize: 0.0
            }
        });
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 32).then(
            (loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: 64
                });
                loadedFontCatalog
                    .loadCharset("black" + "red" + "green" + "blue", textRenderStyle)
                    .then(() => {
                        assetsLoaded = true;
                    });

heremaps / harp.gl / @here / harp-examples / src / textcanvas_material.ts View on Github

void main() {
            vec4 color = vec4(1.0, 0.0, 0.0, vColor.a);
            float a = abs(sin((yPos / 300.0 + time * 0.5) * 10.0)) - 0.5;
            float b = smoothstep(0.0, 1.0, a) + 0.5;
            color.a *= getOpacity(vec2(0.0), vWeight + b * 0.25);
            if (color.a &lt; 0.05) {
                discard;
            }
            gl_FragColor = color;
        }`;

        // Init TextCanvas
        textRenderStyle = new TextRenderStyle({
            fontSize: {
                unit: FontUnit.Percent,
                size: 300.0,
                backgroundSize: 0.0
            }
        });
        textLayoutStyle = new TextLayoutStyle({
            horizontalAlignment: HorizontalAlignment.Center
        });
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 16).then(
            (loadedFontCatalog: FontCatalog) =&gt; {
                // snippet:textcanvas_material_0.ts
                materialA = createSdfTextMaterial({
                    fontCatalog: loadedFontCatalog,
                    vertexSource: materialVertexSource,
                    fragmentSource: materialFragmentSourceA
                });
                materialA.uniforms.time = new THREE.Uniform(0.0);

heremaps / harp.gl / @here / harp-examples / src / textcanvas_layout.ts View on Github

gui.add(guiOptions, "boundsEnabled");

        guiOptions.color.r = textRenderStyle.color!.r * 255.0;
        guiOptions.color.g = textRenderStyle.color!.g * 255.0;
        guiOptions.color.b = textRenderStyle.color!.b * 255.0;
        guiOptions.backgroundColor.r = textRenderStyle.backgroundColor!.r * 255.0;
        guiOptions.backgroundColor.g = textRenderStyle.backgroundColor!.g * 255.0;
        guiOptions.backgroundColor.b = textRenderStyle.backgroundColor!.b * 255.0;

        const textRenderStyleGui = gui.addFolder("textRenderStyle");
        textRenderStyleGui
            .add(textRenderStyle.fontSize!, "unit", {
                Em: FontUnit.Em,
                Pixel: FontUnit.Pixel,
                Point: FontUnit.Point,
                Percent: FontUnit.Percent
            })
            .onChange((value: string) => {
                textRenderStyle.fontSize!.unit = Number(value);
            });
        textRenderStyleGui.add(textRenderStyle.fontSize!, "size", 0.1, 100, 0.1);
        textRenderStyleGui.add(textRenderStyle.fontSize!, "backgroundSize", 0.0, 100, 0.1);
        textRenderStyleGui.addColor(guiOptions, "color").onChange(() => {
            textRenderStyle.color!.r = guiOptions.color.r / 255.0;
            textRenderStyle.color!.g = guiOptions.color.g / 255.0;
            textRenderStyle.color!.b = guiOptions.color.b / 255.0;
        });
        textRenderStyleGui.add(textRenderStyle, "opacity", 0.0, 1.0, 0.01);
        textRenderStyleGui.addColor(guiOptions, "backgroundColor").onChange(() => {
            textRenderStyle.backgroundColor!.r = guiOptions.backgroundColor.r / 255.0;
            textRenderStyle.backgroundColor!.g = guiOptions.backgroundColor.g / 255.0;
            textRenderStyle.backgroundColor!.b = guiOptions.backgroundColor.b / 255.0;

heremaps / harp.gl / @here / harp-examples / src / textcanvas_path.ts View on Github

});

        guiOptions.color.r = textRenderStyle.color!.r * 255.0;
        guiOptions.color.g = textRenderStyle.color!.g * 255.0;
        guiOptions.color.b = textRenderStyle.color!.b * 255.0;
        guiOptions.backgroundColor.r = textRenderStyle.backgroundColor!.r * 255.0;
        guiOptions.backgroundColor.g = textRenderStyle.backgroundColor!.g * 255.0;
        guiOptions.backgroundColor.b = textRenderStyle.backgroundColor!.b * 255.0;

        const textStyleGui = gui.addFolder("TextStyle");
        textStyleGui
            .add(textRenderStyle.fontSize, "unit", {
                Em: FontUnit.Em,
                Pixel: FontUnit.Pixel,
                Point: FontUnit.Point,
                Percent: FontUnit.Percent
            })
            .onChange((value: string) => {
                textRenderStyle.fontSize.unit = Number(value);
            });
        textStyleGui.add(textRenderStyle.fontSize, "size", 0.1, 100, 0.1);
        textStyleGui.add(textRenderStyle.fontSize, "backgroundSize", 0.0, 100, 0.1);
        textStyleGui.addColor(guiOptions, "color").onChange(() => {
            textRenderStyle.color!.r = guiOptions.color.r / 255.0;
            textRenderStyle.color!.g = guiOptions.color.g / 255.0;
            textRenderStyle.color!.b = guiOptions.color.b / 255.0;
        });
        textStyleGui.add(textRenderStyle, "opacity", 0.0, 1.0, 0.01);
        textStyleGui.addColor(guiOptions, "backgroundColor").onChange(() => {
            textRenderStyle.backgroundColor!.r = guiOptions.backgroundColor.r / 255.0;
            textRenderStyle.backgroundColor!.g = guiOptions.backgroundColor.g / 255.0;
            textRenderStyle.backgroundColor!.b = guiOptions.backgroundColor.b / 255.0;

heremaps / harp.gl / @here / harp-examples / src / textcanvas_renderTarget.ts View on Github

function addGUIControls() {
        guiOptions.color.r = textRenderStyle.color!.r * 255.0;
        guiOptions.color.g = textRenderStyle.color!.g * 255.0;
        guiOptions.color.b = textRenderStyle.color!.b * 255.0;
        guiOptions.backgroundColor.r = textRenderStyle.backgroundColor!.r * 255.0;
        guiOptions.backgroundColor.g = textRenderStyle.backgroundColor!.g * 255.0;
        guiOptions.backgroundColor.b = textRenderStyle.backgroundColor!.b * 255.0;

        gui.add(textRenderStyle.fontSize!, "unit", {
            Em: FontUnit.Em,
            Pixel: FontUnit.Pixel,
            Point: FontUnit.Point,
            Percent: FontUnit.Percent
        }).onChange((value: string) => {
            textRenderStyle.fontSize!.unit = Number(value);
        });
        gui.add(textRenderStyle.fontSize!, "size", 0.1, 100, 0.1);
        gui.add(textRenderStyle.fontSize!, "backgroundSize", 0.0, 100, 0.1);
        gui.addColor(guiOptions, "color").onChange(() => {
            textRenderStyle.color!.r = guiOptions.color.r / 255.0;
            textRenderStyle.color!.g = guiOptions.color.g / 255.0;
            textRenderStyle.color!.b = guiOptions.color.b / 255.0;
        });
        gui.add(textRenderStyle, "opacity", 0.0, 1.0, 0.01);
        gui.addColor(guiOptions, "backgroundColor").onChange(() => {
            textRenderStyle.backgroundColor!.r = guiOptions.backgroundColor.r / 255.0;
            textRenderStyle.backgroundColor!.g = guiOptions.backgroundColor.g / 255.0;
            textRenderStyle.backgroundColor!.b = guiOptions.backgroundColor.b / 255.0;
        });

heremaps / harp.gl / @here / harp-examples / src / textcanvas.ts View on Github

guiOptions.backgroundColor.b = textRenderStyle.backgroundColor!.b * 255.0;

        gui.add(guiOptions, "input").onFinishChange((value: string) => {
            textSample = ContextualArabicConverter.instance.convert(value);
            assetsLoaded = false;
            textCanvas.fontCatalog.loadCharset(textSample, textRenderStyle).then(() => {
                assetsLoaded = true;
            });
        });
        gui.add(guiOptions, "gridEnabled");
        gui.add(guiOptions, "boundsEnabled");
        gui.add(textRenderStyle.fontSize!, "unit", {
            Em: FontUnit.Em,
            Pixel: FontUnit.Pixel,
            Point: FontUnit.Point,
            Percent: FontUnit.Percent
        }).onChange((value: string) => {
            textRenderStyle.fontSize!.unit = Number(value);
        });
        gui.add(textRenderStyle.fontSize!, "size", 0.1, 100, 0.1);
        gui.add(textRenderStyle.fontSize!, "backgroundSize", 0.0, 100, 0.1);
        gui.addColor(guiOptions, "color").onChange(() => {
            textRenderStyle.color!.r = guiOptions.color.r / 255.0;
            textRenderStyle.color!.g = guiOptions.color.g / 255.0;
            textRenderStyle.color!.b = guiOptions.color.b / 255.0;
        });
        gui.add(textRenderStyle, "opacity", 0.0, 1.0, 0.01);
        gui.addColor(guiOptions, "backgroundColor").onChange(() => {
            textRenderStyle.backgroundColor!.r = guiOptions.backgroundColor.r / 255.0;
            textRenderStyle.backgroundColor!.g = guiOptions.backgroundColor.g / 255.0;
            textRenderStyle.backgroundColor!.b = guiOptions.backgroundColor.b / 255.0;
        });

heremaps / harp.gl / @here / harp-examples / src / textcanvas_textBufferObject.ts View on Github

gui.add(guiOptions, "boundsEnabled");

        guiOptions.color.r = textRenderStyle.color!.r * 255.0;
        guiOptions.color.g = textRenderStyle.color!.g * 255.0;
        guiOptions.color.b = textRenderStyle.color!.b * 255.0;
        guiOptions.backgroundColor.r = textRenderStyle.backgroundColor!.r * 255.0;
        guiOptions.backgroundColor.g = textRenderStyle.backgroundColor!.g * 255.0;
        guiOptions.backgroundColor.b = textRenderStyle.backgroundColor!.b * 255.0;

        const textRenderStyleGui = gui.addFolder("TextStyle");
        textRenderStyleGui
            .add(textRenderStyle.fontSize!, "unit", {
                Em: FontUnit.Em,
                Pixel: FontUnit.Pixel,
                Point: FontUnit.Point,
                Percent: FontUnit.Percent
            })
            .onChange((value: string) => {
                textRenderStyle.fontSize!.unit = Number(value);
            });
        textRenderStyleGui.add(textRenderStyle.fontSize!, "size", 0.1, 100, 0.1);
        textRenderStyleGui.add(textRenderStyle.fontSize!, "backgroundSize", 0.0, 100, 0.1);
        textRenderStyleGui.addColor(guiOptions, "color").onChange(() => {
            textRenderStyle.color!.r = guiOptions.color.r / 255.0;
            textRenderStyle.color!.g = guiOptions.color.g / 255.0;
            textRenderStyle.color!.b = guiOptions.color.b / 255.0;
        });
        textRenderStyleGui.add(textRenderStyle, "opacity", 0.0, 1.0, 0.01);
        textRenderStyleGui.addColor(guiOptions, "backgroundColor").onChange(() => {
            textRenderStyle.backgroundColor!.r = guiOptions.backgroundColor.r / 255.0;
            textRenderStyle.backgroundColor!.g = guiOptions.backgroundColor.g / 255.0;
            textRenderStyle.backgroundColor!.b = guiOptions.backgroundColor.b / 255.0;

How to use the @here/harp-text-canvas.FontUnit.Percent function in @here/harp-text-canvas

To help you get started, we’ve selected a few @here/harp-text-canvas examples, based on popular ways it is used in public projects.

@here/harp-text-canvas

Package Health Score

Popular @here/harp-text-canvas functions

Similar packages