mirror of
https://github.com/Insality/druid.git
synced 2025-06-27 10:27:47 +02:00
431 lines
12 KiB
HTML
431 lines
12 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
<head>
|
|
<title>Defold Druid UI Framework</title>
|
|
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div id="container">
|
|
|
|
<div id="product">
|
|
<div id="product_logo"></div>
|
|
<div id="product_name"><big><b></b></big></div>
|
|
<div id="product_description"></div>
|
|
</div> <!-- id="product" -->
|
|
|
|
|
|
<div id="main">
|
|
|
|
|
|
<!-- Menu -->
|
|
|
|
<div id="navigation">
|
|
<br/>
|
|
<h1>Druid</h1>
|
|
|
|
<ul>
|
|
<li><a href="../index.html">Index</a></li>
|
|
</ul>
|
|
|
|
<h2>Contents</h2>
|
|
<ul>
|
|
<li><a href="#Functions">Functions</a></li>
|
|
<li><a href="#Tables">Tables</a></li>
|
|
</ul>
|
|
|
|
|
|
<h2>Modules</h2>
|
|
<ul class="nowrap">
|
|
<li><a href="../modules/BackHandler.html">BackHandler</a></li>
|
|
<li><a href="../modules/BaseComponent.html">BaseComponent</a></li>
|
|
<li><a href="../modules/Blocker.html">Blocker</a></li>
|
|
<li><a href="../modules/Button.html">Button</a></li>
|
|
<li><a href="../modules/Checkbox.html">Checkbox</a></li>
|
|
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
|
|
<li><a href="../modules/DataList.html">DataList</a></li>
|
|
<li><a href="../modules/Drag.html">Drag</a></li>
|
|
<li><a href="../modules/Druid.html">Druid</a></li>
|
|
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
|
|
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
|
|
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
|
|
<li><a href="../modules/Helper.html">Helper</a></li>
|
|
<li><a href="../modules/Hotkey.html">Hotkey</a></li>
|
|
<li><a href="../modules/Hover.html">Hover</a></li>
|
|
<li><a href="../modules/Input.html">Input</a></li>
|
|
<li><a href="../modules/LangText.html">LangText</a></li>
|
|
<li><a href="../modules/Layout.html">Layout</a></li>
|
|
<li><a href="../modules/PinKnob.html">PinKnob</a></li>
|
|
<li><a href="../modules/Progress.html">Progress</a></li>
|
|
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
|
|
<li><a href="../modules/RichInput.html">RichInput</a></li>
|
|
<li><strong>RichText</strong></li>
|
|
<li><a href="../modules/Scroll.html">Scroll</a></li>
|
|
<li><a href="../modules/Slider.html">Slider</a></li>
|
|
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
|
|
<li><a href="../modules/Swipe.html">Swipe</a></li>
|
|
<li><a href="../modules/Text.html">Text</a></li>
|
|
<li><a href="../modules/Timer.html">Timer</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div id="content">
|
|
|
|
<h1>Module <code>RichText</code></h1>
|
|
<p>Druid Rich Text Custom Component.</p>
|
|
<p>
|
|
<b># Overview #</b>
|
|
<p> This custom component is inspired by <a href="https://github.com/britzl/defold-richtext" target="_blank">defold-richtext</a> by britzl.
|
|
It uses a similar syntax for tags but currently supports fewer tags.
|
|
<p> All parameters for the Rich Text component are adjusted in the GUI scene.
|
|
<p> This component uses GUI component template. (/druid/custom/rich_text/rich_text.gui).
|
|
<p> You able to customize it or make your own with the next node scructure:
|
|
<p> root
|
|
<p> - text_prefab
|
|
<p> - icon_prefab
|
|
<p> <b># Rich Text Setup #</b>
|
|
<p> • Root node size: Set the maximum width and height of the text.
|
|
<p> • Root anchor: Define the alignment of the Rich Text inside the root node size area.
|
|
<p> • Text prefab: Configure all default text parameters for the text node.
|
|
<p> • Text prefab anchor: Set the anchor for each text node (adjust this only if animating text).
|
|
<p> • Icon prefab: Configure all default node parameters for the icon node.
|
|
<p> • Icon prefab anchor: Set the anchor for each icon node (adjust this only if animating the icon).
|
|
<p> <b># Notes #</b>
|
|
<p> • Nested tags are supported
|
|
<p> <a href="https://insality.github.io/druid/druid/index.html?example=custom_rich_text" target="_blank"><b>Example Link</b></a></p>
|
|
<h3>Usage:</h3>
|
|
<ul>
|
|
<li><pre class="example">local RichText = require("druid.custom.rich_text.rich_text")
|
|
...
|
|
self.rich_text = self.druid:new(RichText, "rich_text")
|
|
self.rich_text:set_text("Hello, Druid Rich Text!")
|
|
</pre></li>
|
|
<li><pre class="example">type druid.rich_text.word = {
|
|
node: Node,
|
|
relative_scale: number,
|
|
color: vector4,
|
|
position: vector3,
|
|
offset: vector3,
|
|
scale: vector3,
|
|
size: vector3,
|
|
metrics: druid.rich_text.metrics,
|
|
pivot: Pivot,
|
|
text: string,
|
|
shadow: vector4,
|
|
outline: vector4,
|
|
font: string,
|
|
image: druid.rich_text.image,
|
|
default_animation: string,
|
|
br: boolean,
|
|
nobr: boolean,
|
|
}
|
|
|
|
type druid.rich_text.word.image = {
|
|
texture: string,
|
|
anim: string,
|
|
width: number,
|
|
height: number,
|
|
}
|
|
|
|
type druid.rich_text.lines_metrics = {
|
|
text_width: number,
|
|
text_height: number,
|
|
lines: table<number, druid.rich_text.metrics>,
|
|
}
|
|
|
|
type druid.rich_text.metrics = {
|
|
width: number,
|
|
height: number,
|
|
offset_x: number|nil,
|
|
offset_y: number|nil,
|
|
node_size: vector3|nil @For images only,
|
|
}
|
|
</pre></li>
|
|
</ul>
|
|
|
|
|
|
<h2><a href="#Functions">Functions</a></h2>
|
|
<table class="function_list">
|
|
<tr>
|
|
<td class="name" nowrap><a href="#clear">clear()</a></td>
|
|
<td class="summary">Clear all created words.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name" nowrap><a href="#get_line_metric">get_line_metric()</a></td>
|
|
<td class="summary">Get current line metrics</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name" nowrap><a href="#get_words">get_words()</a></td>
|
|
<td class="summary">Get all current words.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name" nowrap><a href="#init">init(self, template, nodes)</a></td>
|
|
<td class="summary">Rich Text component constructor</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name" nowrap><a href="#set_text">set_text(self, text)</a></td>
|
|
<td class="summary">Set text for Rich Text</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name" nowrap><a href="#tagged">tagged(tag)</a></td>
|
|
<td class="summary">Get all words, which has a passed tag.</td>
|
|
</tr>
|
|
</table>
|
|
<h2><a href="#Tables">Tables</a></h2>
|
|
<table class="function_list">
|
|
<tr>
|
|
<td class="name" nowrap><a href="#style">style</a></td>
|
|
<td class="summary">Component style params.</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<br/>
|
|
<br/>
|
|
|
|
|
|
<h2 class="section-header "><a name="Functions"></a>Functions</h2>
|
|
|
|
<dl class="function">
|
|
<dt>
|
|
<a name = "clear"></a>
|
|
<strong>clear()</strong>
|
|
</dt>
|
|
<dd>
|
|
Clear all created words.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</dd>
|
|
<dt>
|
|
<a name = "get_line_metric"></a>
|
|
<strong>get_line_metric()</strong>
|
|
</dt>
|
|
<dd>
|
|
Get current line metrics
|
|
|
|
|
|
|
|
<h3>Returns:</h3>
|
|
<ol>
|
|
|
|
<span class="types"><span class="type">druid.rich_text.lines_metrics</span></span>
|
|
|
|
</ol>
|
|
|
|
|
|
|
|
|
|
</dd>
|
|
<dt>
|
|
<a name = "get_words"></a>
|
|
<strong>get_words()</strong>
|
|
</dt>
|
|
<dd>
|
|
Get all current words.
|
|
|
|
|
|
|
|
<h3>Returns:</h3>
|
|
<ol>
|
|
|
|
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
|
|
druid.rich_text.word[]
|
|
</ol>
|
|
|
|
|
|
|
|
|
|
</dd>
|
|
<dt>
|
|
<a name = "init"></a>
|
|
<strong>init(self, template, nodes)</strong>
|
|
</dt>
|
|
<dd>
|
|
Rich Text component constructor
|
|
|
|
|
|
<h3>Parameters:</h3>
|
|
<ul>
|
|
<li><span class="parameter">self</span>
|
|
<span class="types"><span class="type">RichText</span></span>
|
|
<a href="../modules/RichText.html#">RichText</a>
|
|
</li>
|
|
<li><span class="parameter">template</span>
|
|
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
|
|
The Rich Text template name
|
|
</li>
|
|
<li><span class="parameter">nodes</span>
|
|
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
|
|
The node table, if prefab was copied by gui.clone_tree()
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
</dd>
|
|
<dt>
|
|
<a name = "set_text"></a>
|
|
<strong>set_text(self, text)</strong>
|
|
</dt>
|
|
<dd>
|
|
Set text for Rich Text
|
|
|
|
|
|
<h3>Parameters:</h3>
|
|
<ul>
|
|
<li><span class="parameter">self</span>
|
|
<span class="types"><span class="type">RichText</span></span>
|
|
<a href="../modules/RichText.html#">RichText</a>
|
|
</li>
|
|
<li><span class="parameter">text</span>
|
|
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
|
|
The text to set
|
|
</li>
|
|
</ul>
|
|
|
|
<h3>Returns:</h3>
|
|
<ol>
|
|
<li>
|
|
<span class="types"><span class="type">druid.rich_text.word[]</span></span>
|
|
words</li>
|
|
<li>
|
|
<span class="types"><span class="type">druid.rich_text.lines_metrics</span></span>
|
|
line_metrics</li>
|
|
</ol>
|
|
|
|
|
|
|
|
<h3>Usage:</h3>
|
|
<ul>
|
|
<pre class="example">• color: Change text color
|
|
|
|
<color=red>Foobar</color>
|
|
<color=<span class="number">1.0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">1.0</span>>Foobar</color>
|
|
<color=#ff0000>Foobar</color>
|
|
<color=#ff0000ff>Foobar</color>
|
|
|
|
• shadow: Change text shadow
|
|
|
|
<shadow=red>Foobar</shadow>
|
|
<shadow=<span class="number">1.0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">1.0</span>>Foobar</shadow>
|
|
<shadow=#ff0000>Foobar</shadow>
|
|
<shadow=#ff0000ff>Foobar</shadow>
|
|
|
|
• outline: Change text shadow
|
|
|
|
<outline=red>Foobar</outline>
|
|
<outline=<span class="number">1.0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">1.0</span>>Foobar</outline>
|
|
<outline=#ff0000>Foobar</outline>
|
|
<outline=#ff0000ff>Foobar</outline>
|
|
|
|
• font: Change font
|
|
|
|
<font=MyCoolFont>Foobar</font>
|
|
|
|
• size: Change text size, relative to default size
|
|
|
|
<size=<span class="number">2</span>>Twice as large</size>
|
|
|
|
• br: Insert a line <span class="keyword">break</span>
|
|
|
|
<br/>
|
|
|
|
• nobr: Prevent the text from breaking
|
|
|
|
Words <nobr>inside tag</nobr> won't <span class="keyword">break</span>
|
|
|
|
• img: Display image
|
|
|
|
<img=texture:image/>
|
|
<img=texture:image,size/>
|
|
<img=texture:image,width,height/></pre>
|
|
</ul>
|
|
|
|
</dd>
|
|
<dt>
|
|
<a name = "tagged"></a>
|
|
<strong>tagged(tag)</strong>
|
|
</dt>
|
|
<dd>
|
|
Get all words, which has a passed tag.
|
|
|
|
|
|
<h3>Parameters:</h3>
|
|
<ul>
|
|
<li><span class="parameter">tag</span>
|
|
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
|
|
|
|
</li>
|
|
</ul>
|
|
|
|
<h3>Returns:</h3>
|
|
<ol>
|
|
|
|
<span class="types"><span class="type">druid.rich_text.word[]</span></span>
|
|
words
|
|
</ol>
|
|
|
|
|
|
|
|
|
|
</dd>
|
|
</dl>
|
|
<h2 class="section-header "><a name="Tables"></a>Tables</h2>
|
|
|
|
<dl class="function">
|
|
<dt>
|
|
<a name = "style"></a>
|
|
<strong>style</strong>
|
|
</dt>
|
|
<dd>
|
|
Component style params.
|
|
You can override this component styles params in Druid styles table
|
|
or create your own style
|
|
|
|
|
|
<h3>Fields:</h3>
|
|
<ul>
|
|
<li><span class="parameter">COLORS</span>
|
|
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
|
|
Rich Text color aliases
|
|
(<em>default</em> {})
|
|
</li>
|
|
<li><span class="parameter">ADJUST_STEPS</span>
|
|
<span class="types"><span class="type">number</span></span>
|
|
Amount steps of attemps text adjust by height
|
|
(<em>default</em> 20)
|
|
</li>
|
|
<li><span class="parameter">ADJUST_SCALE_DELTA</span>
|
|
<span class="types"><span class="type">number</span></span>
|
|
Scale step on each height adjust step
|
|
(<em>default</em> 0.02)
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
</dd>
|
|
</dl>
|
|
|
|
|
|
</div> <!-- id="content" -->
|
|
</div> <!-- id="main" -->
|
|
<div id="about">
|
|
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc TESTING</a></i>
|
|
<i style="float:right;">Last updated 2015-01-01 12:00:00 </i>
|
|
</div> <!-- id="about" -->
|
|
</div> <!-- id="container" -->
|
|
</body>
|
|
</html>
|