Text Styles

CarnacJS Text Shapes use attributes to control how they render. Some common examples of attributes are color, font and alignment. This tutorial shows how Text Styles or attributes can be applied to all Text Shapes

# Simple Text Style

The following example illustrates simple TextStyle. It has most common attributes of the TextStyle such as color and font.

import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
  const text = new Text({
    "text": "Text Style Tutorial",
    "ax": 25,
    "ay": 25,
    "textstyle": {
      "color": KnownColors.DarkBlue,
      "font": "42px Arial"
    },
    "alignment": AnchorType.LeftTop
  });
  return new Plot({
    "canvaselement": canvas,
    "root": new Group({
      "children": text
    })
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Multiline

The following example illustrates how to add multiline text. To add Multiline text, set the 'multiline' property to true. The multiline text supports several new line characters like
,
,
, \n, \r, and \r\n.

import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
  const text = new Text({
    "text": "Multi<br>line<br/>Text<br />Style\nTutorial",
    "ax": 25,
    "ay": 25,
    "textstyle": {
      "color": KnownColors.DarkBlue,
      "font": "42px Arial"
    },
    "alignment": AnchorType.LeftTop
  });
  return new Plot({
    "canvaselement": canvas,
    "root": new Group({
      "children": text
    })
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Alignment

The alignment of text can be defined by the alignment property of the TextStyle. The following example illustrates different alignment of text content.

import { AlignmentStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
  const alignment = [
    AlignmentStyle.Left,
    AlignmentStyle.Center,
    AlignmentStyle.Right
  ];
  const anchors = [
    AnchorType.LeftCenter,
    AnchorType.Center,
    AnchorType.RightCenter
  ];
  const ax = [25, 190, 350];
  const stepalignment = 250 / (1 + alignment.length);
  const textShapes = [];
  for (let i = 0; i < alignment.length; ++i) {
    const text = new Text({
      "text": "Alignment type is <br/>" + alignment[i].toUpperCase(),
      "ax": ax[i],
      "ay": stepalignment * (1 + i),
      "textstyle": {
        "font": "18px Arial",
        "color": KnownColors.DarkBlue,
        "alignment": alignment[i]
      },
      "alignment": anchors[i]
    });
    textShapes.push(text);
  }
  return new Plot({
    "canvaselement": canvas,
    "root": new Group({
      "children": textShapes
    })
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Shadow

The following example illustrates how to apply the shadow effect. To add shadow, color, blue, offset x, offset y properties of shadow are used.

import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { ColorUtil, KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
  const text = new Text({
    "text": "Shadow",
    "ax": 190,
    "ay": 50,
    "textstyle": {
      "color": KnownColors.DarkBlue,
      "font": "42px Arial",
      "shadow": {
        "enable": true,
        "color": ColorUtil.parseColor(KnownColors.Green).setAlpha(0.5).toRgbaString(),
        "blur": 5,
        "offsetx": 5,
        "offsety": 5
      }
    }
  });
  return new Plot({
    "canvaselement": canvas,
    "root": new Group({
      "children": text
    })
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Outline

The following example illustrates how to set outline of a text. The outline can be an instance of geotoolkit/attributes/LineStyle

import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
  const text = new Text({
    "text": "Outline",
    "ax": 190,
    "ay": 50,
    "textstyle": {
      "font": "42px Arial",
      "color": KnownColors.DarkBlue,
      "outline": {
        "color": KnownColors.Green,
        "width": 2
      }
    }
  });
  return new Plot({
    "canvaselement": canvas,
    "root": new Group({
      "children": text
    })
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Underline

The following example illustrates how to set underline of a text. The underline can be an instance of geotoolkit/attributes/LineStyle

import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { BaseLineStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
function createScene(canvas) {
  const text = new Text({
    "text": "Underline",
    "ax": 190,
    "ay": 50,
    "textstyle": {
      "font": "42px Arial",
      "color": KnownColors.DarkBlue,
      "baseline": BaseLineStyle.Alphabetic,
      "underline": {
        "color": KnownColors.Green,
        "width": 2,
        "pixelsnapmode": true
      }
    }
  });
  return new Plot({
    "canvaselement": canvas,
    "root": new Group({
      "children": text
    })
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Strikethrough

The following example illustrates how to set strikethrough of a text. The strikethrough can be an instance of geotoolkit/attributes/LineStyle

import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { BaseLineStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
function createScene(canvas) {
  const text = new Text({
    "text": "Strikethrough",
    "ax": 190,
    "ay": 50,
    "textstyle": {
      "font": "42px Arial",
      "color": KnownColors.DarkBlue,
      "baseline": BaseLineStyle.Alphabetic,
      "strikethrough": {
        "color": KnownColors.Green,
        "width": 2,
        "pixelsnapmode": true
      }
    }
  });
  return new Plot({
    "canvaselement": canvas,
    "root": new Group({
      "children": text
    })
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));