vtk-js/Sources/Rendering/Core/TextActor/example/index.js at 6eb97cee0b3355af4d17f369e2d789e210718962 · daker/vtk-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import '@kitware/vtk.js/favicon';

// Load the rendering pieces we want to use (for both WebGL and WebGPU)
import '@kitware/vtk.js/Rendering/Profiles/Geometry';

import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
import vtkTextActor from '@kitware/vtk.js/Rendering/Core/TextActor';

import GUI from 'lil-gui';

// ----------------------------------------------------------------------------
// Standard rendering code setup
// ----------------------------------------------------------------------------

const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();

// ----------------------------------------------------------------------------
// Example code
// ----------------------------------------------------------------------------

const actor = vtkTextActor.newInstance();
actor.setInput('Hello World!\nfrom vtk.js');
actor.setDisplayPosition(window.innerWidth / 4, window.innerHeight / 4);

renderer.addActor2D(actor);
renderer.resetCamera();
renderWindow.render();

// -----------------------------------------------------------
// UI control handling
// -----------------------------------------------------------

const gui = new GUI();
const params = {
  text: 'Hello World\\nfrom vtk.js',
  x: window.innerWidth / 4,
  y: window.innerHeight / 4,
  color: [0, 0, 0],
  fontFamily: 'Arial',
  fontSize: actor.getProperty().getResolution(),
};

const fonts = {
  Arial: 'Arial',
  Verdana: 'Verdana',
  Tahoma: 'Tahoma',
  Times: 'Times New Roman',
};

gui
  .add(params, 'text')
  .name('Text')
  .onChange((value) => {
    actor.setInput(value);
    renderWindow.render();
  });
gui
  .add(params, 'fontFamily', fonts)
  .name('Font')
  .onChange((value) => {
    actor.getProperty().setFontFamily(value);
    renderWindow.render();
  });
gui
  .add(params, 'fontSize', 50, 400, 1)
  .name('Font Size')
  .onChange((value) => {
    actor.getProperty().setResolution(value);
    renderWindow.render();
  });
gui
  .addColor(params, 'color')
  .name('Font Color')
  .onChange((value) => {
    actor.getProperty().setFontColor(value[0], value[1], value[2]);
    renderWindow.render();
  });
gui
  .add(params, 'x')
  .name('X Position')
  .onChange((value) => {
    actor.setDisplayPosition(value, params.y);
    renderWindow.render();
  });
gui
  .add(params, 'y')
  .name('Y Position')
  .onChange((value) => {
    actor.setDisplayPosition(params.x, value);
    renderWindow.render();
  });

global.actor = actor;
global.renderer = renderer;
global.renderWindow = renderWindow;