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