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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Text Overflow</title>
<script src="https://cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.js"></script>
<script src="../dist/zrender.js"></script>
<script src="lib/config.js"></script>
<SCript src="data/text.js"></SCript>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<div id="main"></div>
<script>
var zr = zrender.init(document.getElementById('main'), {
renderer: window.__ZRENDER__DEFAULT__RENDERER__
});
const config = {
search: '',
width: 400,
height: 400,
fontSize: 13,
fixedLineHeight: false,
lineHeight: 14,
rich: true,
breakAll: false
}
var enText = new zrender.Text({
style: {
text: LARGE_TEXT_EN,
fontSize: config.fontSize,
width: config.width,
padding: 10,
borderColor: '#000',
borderWidth: 1,
overflow: 'break',
lineOverflow: 'truncate',
ellipsis: '…'
}
});
zr.add(enText);
var cnText = new zrender.Text({
style: {
text: LARGE_TEXT_ZH,
fontSize: config.fontSize,
width: config.width,
padding: 10,
borderColor: '#000',
borderWidth: 1,
overflow: 'break',
lineOverflow: 'truncate',
ellipsis: '…',
x: config.width + 100
}
});
zr.add(cnText);
const TEXTS = [LARGE_TEXT_EN, LARGE_TEXT_ZH];
function update() {
enText.style.width = cnText.style.width = config.width;
enText.style.height = cnText.style.height = config.height;
enText.style.overflow = config.breakAll ? 'breakAll' : 'break';
cnText.style.x = config.width + 100;
enText.style.rich = cnText.style.rich = config.rich ? {
highlight: {
// padding: 4,
backgroundColor: 'yellow',
fontSize: 20
}
} : null;
[enText, cnText].forEach((text, idx) => {
text.style.fontSize = cnText.style.fontSize = config.fontSize;
if (config.search) {
text.style.text = TEXTS[idx].replace(
new RegExp(config.search, 'g'), `{highlight|${config.search}}`
);
}
else {
text.style.text = TEXTS[idx];
}
if (!config.fixedLineHeight) {
text.style.lineHeight = null;
}
else {
text.style.lineHeight = config.lineHeight;
}
text.dirtyStyle();
});
console.time('render');
zr.refreshImmediately();
console.timeEnd('render');
}
const gui = new dat.GUI();
gui.add(config, 'search').onChange(update);
gui.add(config, 'width', 100, 700).onChange(update);
gui.add(config, 'height', 10, 1600).onChange(update);
gui.add(config, 'fontSize', 1, 30).onChange(update);
gui.add(config, 'fixedLineHeight').onChange(update);
gui.add(config, 'lineHeight', 12, 50).onChange(update);
gui.add(config, 'rich').onChange(update);
gui.add(config, 'breakAll').onChange(update);
update();
</script>
</body>
</html>
|
