x.ttf: vfmt the examples in the README.md

pull/10559/head
Delyan Angelov 2021-06-24 11:13:57 +03:00
parent f18265e6a8
commit 96adfc9d5b
No known key found for this signature in database
GPG Key ID: 66886C0F12D595ED
1 changed files with 64 additions and 63 deletions

View File

@ -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
} }
} }