c
/
Immediate-Mode-UI.Nuklear
зеркало из https://github.com/Immediate-Mode-UI/Nuklear.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<meta name="generator" content="Doxygen 1.9.8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Nuklear: Font</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<link href="navtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="resize.js"></script>
<script type="text/javascript" src="navtreedata.js"></script>
<script type="text/javascript" src="navtree.js"></script>
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="search/searchdata.js"></script>
<script type="text/javascript" src="search/search.js"></script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
  $(document).ready(function() { init_search(); });
/* @license-end */
</script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
<link href="doxygen-awesome.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr id="projectrow">
  <td id="projectalign">
   <div id="projectname">Nuklear
   </div>
   <div id="projectbrief">This is a minimal-state, immediate-mode graphical user interface toolkit written in ANSI C and licensed under public domain. It was designed as a simple embeddable user interface for application and does not have any dependencies, a default render backend or OS window/input handling but instead provides a highly modular, library-based approach, with simple input state for input and draw commands describing primitive shapes as output. So instead of providing a layered library that tries to abstract over a number of platform and render backends, it focuses only on the actual UI.</div>
  </td>
    <td>        <div id="MSearchBox" class="MSearchBoxInactive">
        <span class="left">
          <span id="MSearchSelect"                onmouseover="return searchBox.OnSearchSelectShow()"                onmouseout="return searchBox.OnSearchSelectHide()">&#160;</span>
          <input type="text" id="MSearchField" value="" placeholder="Search" accesskey="S"
               onfocus="searchBox.OnSearchFieldFocus(true)" 
               onblur="searchBox.OnSearchFieldFocus(false)" 
               onkeyup="searchBox.OnSearchFieldChange(event)"/>
          </span><span class="right">
            <a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="search/close.svg" alt=""/></a>
          </span>
        </div>
</td>
 </tr>
 </tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.9.8 -->
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
var searchBox = new SearchBox("searchBox", "search/",'.html');
/* @license-end */
</script>
</div><!-- top -->
<div id="side-nav" class="ui-resizable side-nav-resizable">
  <div id="nav-tree">
    <div id="nav-tree-contents">
      <div id="nav-sync" class="sync"></div>
    </div>
  </div>
  <div id="splitbar" style="-moz-user-select:none;" 
       class="ui-resizable-handle">
  </div>
</div>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(document).ready(function(){initNavTree('Font.html',''); initResizable(); });
/* @license-end */
</script>
<div id="doc-content">
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
     onmouseover="return searchBox.OnSearchSelectShow()"
     onmouseout="return searchBox.OnSearchSelectHide()"
     onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>

<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<div id="MSearchResults">
<div class="SRPage">
<div id="SRIndex">
<div id="SRResults"></div>
<div class="SRStatus" id="Loading">Loading...</div>
<div class="SRStatus" id="Searching">Searching...</div>
<div class="SRStatus" id="NoMatches">No Matches</div>
</div>
</div>
</div>
</div>

<div><div class="header">
  <div class="headertitle"><div class="title">Font</div></div>
</div><!--header-->
<div class="contents">
<div class="textblock"><p>Font handling in this library was designed to be quite customizable and lets you decide what you want to use and what you want to provide.</p>
<p>There are three different ways to use the font atlas. The first two will use your font handling scheme and only requires essential data to run nuklear. The next slightly more advanced features is font handling with vertex buffer output. Finally the most complex API wise is using nuklear's font baking API.</p>
<h1><a class="anchor" id="autotoc_md102"></a>
Using your own implementation without vertex buffer output</h1>
<p>So first up the easiest way to do font handling is by just providing a <code><a class="el" href="structnk__user__font.html">nk_user_font</a></code> struct which only requires the height in pixel of the used font and a callback to calculate the width of a string. This way of handling fonts is best fitted for using the normal draw shape command API where you do all the text drawing yourself and the library does not require any kind of deeper knowledge about which font handling mechanism you use. IMPORTANT: the <code><a class="el" href="structnk__user__font.html">nk_user_font</a></code> pointer provided to nuklear has to persist over the complete life time! I know this sucks but it is currently the only way to switch between fonts.</p>
<div class="fragment"><div class="line"><span class="keywordtype">float</span> your_text_width_calculation(<a class="code hl_union" href="unionnk__handle.html">nk_handle</a> handle, <span class="keywordtype">float</span> height, <span class="keyword">const</span> <span class="keywordtype">char</span> *text, <span class="keywordtype">int</span> len)</div>
<div class="line">{</div>
<div class="line">    your_font_type *type = handle.ptr;</div>
<div class="line">    <span class="keywordtype">float</span> text_width = ...;</div>
<div class="line">    <span class="keywordflow">return</span> text_width;</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keyword">struct </span><a class="code hl_struct" href="structnk__user__font.html">nk_user_font</a> font;</div>
<div class="line">font.userdata.ptr = &amp;your_font_class_or_struct;</div>
<div class="line">font.height = your_font_height;</div>
<div class="line">font.width = your_text_width_calculation;</div>
<div class="line"> </div>
<div class="line"><span class="keyword">struct </span><a class="code hl_struct" href="structnk__context.html">nk_context</a> ctx;</div>
<div class="line">nk_init_default(&amp;ctx, &amp;font);</div>
<div class="ttc" id="astructnk__context_html"><div class="ttname"><a href="structnk__context.html">nk_context</a></div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l05705">nuklear.h:5705</a></div></div>
<div class="ttc" id="astructnk__user__font_html"><div class="ttname"><a href="structnk__user__font.html">nk_user_font</a></div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l04006">nuklear.h:4006</a></div></div>
<div class="ttc" id="aunionnk__handle_html"><div class="ttname"><a href="unionnk__handle.html">nk_handle</a></div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l00268">nuklear.h:268</a></div></div>
</div><!-- fragment --> <h1><a class="anchor" id="autotoc_md103"></a>
Using your own implementation with vertex buffer output</h1>
<p>While the first approach works fine if you don't want to use the optional vertex buffer output it is not enough if you do. To get font handling working for these cases you have to provide two additional parameters inside the <code><a class="el" href="structnk__user__font.html">nk_user_font</a></code>. First a texture atlas handle used to draw text as subimages of a bigger font atlas texture and a callback to query a character's glyph information (offset, size, ...). So it is still possible to provide your own font and use the vertex buffer output.</p>
<div class="fragment"><div class="line"><span class="keywordtype">float</span> your_text_width_calculation(<a class="code hl_union" href="unionnk__handle.html">nk_handle</a> handle, <span class="keywordtype">float</span> height, <span class="keyword">const</span> <span class="keywordtype">char</span> *text, <span class="keywordtype">int</span> len)</div>
<div class="line">{</div>
<div class="line">    your_font_type *type = handle.ptr;</div>
<div class="line">    <span class="keywordtype">float</span> text_width = ...;</div>
<div class="line">    <span class="keywordflow">return</span> text_width;</div>
<div class="line">}</div>
<div class="line"><span class="keywordtype">void</span> query_your_font_glyph(<a class="code hl_union" href="unionnk__handle.html">nk_handle</a> handle, <span class="keywordtype">float</span> font_height, <span class="keyword">struct</span> nk_user_font_glyph *glyph, nk_rune codepoint, nk_rune next_codepoint)</div>
<div class="line">{</div>
<div class="line">    your_font_type *type = handle.ptr;</div>
<div class="line">    glyph.width = ...;</div>
<div class="line">    glyph.height = ...;</div>
<div class="line">    glyph.xadvance = ...;</div>
<div class="line">    glyph.uv[0].x = ...;</div>
<div class="line">    glyph.uv[0].y = ...;</div>
<div class="line">    glyph.uv[1].x = ...;</div>
<div class="line">    glyph.uv[1].y = ...;</div>
<div class="line">    glyph.offset.x = ...;</div>
<div class="line">    glyph.offset.y = ...;</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keyword">struct </span><a class="code hl_struct" href="structnk__user__font.html">nk_user_font</a> font;</div>
<div class="line">font.userdata.ptr = &amp;your_font_class_or_struct;</div>
<div class="line">font.height = your_font_height;</div>
<div class="line">font.width = your_text_width_calculation;</div>
<div class="line">font.query = query_your_font_glyph;</div>
<div class="line">font.texture.id = your_font_texture;</div>
<div class="line"> </div>
<div class="line"><span class="keyword">struct </span><a class="code hl_struct" href="structnk__context.html">nk_context</a> ctx;</div>
<div class="line">nk_init_default(&amp;ctx, &amp;font);</div>
</div><!-- fragment --><h1><a class="anchor" id="autotoc_md104"></a>
Nuklear font baker</h1>
<p>The final approach if you do not have a font handling functionality or don't want to use it in this library is by using the optional font baker. The font baker APIs can be used to create a font plus font atlas texture and can be used with or without the vertex buffer output.</p>
<p>It still uses the <code><a class="el" href="structnk__user__font.html">nk_user_font</a></code> struct and the two different approaches previously stated still work. The font baker is not located inside <code><a class="el" href="structnk__context.html">nk_context</a></code> like all other systems since it can be understood as more of an extension to nuklear and does not really depend on any <code><a class="el" href="structnk__context.html">nk_context</a></code> state.</p>
<p>Font baker need to be initialized first by one of the nk_font_atlas_init_xxx functions. If you don't care about memory just call the default version <code>nk_font_atlas_init_default</code> which will allocate all memory from the standard library. If you want to control memory allocation but you don't care if the allocated memory is temporary and therefore can be freed directly after the baking process is over or permanent you can call <code>nk_font_atlas_init</code>.</p>
<p>After successfully initializing the font baker you can add Truetype(.ttf) fonts from different sources like memory or from file by calling one of the <code>nk_font_atlas_add_xxx</code>. functions. Adding font will permanently store each font, font config and ttf memory block(!) inside the font atlas and allows to reuse the font atlas. If you don't want to reuse the font baker by for example adding additional fonts you can call <code>nk_font_atlas_cleanup</code> after the baking process is over (after calling nk_font_atlas_end).</p>
<p>As soon as you added all fonts you wanted you can now start the baking process for every selected glyph to image by calling <code>nk_font_atlas_bake</code>. The baking process returns image memory, width and height which can be used to either create your own image object or upload it to any graphics library. No matter which case you finally have to call <code>nk_font_atlas_end</code> which will free all temporary memory including the font atlas image so make sure you created our texture beforehand. <code>nk_font_atlas_end</code> requires a handle to your font texture or object and optionally fills a <code>struct <a class="el" href="structnk__draw__null__texture.html">nk_draw_null_texture</a></code> which can be used for the optional vertex output. If you don't want it just set the argument to <code>NULL</code>.</p>
<p>At this point you are done and if you don't want to reuse the font atlas you can call <code>nk_font_atlas_cleanup</code> to free all truetype blobs and configuration memory. Finally if you don't use the font atlas and any of it's fonts anymore you need to call <code>nk_font_atlas_clear</code> to free all memory still being used.</p>
<div class="fragment"><div class="line"><span class="keyword">struct </span>nk_font_atlas atlas;</div>
<div class="line">nk_font_atlas_init_default(&amp;atlas);</div>
<div class="line">nk_font_atlas_begin(&amp;atlas);</div>
<div class="line">nk_font *font = nk_font_atlas_add_from_file(&amp;atlas, <span class="stringliteral">&quot;Path/To/Your/TTF_Font.ttf&quot;</span>, 13, 0);</div>
<div class="line">nk_font *font2 = nk_font_atlas_add_from_file(&amp;atlas, <span class="stringliteral">&quot;Path/To/Your/TTF_Font2.ttf&quot;</span>, 16, 0);</div>
<div class="line"><span class="keyword">const</span> <span class="keywordtype">void</span>* img = nk_font_atlas_bake(&amp;atlas, &amp;img_width, &amp;img_height, NK_FONT_ATLAS_RGBA32);</div>
<div class="line">nk_font_atlas_end(&amp;atlas, nk_handle_id(texture), 0);</div>
<div class="line"> </div>
<div class="line"><span class="keyword">struct </span><a class="code hl_struct" href="structnk__context.html">nk_context</a> ctx;</div>
<div class="line">nk_init_default(&amp;ctx, &amp;font-&gt;handle);</div>
<div class="line"><span class="keywordflow">while</span> (1) {</div>
<div class="line"> </div>
<div class="line">}</div>
<div class="line">nk_font_atlas_clear(&amp;atlas);</div>
</div><!-- fragment --><p> The font baker API is probably the most complex API inside this library and I would suggest reading some of my examples <code>example/</code> to get a grip on how to use the font atlas. There are a number of details I left out. For example how to merge fonts, configure a font with <code>nk_font_config</code> to use other languages, use another texture coordinate format and a lot more:</p>
<div class="fragment"><div class="line"><span class="keyword">struct </span>nk_font_config cfg = nk_font_config(font_pixel_height);</div>
<div class="line">cfg.merge_mode = nk_false or nk_true;</div>
<div class="line">cfg.range = nk_font_korean_glyph_ranges();</div>
<div class="line">cfg.coord_type = NK_COORD_PIXEL;</div>
<div class="line">nk_font *font = nk_font_atlas_add_from_file(&amp;atlas, <span class="stringliteral">&quot;Path/To/Your/TTF_Font.ttf&quot;</span>, 13, &amp;cfg);</div>
</div><!-- fragment --> </div></div><!-- contents -->
</div><!-- PageDoc -->
</div><!-- doc-content -->
<!-- start footer part -->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
  <ul>
    <li class="footer">Generated by <a href="https://www.doxygen.org/index.html"><img class="footer" src="doxygen.svg" width="104" height="31" alt="doxygen"/></a> 1.9.8 </li>
  </ul>
</div>
</body>
</html>