EIP
/
arrays-benfordslaw
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
No Description
40 Commits
7 Branches
Branch: master
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'master'
${ noResults }
arrays-benfordslaw/doc/es/html/thelayoutsystem.html

thelayoutsystem.html 14KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <html xmlns="http://www.w3.org/1999/xhtml">

  3. <head>

  4. <meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>

  5. <meta http-equiv="X-UA-Compatible" content="IE=9"/>

  6. <meta name="generator" content="Doxygen 1.8.9.1"/>

  7. <title>My Project: The Layout System</title>

  8. <link href="tabs.css" rel="stylesheet" type="text/css"/>

  9. <script type="text/javascript" src="jquery.js"></script>

  10. <script type="text/javascript" src="dynsections.js"></script>

  11. <link href="search/search.css" rel="stylesheet" type="text/css"/>

  12. <script type="text/javascript" src="search/searchdata.js"></script>

  13. <script type="text/javascript" src="search/search.js"></script>

  14. <script type="text/javascript">

  15.   $(document).ready(function() { init_search(); });

  16. </script>

  17. <link href="doxygen.css" rel="stylesheet" type="text/css" />

  18. </head>

  19. <body>

  20. <div id="top"><!-- do not remove this div, it is closed by doxygen! -->

  21. <div id="titlearea">

  22. <table cellspacing="0" cellpadding="0">

  23.  <tbody>

  24.  <tr style="height: 56px;">

  25.   <td style="padding-left: 0.5em;">

  26.    <div id="projectname">My Project

  27.    </div>

  28.   </td>

  29.  </tr>

  30.  </tbody>

  31. </table>

  32. </div>

  33. <!-- end header part -->

  34. <!-- Generado por Doxygen 1.8.9.1 -->

  35. <script type="text/javascript">

  36. var searchBox = new SearchBox("searchBox", "search",false,'Buscar');

  37. </script>

  38.   <div id="navrow1" class="tabs">

  39.     <ul class="tablist">

  40.       <li><a href="index.html"><span>Página&#160;principal</span></a></li>

  41.       <li class="current"><a href="pages.html"><span>Páginas&#160;relacionadas</span></a></li>

  42.       <li><a href="namespaces.html"><span>Namespaces</span></a></li>

  43.       <li><a href="annotated.html"><span>Clases</span></a></li>

  44.       <li><a href="files.html"><span>Archivos</span></a></li>

  45.       <li>

  46.         <div id="MSearchBox" class="MSearchBoxInactive">

  47.         <span class="left">

  48.           <img id="MSearchSelect" src="search/mag_sel.png"

  49.                onmouseover="return searchBox.OnSearchSelectShow()"

  50.                onmouseout="return searchBox.OnSearchSelectHide()"

  51.                alt=""/>

  52.           <input type="text" id="MSearchField" value="Buscar" accesskey="S"

  53.                onfocus="searchBox.OnSearchFieldFocus(true)" 

  54.                onblur="searchBox.OnSearchFieldFocus(false)" 

  55.                onkeyup="searchBox.OnSearchFieldChange(event)"/>

  56.           </span><span class="right">

  57.             <a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="search/close.png" alt=""/></a>

  58.           </span>

  59.         </div>

  60.       </li>

  61.     </ul>

  62.   </div>

  63. <!-- window showing the filter options -->

  64. <div id="MSearchSelectWindow"

  65.      onmouseover="return searchBox.OnSearchSelectShow()"

  66.      onmouseout="return searchBox.OnSearchSelectHide()"

  67.      onkeydown="return searchBox.OnSearchSelectKey(event)">

  68. </div>

  69. 

  70. <!-- iframe showing the search results (closed by default) -->

  71. <div id="MSearchResultsWindow">

  72. <iframe src="javascript:void(0)" frameborder="0" 

  73.         name="MSearchResults" id="MSearchResults">

  74. </iframe>

  75. </div>

  76. 

  77. </div><!-- top -->

  78. <div class="header">

  79.   <div class="headertitle">

  80. <div class="title">The Layout System </div>  </div>

  81. </div><!--header-->

  82. <div class="contents">

  83. <div class="textblock"><p>The layout system is responsible for positioning and scaling layout elements such as axis rects, legends and plot titles in a <a class="el" href="class_q_custom_plot.html" title="The central class of the library. This is the QWidget which displays the plot and interacts with the ...">QCustomPlot</a>.</p>

  84. <h1><a class="anchor" id="layoutsystem-classesandmechanisms"></a>

  85. Classes and mechanisms</h1>

  86. <p>The layout system is based on the abstract base class <a class="el" href="class_q_c_p_layout_element.html">QCPLayoutElement</a>. All objects that take part in the layout system derive from this class, either directly or indirectly.</p>

  87. <p>Since <a class="el" href="class_q_c_p_layout_element.html" title="The abstract base class for all objects that form the layout system. ">QCPLayoutElement</a> itself derives from <a class="el" href="class_q_c_p_layerable.html">QCPLayerable</a>, a layout element may draw its own content. However, it is perfectly possible for a layout element to only serve as a structuring and/or positioning element, not drawing anything on its own.</p>

  88. <h2><a class="anchor" id="layoutsystem-rects"></a>

  89. Rects of a layout element</h2>

  90. <p>A layout element is a rectangular object described by two rects: the inner rect (<a class="el" href="class_q_c_p_layout_element.html#affdfea003469aac3d0fac5f4e06171bc">QCPLayoutElement::rect</a>) and the outer rect (<a class="el" href="class_q_c_p_layout_element.html#a38975ea13e36de8e53391ce41d94bc0f">QCPLayoutElement::setOuterRect</a>). The inner rect is calculated automatically by applying the margin (<a class="el" href="class_q_c_p_layout_element.html#a8f450b1f3f992ad576fce2c63d8b79cf">QCPLayoutElement::setMargins</a>) inward from the outer rect. The inner rect is meant for main content while the margin area may either be left blank or serve for displaying peripheral graphics. For example, <a class="el" href="class_q_c_p_axis_rect.html">QCPAxisRect</a> positions the four main axes at the sides of the inner rect, so graphs end up inside it and the axis labels and tick labels are in the margin area.</p>

  91. <h2><a class="anchor" id="layoutsystem-margins"></a>

  92. Margins</h2>

  93. <p>Each layout element may provide a mechanism to automatically determine its margins. Internally, this is realized with the QCPLayoutElement::calculateAutoMargin function which takes a <a class="el" href="namespace_q_c_p.html#a7e487e3e2ccb62ab7771065bab7cae54">QCP::MarginSide</a> and returns an integer value which represents the ideal margin for the specified side. The automatic margin will be used on the sides specified in <a class="el" href="class_q_c_p_layout_element.html#accfda49994e3e6d51ed14504abf9d27d">QCPLayoutElement::setAutoMargins</a>. By default, it is set to <a class="el" href="namespace_q_c_p.html#a7e487e3e2ccb62ab7771065bab7cae54a43d7361cb0c5244eabdc962021bffebc">QCP::msAll</a> meaning automatic margin calculation is enabled for all four sides. In this case, a minimum margin may be set with <a class="el" href="class_q_c_p_layout_element.html#a0a8a17abc16b7923159fcc7608f94673">QCPLayoutElement::setMinimumMargins</a>, to prevent the automatic margin mechanism from setting margins smaller than desired for a specific situation. If automatic margin calculation is unset for a specific side, the margin of that side can be controlled directy via <a class="el" href="class_q_c_p_layout_element.html#a8f450b1f3f992ad576fce2c63d8b79cf">QCPLayoutElement::setMargins</a>.</p>

  94. <p>If multiple layout ements are arranged next to or beneath each other, it may be desirable to align their inner rects on certain sides. Since they all might have different automatic margins, this usually isn't the case. The class <a class="el" href="class_q_c_p_margin_group.html">QCPMarginGroup</a> and <a class="el" href="class_q_c_p_layout_element.html#a516e56f76b6bc100e8e71d329866847d">QCPLayoutElement::setMarginGroup</a> fix this by allowing to synchronize multiple margins. See the documentation there for details.</p>

  95. <h2><a class="anchor" id="layoutsystem-layout"></a>

  96. Layouts</h2>

  97. <p>As mentioned, a <a class="el" href="class_q_c_p_layout_element.html" title="The abstract base class for all objects that form the layout system. ">QCPLayoutElement</a> may have an arbitrary number of child layout elements and in princple can have the only purpose to manage/arrange those child elements. This is what the subclass <a class="el" href="class_q_c_p_layout.html">QCPLayout</a> specializes on. It is a <a class="el" href="class_q_c_p_layout_element.html" title="The abstract base class for all objects that form the layout system. ">QCPLayoutElement</a> itself but has no visual representation. It defines an interface to add, remove and manage child layout elements. <a class="el" href="class_q_c_p_layout.html" title="The abstract base class for layouts. ">QCPLayout</a> isn't a usable layout though, it's an abstract base class that concrete layouts derive from, like <a class="el" href="class_q_c_p_layout_grid.html">QCPLayoutGrid</a> which arranges its child elements in a grid and <a class="el" href="class_q_c_p_layout_inset.html">QCPLayoutInset</a> which allows placing child elements freely inside its rect.</p>

  98. <p>Since a <a class="el" href="class_q_c_p_layout.html" title="The abstract base class for layouts. ">QCPLayout</a> is a layout element itself, it may be placed inside other layouts. This way, complex hierarchies may be created, offering very flexible arrangements.</p>

  99. <div style="text-align:center"> <div style="display:inline-block; margin-left:auto; margin-right:auto"><div class="image">

  100. <img src="LayoutsystemSketch0.png" alt="LayoutsystemSketch0.png"/>

  101. </div>

  102. </div> <div style="display:inline-block; margin-left:auto; margin-right:auto"><div class="image">

  103. <img src="LayoutsystemSketch1.png" alt="LayoutsystemSketch1.png"/>

  104. </div>

  105. </div> <div style="clear:both"></div> <div style="display:inline-block; max-width:1000px; text-align:justify"> Sketch of the default <a class="el" href="class_q_c_p_layout_grid.html" title="A layout that arranges child elements in a grid. ">QCPLayoutGrid</a> accessible via <a class="el" href="class_q_custom_plot.html#afd280d4d621ae64a106543a545c508d7">QCustomPlot::plotLayout</a>. The left image shows the outer and inner rect of the grid layout itself while the right image shows how two child layout elements are placed inside the grid layout next to each other in cells (0, 0) and (0, 1). </div> </div><h2><a class="anchor" id="layoutsystem-plotlayout"></a>

  106. The top level plot layout</h2>

  107. <p>Every <a class="el" href="class_q_custom_plot.html" title="The central class of the library. This is the QWidget which displays the plot and interacts with the ...">QCustomPlot</a> has one top level layout of type <a class="el" href="class_q_c_p_layout_grid.html">QCPLayoutGrid</a>. It is accessible via <a class="el" href="class_q_custom_plot.html#afd280d4d621ae64a106543a545c508d7">QCustomPlot::plotLayout</a> and contains (directly or indirectly via other sub-layouts) all layout elements in the <a class="el" href="class_q_custom_plot.html" title="The central class of the library. This is the QWidget which displays the plot and interacts with the ...">QCustomPlot</a>. By default, this top level grid layout contains a single cell which holds the main axis rect.</p>

  108. <h2><a class="anchor" id="layoutsystem-examples"></a>

  109. Examples</h2>

  110. <p><b>Adding a plot title</b> is a typical and simple case to demonstrate basic workings of the layout system. </p><div class="fragment"><div class="line"><span class="comment">// first we create and prepare a plot title layout element:</span></div>

  111. <div class="line"><a class="code" href="class_q_c_p_plot_title.html">QCPPlotTitle</a> *title = <span class="keyword">new</span> <a class="code" href="class_q_c_p_plot_title.html">QCPPlotTitle</a>(customPlot);</div>

  112. <div class="line">title-&gt;<a class="code" href="class_q_c_p_plot_title.html#aae5a93e88050dfb2cbf6adc087516821">setText</a>(<span class="stringliteral">&quot;Plot Title Example&quot;</span>);</div>

  113. <div class="line">title-&gt;<a class="code" href="class_q_c_p_plot_title.html#a199fc7170802ea65006c371875349e37">setFont</a>(QFont(<span class="stringliteral">&quot;sans&quot;</span>, 12, QFont::Bold));</div>

  114. <div class="line"><span class="comment">// then we add it to the main plot layout:</span></div>

  115. <div class="line">customPlot-&gt;plotLayout()-&gt;insertRow(0); <span class="comment">// insert an empty row above the axis rect</span></div>

  116. <div class="line">customPlot-&gt;plotLayout()-&gt;addElement(0, 0, title); <span class="comment">// insert the title in the empty cell we just created</span></div>

  117. </div><!-- fragment --> <div class="image">

  118. <img src="layoutsystem-addingplottitle.png" alt="layoutsystem-addingplottitle.png"/>

  119. </div>

  120. <p><b>Arranging multiple axis rects</b> actually is the central purpose of the layout system. </p><div class="fragment"><div class="line">customPlot-&gt;plotLayout()-&gt;clear(); <span class="comment">// let&#39;s start from scratch and remove the default axis rect</span></div>

  121. <div class="line"><span class="comment">// add the first axis rect in second row (row index 1):</span></div>

  122. <div class="line">customPlot-&gt;plotLayout()-&gt;addElement(1, 0, <span class="keyword">new</span> QCPAxisRect(customPlot));</div>

  123. <div class="line"><span class="comment">// create a sub layout that we&#39;ll place in first row:</span></div>

  124. <div class="line"><a class="code" href="class_q_c_p_layout_grid.html">QCPLayoutGrid</a> *subLayout = <span class="keyword">new</span> <a class="code" href="class_q_c_p_layout_grid.html">QCPLayoutGrid</a>;</div>

  125. <div class="line">customPlot-&gt;plotLayout()-&gt;<a class="code" href="class_q_c_p_layout_grid.html#adff1a2ca691ed83d2d24a4cd1fe17012">addElement</a>(0, 0, subLayout);</div>

  126. <div class="line"><span class="comment">// add two axis rects in the sub layout next to eachother:</span></div>

  127. <div class="line">subLayout-&gt;<a class="code" href="class_q_c_p_layout_grid.html#adff1a2ca691ed83d2d24a4cd1fe17012">addElement</a>(0, 0, <span class="keyword">new</span> QCPAxisRect(customPlot));</div>

  128. <div class="line">subLayout-&gt;<a class="code" href="class_q_c_p_layout_grid.html#adff1a2ca691ed83d2d24a4cd1fe17012">addElement</a>(0, 1, <span class="keyword">new</span> QCPAxisRect(customPlot));</div>

  129. <div class="line">subLayout-&gt;<a class="code" href="class_q_c_p_layout_grid.html#ae38f31a71687b9d7ee3104852528fb50">setColumnStretchFactor</a>(0, 3); <span class="comment">// left axis rect shall have 60% of width</span></div>

  130. <div class="line">subLayout-&gt;<a class="code" href="class_q_c_p_layout_grid.html#ae38f31a71687b9d7ee3104852528fb50">setColumnStretchFactor</a>(1, 2); <span class="comment">// right one only 40% (3:2 = 60:40)</span></div>

  131. </div><!-- fragment --> <div class="image">

  132. <img src="layoutsystem-multipleaxisrects.png" alt="layoutsystem-multipleaxisrects.png"/>

  133. </div>

  134.  </div></div><!-- contents -->

  135. <!-- start footer part -->

  136. <hr class="footer"/><address class="footer"><small>

  137. Generado el Martes, 11 de Agosto de 2015 13:04:57 para My Project por &#160;<a href="http://www.doxygen.org/index.html">

  138. <img class="footer" src="doxygen.png" alt="doxygen"/>

  139. </a> 1.8.9.1

  140. </small></address>

  141. </body>

  142. </html>