This repository has been archived by the owner on Feb 23, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 49
/
Copy pathFontMessure.html
127 lines (86 loc) · 3.92 KB
/
FontMessure.html
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
<!DOCTYPE html>
<html>
<head>
<script src="pixi.js"></script>
<script src="../bin/pixi-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
var webfontReady = false;
WebFont.load({
google: {
families: ['Tangerine', 'Droid Serif']
},
active: function () {
console.log("done loading fonts");
webfontReady = true;
}
});
</script>
<style>
body { font-family: 'Segoe UI'; }
.SpriteSheet { background-color: #808080; max-width: 900px; position: absolute; top: 115px; left: calc(50% - 450px); }
.messureAtlas { background-color: #808080; }
table { padding: 0; margin: 0; width: 300px; position: absolute; left: calc(50% + 150px); top: 115px; }
td { text-align: right; line-height: 30px; padding: 5px; }
tr:nth-child(2n+1) { background-color: #d3d3d3; }
td:nth-child(2n+1) { text-align: left; }
.InputContainer { width: 900px; height: 80px; position: absolute; margin: auto; left: 0; right: 0; top: 30px; background-color: #f2f2f2; }
input, select { float: left; position: absolute; height: 50px; top: 10px; bottom: 10px; font-size: 30px; text-align: center; box-sizing: border-box; }
</style>
</head>
<body>
<div class="InputContainer">
<input type="text" id="text" value="A" style="left: 10px; width:200px;" />
<input type="number" id="size" value="60" style="left: 220px; width:60px;" />
<select id="font" style="left: 290px; width:200px;">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Tangerine">Tangerine</option>
<option value="Droid Serif">Droid Serif</option>
<option value="Segoe UI" selected="selected">Segoe UI</option>
</select>
</div>
<div id="data"></div>
<script>
</script>
<script>
var container = document.getElementById('data');
var input_text = document.getElementById("text");
var input_size = document.getElementById("size");
var input_font = document.getElementById("font");
var stage = new PIXI.UI.Stage();
var test = new PIXI.UI.DynamicText("");
stage.addChild(test);
input_text.addEventListener("input", setText);
input_text.addEventListener("keydown", function () {
input_text.value = "";
});
input_font.addEventListener("change", setText);
input_size.addEventListener("input", setText);
function setText() {
//alert("hej");
if (!webfontReady) {
return setTimeout(setText, 5);
}
test.defaultStyle.fontFamily = input_font.options[input_font.selectedIndex].value;
test.defaultStyle.fontSize = Math.max(1, (input_size.value || 20));
//var data = me.getFontMetrics(input_text.value, input_font.options[input_font.selectedIndex].value, Math.max(1,(input_size.value || 20)), false);
ss.debug = true;
test.value+= input_text.value;
test.update();
return;
var obj = ss.getCharObject(input_text.value, input_font.options[input_font.selectedIndex].value, (input_size.value || 50), "bold", "italic", "#000000 0.5 3 2 1, #FFF000 0.5 -3 2 1")
data = obj.metrics;
var output = "<table cellspacing='0' cellpadding='0'>";
for (var param in data) {
if (typeof data[param] !== "object") {
output += "<tr><td>" + param + ":</td><td><b>" + parseFloat(data[param].toFixed(3)) + "</b></td></tr>";
}
}
output += "</table>";
container.innerHTML = output;
}
setText();
</script>
</body>
</html>