x.ttf: vfmt the examples in the README.md
parent
f18265e6a8
commit
96adfc9d5b
|
@ -22,10 +22,10 @@ At this point the font "arial" is loaded and parsed and if it is a valid TTF fon
|
||||||
ready for the rendering.
|
ready for the rendering.
|
||||||
We can get some quick info on the font as string using the `get_info_string` function:
|
We can get some quick info on the font as string using the `get_info_string` function:
|
||||||
|
|
||||||
```v ignore
|
```v oksyntax
|
||||||
println(ttf_font.get_info_string())
|
println(ttf_font.get_info_string())
|
||||||
```
|
```
|
||||||
that give an outpul like this:
|
produces an output like this:
|
||||||
```
|
```
|
||||||
----- Font Info -----
|
----- Font Info -----
|
||||||
font_family : Arial
|
font_family : Arial
|
||||||
|
@ -56,10 +56,11 @@ Let's start with a simple snippet of code:
|
||||||
```v oksyntax
|
```v oksyntax
|
||||||
import os
|
import os
|
||||||
import x.ttf
|
import x.ttf
|
||||||
|
|
||||||
[console]
|
[console]
|
||||||
fn main(){
|
fn main() {
|
||||||
mut ttf_font := ttf.TTF_File{}
|
mut ttf_font := ttf.TTF_File{}
|
||||||
ttf_font.buf = os.read_bytes("arial.ttf") or { panic(err) }
|
ttf_font.buf = os.read_bytes('arial.ttf') or { panic(err) }
|
||||||
ttf_font.init()
|
ttf_font.init()
|
||||||
// print font info
|
// print font info
|
||||||
println(ttf_font.get_info_string())
|
println(ttf_font.get_info_string())
|
||||||
|
@ -75,20 +76,20 @@ import os
|
||||||
import x.ttf
|
import x.ttf
|
||||||
|
|
||||||
[console]
|
[console]
|
||||||
fn main(){
|
fn main() {
|
||||||
mut ttf_font := ttf.TTF_File{}
|
mut ttf_font := ttf.TTF_File{}
|
||||||
ttf_font.buf = os.read_bytes("arial.ttf") or { panic(err) }
|
ttf_font.buf = os.read_bytes('arial.ttf') or { panic(err) }
|
||||||
ttf_font.init()
|
ttf_font.init()
|
||||||
// print font info
|
// print font info
|
||||||
println(ttf_font.get_info_string())
|
println(ttf_font.get_info_string())
|
||||||
|
|
||||||
bmp_width := 200
|
bmp_width := 200
|
||||||
bmp_heigth := 64
|
bmp_heigth := 64
|
||||||
bmp_layers := 4 // number of planes for an RGBA buffer
|
bmp_layers := 4 // number of planes for an RGBA buffer
|
||||||
// memory size of the buffer
|
// memory size of the buffer
|
||||||
bmp_size := bmp_width * bmp_heigth * bmp_layers
|
bmp_size := bmp_width * bmp_heigth * bmp_layers
|
||||||
|
|
||||||
font_size := 32 // font size in points
|
font_size := 32 // font size in points
|
||||||
device_dpi := 72 // default screen DPI
|
device_dpi := 72 // default screen DPI
|
||||||
// Formula for scale calculation
|
// Formula for scale calculation
|
||||||
// scaler := (font_size * device dpi) / (72dpi * em_unit)
|
// scaler := (font_size * device dpi) / (72dpi * em_unit)
|
||||||
|
@ -97,21 +98,21 @@ fn main(){
|
||||||
y_base := int((ttf_font.y_max - ttf_font.y_min) * scale)
|
y_base := int((ttf_font.y_max - ttf_font.y_min) * scale)
|
||||||
|
|
||||||
// declare the bitmap struct
|
// declare the bitmap struct
|
||||||
mut bmp:= ttf.BitMap{
|
mut bmp := ttf.BitMap{
|
||||||
tf : &ttf_font
|
tf: &ttf_font
|
||||||
buf : malloc(bmp_size)
|
buf: malloc(bmp_size)
|
||||||
buf_size : bmp_size
|
buf_size: bmp_size
|
||||||
width : bmp_width
|
width: bmp_width
|
||||||
height : bmp_heigth
|
height: bmp_heigth
|
||||||
bp : bmp_layers
|
bp: bmp_layers
|
||||||
color : 0x000000_FF // RGBA black
|
color: 0x000000_FF // RGBA black
|
||||||
scale : scale
|
scale: scale
|
||||||
}
|
}
|
||||||
bmp.init_filler()
|
bmp.init_filler()
|
||||||
bmp.clear()
|
bmp.clear()
|
||||||
bmp.set_pos(10,y_base)
|
bmp.set_pos(10, y_base)
|
||||||
bmp.draw_text("Test Text!")
|
bmp.draw_text('Test Text!')
|
||||||
bmp.save_as_ppm("test.ppm")
|
bmp.save_as_ppm('test.ppm')
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
This is the low level render that draw ther text on a bitmap and save the bitmap on a disk as
|
This is the low level render that draw ther text on a bitmap and save the bitmap on a disk as
|
||||||
|
@ -126,7 +127,7 @@ You can specify the style for the text rendering in the `BitMap` struct::
|
||||||
enum Style {
|
enum Style {
|
||||||
outline
|
outline
|
||||||
outline_aliased
|
outline_aliased
|
||||||
filled // default syle
|
filled // default syle
|
||||||
raw
|
raw
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
@ -139,20 +140,20 @@ import os
|
||||||
import x.ttf
|
import x.ttf
|
||||||
|
|
||||||
[console]
|
[console]
|
||||||
fn main(){
|
fn main() {
|
||||||
mut ttf_font := ttf.TTF_File{}
|
mut ttf_font := ttf.TTF_File{}
|
||||||
ttf_font.buf = os.read_bytes("arial.ttf") or { panic(err) }
|
ttf_font.buf = os.read_bytes('arial.ttf') or { panic(err) }
|
||||||
ttf_font.init()
|
ttf_font.init()
|
||||||
// print font info
|
// print font info
|
||||||
println(ttf_font.get_info_string())
|
println(ttf_font.get_info_string())
|
||||||
|
|
||||||
bmp_width := 200
|
bmp_width := 200
|
||||||
bmp_heigth := 200
|
bmp_heigth := 200
|
||||||
bmp_layers := 4 // number of planes for an RGBA buffer
|
bmp_layers := 4 // number of planes for an RGBA buffer
|
||||||
// memory size of the buffer
|
// memory size of the buffer
|
||||||
bmp_size := bmp_width * bmp_heigth * bmp_layers
|
bmp_size := bmp_width * bmp_heigth * bmp_layers
|
||||||
|
|
||||||
font_size := 32 // font size in points
|
font_size := 32 // font size in points
|
||||||
device_dpi := 72 // default screen DPI
|
device_dpi := 72 // default screen DPI
|
||||||
// Formula for scale calculation
|
// Formula for scale calculation
|
||||||
// scaler := (font_size * device dpi) / (72dpi * em_unit)
|
// scaler := (font_size * device dpi) / (72dpi * em_unit)
|
||||||
|
@ -166,41 +167,42 @@ But Vwill prevail for sure, V is the way!!
|
||||||
òàèì@ò!£$%&
|
òàèì@ò!£$%&
|
||||||
"
|
"
|
||||||
// declare the bitmap struct
|
// declare the bitmap struct
|
||||||
mut bmp:= ttf.BitMap{
|
mut bmp := ttf.BitMap{
|
||||||
tf : &ttf_font
|
tf: &ttf_font
|
||||||
buf : malloc(bmp_size)
|
buf: malloc(bmp_size)
|
||||||
buf_size : bmp_size
|
buf_size: bmp_size
|
||||||
width : bmp_width
|
width: bmp_width
|
||||||
height : bmp_heigth
|
height: bmp_heigth
|
||||||
bp : bmp_layers
|
bp: bmp_layers
|
||||||
color : 0x000000_FF // RGBA black
|
color: 0x000000_FF // RGBA black
|
||||||
scale : scale
|
scale: scale
|
||||||
}
|
}
|
||||||
bmp.init_filler()
|
bmp.init_filler()
|
||||||
bmp.clear()
|
bmp.clear()
|
||||||
bmp.justify = true
|
bmp.justify = true
|
||||||
bmp.align = .left
|
bmp.align = .left
|
||||||
bmp.draw_text_block(text, {x: 0, y:0, w: bmp_width-20, h: bmp_heigth})
|
bmp.draw_text_block(text, x: 0, y: 0, w: bmp_width - 20, h: bmp_heigth)
|
||||||
bmp.save_as_ppm("test.ppm")
|
bmp.save_as_ppm('test.ppm')
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
This is the low level render that draw text block on the bitmap.
|
This is the low level render that draw text block on the bitmap.
|
||||||
A text block is defined from a `Text_block` struct:
|
A text block is defined from a `Text_block` struct:
|
||||||
```v
|
```v
|
||||||
struct Text_block {
|
struct Text_block {
|
||||||
x int // x postion of the left high corner
|
x int // x postion of the left high corner
|
||||||
y int // y postion of the left high corner
|
y int // y postion of the left high corner
|
||||||
w int // width of the text block
|
w int // width of the text block
|
||||||
h int // heigth of the text block
|
h int // heigth of the text block
|
||||||
cut_lines bool = true // force to cut the line if the length is over the text block width
|
cut_lines bool = true // force to cut the line if the length is over the text block width
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
and use the following bitmap fields:
|
and use the following bitmap fields:
|
||||||
```v oksyntax
|
```v ignore
|
||||||
style Style = .filled // default syle
|
style Style = .filled // default syle
|
||||||
align Text_align = .left // default text align
|
align Text_align = .left // default text align
|
||||||
justify bool // justify text flag, default deactivated
|
justify bool // justify text flag, default deactivated
|
||||||
justify_fill_ratio f32 = 0.5 // justify fill ratio, if the ratio of the filled row is >= of this then justify the text
|
justify_fill_ratio f32 = 0.5 // justify fill ratio, if the ratio of the filled
|
||||||
|
// row is >= of this then justify the text
|
||||||
```
|
```
|
||||||
|
|
||||||
It is possible to modify these parameters to obtain the desired effect on the text rendering.
|
It is possible to modify these parameters to obtain the desired effect on the text rendering.
|
||||||
|
@ -216,7 +218,6 @@ import gg
|
||||||
import gx
|
import gx
|
||||||
import sokol.sapp
|
import sokol.sapp
|
||||||
import sokol.sgl
|
import sokol.sgl
|
||||||
|
|
||||||
import x.ttf
|
import x.ttf
|
||||||
import os
|
import os
|
||||||
|
|
||||||
|
@ -225,7 +226,7 @@ const (
|
||||||
win_height = 700
|
win_height = 700
|
||||||
bg_color = gx.white
|
bg_color = gx.white
|
||||||
font_paths = [
|
font_paths = [
|
||||||
"arial.ttf"
|
'arial.ttf',
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -236,16 +237,16 @@ pub mut:
|
||||||
init_flag bool
|
init_flag bool
|
||||||
frame_c int
|
frame_c int
|
||||||
|
|
||||||
tf []ttf.TTF_File
|
tf []ttf.TTF_File
|
||||||
ttf_render []ttf.TTF_render_Sokol
|
ttf_render []ttf.TTF_render_Sokol
|
||||||
}
|
}
|
||||||
|
|
||||||
fn my_init(mut app App_data) {
|
fn my_init(mut app App_data) {
|
||||||
app.init_flag = true
|
app.init_flag = true
|
||||||
}
|
}
|
||||||
|
|
||||||
fn draw_frame(mut app &App_data) {
|
fn draw_frame(mut app App_data) {
|
||||||
cframe_txt := "Current Frame: $app.frame_c"
|
cframe_txt := 'Current Frame: $app.frame_c'
|
||||||
|
|
||||||
app.gg.begin()
|
app.gg.begin()
|
||||||
|
|
||||||
|
@ -258,7 +259,7 @@ fn draw_frame(mut app &App_data) {
|
||||||
// update the text
|
// update the text
|
||||||
mut txt1 := &app.ttf_render[0]
|
mut txt1 := &app.ttf_render[0]
|
||||||
txt1.destroy_texture()
|
txt1.destroy_texture()
|
||||||
txt1.create_text(cframe_txt ,43)
|
txt1.create_text(cframe_txt, 43)
|
||||||
txt1.create_texture()
|
txt1.create_texture()
|
||||||
txt1.draw_text_bmp(app.gg, 30, 60)
|
txt1.draw_text_bmp(app.gg, 30, 60)
|
||||||
}
|
}
|
||||||
|
@ -267,12 +268,12 @@ fn draw_frame(mut app &App_data) {
|
||||||
}
|
}
|
||||||
|
|
||||||
[console]
|
[console]
|
||||||
fn main(){
|
fn main() {
|
||||||
mut app := &App_data{
|
mut app := &App_data{
|
||||||
gg: 0
|
gg: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
app.gg = gg.new_context({
|
app.gg = gg.new_context(
|
||||||
width: win_width
|
width: win_width
|
||||||
height: win_height
|
height: win_height
|
||||||
create_window: true
|
create_window: true
|
||||||
|
@ -281,26 +282,26 @@ fn main(){
|
||||||
bg_color: bg_color
|
bg_color: bg_color
|
||||||
frame_fn: draw_frame
|
frame_fn: draw_frame
|
||||||
init_fn: my_init
|
init_fn: my_init
|
||||||
})
|
)
|
||||||
|
|
||||||
// load TTF fonts
|
// load TTF fonts
|
||||||
for font_path in font_paths {
|
for font_path in font_paths {
|
||||||
mut tf := ttf.TTF_File{}
|
mut tf := ttf.TTF_File{}
|
||||||
tf.buf = os.read_bytes(font_path) or { panic(err) }
|
tf.buf = os.read_bytes(font_path) or { panic(err) }
|
||||||
println("TrueTypeFont file [$font_path] len: ${tf.buf.len}")
|
println('TrueTypeFont file [$font_path] len: $tf.buf.len')
|
||||||
tf.init()
|
tf.init()
|
||||||
println(tf.get_info_string())
|
println(tf.get_info_string())
|
||||||
app.tf << tf
|
app.tf << tf
|
||||||
}
|
}
|
||||||
|
|
||||||
// TTF render 0 Frame counter
|
// TTF render 0 Frame counter
|
||||||
app.ttf_render << &ttf.TTF_render_Sokol {
|
app.ttf_render << &ttf.TTF_render_Sokol{
|
||||||
bmp: &ttf.BitMap{
|
bmp: &ttf.BitMap{
|
||||||
tf: &(app.tf[0])
|
tf: &(app.tf[0])
|
||||||
buf: malloc(32000000)
|
buf: unsafe { malloc(32000000) }
|
||||||
buf_size: (32000000)
|
buf_size: (32000000)
|
||||||
color : 0xFF0000FF
|
color: 0xFF0000FF
|
||||||
//style: .raw
|
// style: .raw
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue