Drawing Texts

Texts can be rendered using the GpuText and GpuLetterText classes. Internally, all texts are treated as textures, meaning they are stored as images on the GPU and then displayed. The primary distinction between GpuText and GpuLetterText lies in how they handle textures. The GpuText class creates and stores a single texture for the entire text, while the GpuLetterText class stores textures for individual letters and renders them letter by letter on the display. Although GpuLetterText is more complex, it eliminates the need to update the texture image whenever the text-value needs to change.

GpuText

Creating a new text

new GpuText(text: string, font?: Font, color?: Color);

Example:

const myText = new GpuText('Hallo world!', new Font(), Color.red);

and drawing the text to screen into the given LayoutNode baseContainer position:

myText.draw(context: Context, baseContainer, Alignment.centerCenter);

Text alignment

When rendering text into a LayoutNode, the position within the area can be defined by setting the Alignment argument.

Source

<script setup lang="ts">
import { Chart, ChartConfig} from '@tomsoftware/webgl-chart-vue';
import { GpuText, LayoutCell, Alignment, LayoutBorder, Color } from '@tomsoftware/webgl-chart';

const leftTop = new GpuText('top left', undefined, Color.red);
const leftCenter = new GpuText('center left', undefined, Color.red);
const leftBottom = new GpuText('bottom left', undefined, Color.red);

const centerTop = new GpuText('top center', undefined, Color.red);
const centerCenter = new GpuText('center center', undefined, Color.red);
const centerBottom = new GpuText('bottom center', undefined, Color.red);

const rightTop = new GpuText('top right', undefined, Color.red);
const rightCenter = new GpuText('center right', undefined, Color.red);
const rightBottom = new GpuText('bottom right', undefined, Color.red);

// define layout
const baseContainer = new LayoutCell();

const border = new LayoutBorder(Color.green);

// set render callback
const chartData = new ChartConfig()
    .setRenderCallback((context) => {
      context.calculateLayout(baseContainer);

      // draw border around the container
      border.draw(context, baseContainer);

      leftTop.draw(context, baseContainer, Alignment.leftTop);
      leftCenter.draw(context, baseContainer, Alignment.leftCenter);
      leftBottom.draw(context, baseContainer, Alignment.leftBottom);

      centerTop.draw(context, baseContainer, Alignment.centerTop);
      centerCenter.draw(context, baseContainer, Alignment.centerCenter);
      centerBottom.draw(context, baseContainer, Alignment.centerBottom);

      rightTop.draw(context, baseContainer, Alignment.rightTop);
      rightCenter.draw(context, baseContainer, Alignment.rightCenter);
      rightBottom.draw(context, baseContainer, Alignment.rightBottom);
  });

</script>

<template>
  <chart
    :data="chartData"
    class="chart"
  />
</template>

rotating

To set the rotation of a text use the setRotation(deg: number) function.

Angle: 45 °

Source

<script setup lang="ts">
import { Chart, ChartConfig} from '@tomsoftware/webgl-chart-vue';
import { GpuText, LayoutCell, Alignment, LayoutBorder, Color } from '@tomsoftware/webgl-chart';
import { ref } from 'vue';

const deg = ref<number>(45);

const texts = new Map<Alignment, GpuText>(
  Alignment.list
    .map((key) => [key, new GpuText(key.toString(), undefined, Color.red)])
);

// define layout
const baseContainer = new LayoutCell();

const border = new LayoutBorder(Color.green);

// set render callback
const chartData = new ChartConfig()
    .setRenderCallback((context) => {
      context.calculateLayout(baseContainer);

      // draw border around the container
      border.draw(context, baseContainer);

      for (const [alignment, text] of texts) {
        text.setRotation(deg.value);
        text.draw(context, baseContainer, alignment);
      }

  });
  chartData.setMaxFrameRate(15);
</script>

<template>
  <input type="range" min="-180" max="180" v-model.number="deg" /> Angle: {{ deg }} °
  <br />
  <chart
    :data="chartData"
    class="chart"
  />
</template>

GpuLetterText

A letter-text is a text build from simple texture-letters.

new GpuLetterText(text: string, font?: Font, color?: Color);

rotating

To set the rotation of a text use the setRotation(deg: number) function.

Angle: 45 °

Source

<script setup lang="ts">
import { Chart, ChartConfig} from '@tomsoftware/webgl-chart-vue';
import { LayoutCell, Alignment, LayoutBorder, Color, GpuLetterText } from '@tomsoftware/webgl-chart';
import { ref } from 'vue';

const deg = ref<number>(45);

const texts = new Map<Alignment, GpuLetterText>(
  Alignment.list
    .map((key) => [key, new GpuLetterText(key.toString(), undefined, Color.red)])
);

// define layout
const baseContainer = new LayoutCell();

const border = new LayoutBorder(Color.green);

// set render callback
const chartData = new ChartConfig()
    .setRenderCallback((context) => {
      context.calculateLayout(baseContainer);

      // draw border around the container
      border.draw(context, baseContainer);

      for (const [alignment, text] of texts) {
        text.setRotation(deg.value);
        text.draw(context, baseContainer, alignment);
      }

  });
  chartData.setMaxFrameRate(15);
</script>

<template>
  <input type="range" min="-180" max="180" v-model.number="deg" /> Angle: {{ deg }} °
  <br />
  <chart
    :data="chartData"
    class="chart"
  />
</template>