qml-qtquick-pathattribute.html 11.9 KB
Newer Older
xuebingbing's avatar
xuebingbing committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qquickpath.cpp -->
  <title>PathAttribute QML Type | Qt Quick 5.11</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="../qtdoc/index.html">Qt 5.11</a></td><td ><a href="qtquick-index.html">Qt Quick</a></td><td ><a href="qtquick-qmlmodule.html">QML Types</a></td><td >PathAttribute QML Type</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.11.2 Reference Documentation</td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#properties">Properties</a></li>
<li class="level1"><a href="#details">Detailed Description</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">PathAttribute QML Type</h1>
<span class="subtitle"></span>
<!-- $$$PathAttribute-brief -->
<p>Specifies how to set an attribute at a given position in a Path. <a href="#details">More...</a></p>
<!-- @@@PathAttribute -->
<div class="table"><table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> Import Statement:</td><td class="memItemRight bottomAlign"> import QtQuick 2.11</td></tr></table></div><ul>
<li><a href="qml-qtquick-pathattribute-members.html">List of all members, including inherited members</a></li>
</ul>
<a name="properties"></a>
<h2 id="properties">Properties</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-pathattribute.html#name-prop">name</a></b></b> : string</li>
<li class="fn"><b><b><a href="qml-qtquick-pathattribute.html#value-prop">value</a></b></b> : real</li>
</ul>
<!-- $$$PathAttribute-description -->
<a name="details"></a>
<h2 id="details">Detailed Description</h2>
<p>The <a href="qml-qtquick-pathattribute.html">PathAttribute</a> object allows attributes consisting of a name and a value to be specified for various points along a path. The attributes are exposed to the delegate as <a href="../qtqml/qtqml-syntax-objectattributes.html#attached-properties-and-attached-signal-handlers">Attached Properties</a>. The value of an attribute at any particular point along the path is interpolated from the PathAttributes bounding that point.</p>
<p>The example below shows a path with the items scaled to 30% with opacity 50% at the top of the path and scaled 100% with opacity 100% at the bottom. Note the use of the <a href="qml-qtquick-pathview.html">PathView</a>.iconScale and <a href="qml-qtquick-pathview.html">PathView</a>.iconOpacity attached properties to set the scale and opacity of the delegate.</p>
<div class="table"><table class="generic">
 <tr valign="top" class="odd"><td ><p class="centerAlign"><img src="images/declarative-pathattribute.png" alt="" /></p></td><td ><pre class="qml">

  import QtQuick 2.0

  <span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
      <span class="name">width</span>: <span class="number">240</span>; <span class="name">height</span>: <span class="number">200</span>

      <span class="type"><a href="../qtqml/qml-qtqml-component.html">Component</a></span> {
          <span class="name">id</span>: <span class="name">delegate</span>
          <span class="type"><a href="qml-qtquick-item.html">Item</a></span> {
              <span class="name">width</span>: <span class="number">80</span>; <span class="name">height</span>: <span class="number">80</span>
              <span class="name">scale</span>: <span class="name">PathView</span>.<span class="name">iconScale</span>
              <span class="name">opacity</span>: <span class="name">PathView</span>.<span class="name">iconOpacity</span>
              <span class="type"><a href="qml-qtquick-column.html">Column</a></span> {
                  <span class="type"><a href="qml-qtquick-image.html">Image</a></span> { <span class="name">anchors</span>.horizontalCenter: <span class="name">nameText</span>.<span class="name">horizontalCenter</span>; <span class="name">width</span>: <span class="number">64</span>; <span class="name">height</span>: <span class="number">64</span>; <span class="name">source</span>: <span class="name">icon</span> }
                  <span class="type"><a href="qml-qtquick-text.html">Text</a></span> { <span class="name">id</span>: <span class="name">nameText</span>; <span class="name">text</span>: <span class="name">name</span>; <span class="name">font</span>.pointSize: <span class="number">16</span> }
              }
          }
      }

      <span class="type"><a href="qml-qtquick-pathview.html">PathView</a></span> {
          <span class="name">anchors</span>.fill: <span class="name">parent</span>
          <span class="name">model</span>: <span class="name">ContactModel</span> {}
          <span class="name">delegate</span>: <span class="name">delegate</span>
          <span class="name">path</span>: <span class="name">Path</span> {
              <span class="name">startX</span>: <span class="number">120</span>; <span class="name">startY</span>: <span class="number">100</span>
              <span class="type"><a href="qml-qtquick-pathattribute.html">PathAttribute</a></span> { <span class="name">name</span>: <span class="string">&quot;iconScale&quot;</span>; <span class="name">value</span>: <span class="number">1.0</span> }
              <span class="type"><a href="qml-qtquick-pathattribute.html">PathAttribute</a></span> { <span class="name">name</span>: <span class="string">&quot;iconOpacity&quot;</span>; <span class="name">value</span>: <span class="number">1.0</span> }
              <span class="type"><a href="qml-qtquick-pathquad.html">PathQuad</a></span> { <span class="name">x</span>: <span class="number">120</span>; <span class="name">y</span>: <span class="number">25</span>; <span class="name">controlX</span>: <span class="number">260</span>; <span class="name">controlY</span>: <span class="number">75</span> }
              <span class="type"><a href="qml-qtquick-pathattribute.html">PathAttribute</a></span> { <span class="name">name</span>: <span class="string">&quot;iconScale&quot;</span>; <span class="name">value</span>: <span class="number">0.3</span> }
              <span class="type"><a href="qml-qtquick-pathattribute.html">PathAttribute</a></span> { <span class="name">name</span>: <span class="string">&quot;iconOpacity&quot;</span>; <span class="name">value</span>: <span class="number">0.5</span> }
              <span class="type"><a href="qml-qtquick-pathquad.html">PathQuad</a></span> { <span class="name">x</span>: <span class="number">120</span>; <span class="name">y</span>: <span class="number">100</span>; <span class="name">controlX</span>: -<span class="number">20</span>; <span class="name">controlY</span>: <span class="number">75</span> }
          }
      }
  }

</pre>
<p>(see the <a href="qml-qtquick-pathview.html">PathView</a> documentation for the specification of ContactModel.qml used for ContactModel above.)</p>
</td></tr>
</table></div>
<p><b>See also </b><a href="qml-qtquick-path.html">Path</a>.</p>
<!-- @@@PathAttribute -->
<h2>Property Documentation</h2>
<!-- $$$name -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="name-prop">
<td class="tblQmlPropNode"><p>
<a name="name-prop"></a><span class="name">name</span> : <span class="type"><a href="../qtqml/qml-string.html">string</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the name of the attribute to change.</p>
<p>This attribute will be available to the delegate as <a href="qml-qtquick-pathview.html">PathView</a>.&lt;name&gt;</p>
<p>Note that using an existing Item property name such as &quot;opacity&quot; as an attribute is allowed. This is because path attributes add a new <a href="../qtqml/qtqml-syntax-objectattributes.html#attached-properties-and-attached-signal-handlers">Attached Property</a> which in no way clashes with existing properties.</p>
</div></div><!-- @@@name -->
<br/>
<!-- $$$value -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="value-prop">
<td class="tblQmlPropNode"><p>
<a name="value-prop"></a><span class="name">value</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the value for the attribute.</p>
<p>The value specified can be used to influence the visual appearance of an item along the path. For example, the following Path specifies an attribute named <i>itemRotation</i>, which has the value <i>0</i> at the beginning of the path, and the value 90 at the end of the path.</p>
<pre class="qml">

  <span class="type"><a href="qml-qtquick-path.html">Path</a></span> {
      <span class="name">startX</span>: <span class="number">0</span>
      <span class="name">startY</span>: <span class="number">0</span>
      <span class="type"><a href="qml-qtquick-pathattribute.html">PathAttribute</a></span> { <span class="name">name</span>: <span class="string">&quot;itemRotation&quot;</span>; <span class="name">value</span>: <span class="number">0</span> }
      <span class="type"><a href="qml-qtquick-pathline.html">PathLine</a></span> { <span class="name">x</span>: <span class="number">100</span>; <span class="name">y</span>: <span class="number">100</span> }
      <span class="type"><a href="qml-qtquick-pathattribute.html">PathAttribute</a></span> { <span class="name">name</span>: <span class="string">&quot;itemRotation&quot;</span>; <span class="name">value</span>: <span class="number">90</span> }
  }

</pre>
<p>In our delegate, we can then bind the <i>rotation</i> property to the <a href="../qtqml/qtqml-syntax-objectattributes.html#attached-properties-and-attached-signal-handlers">Attached Property</a> <i>PathView.itemRotation</i> created for this attribute.</p>
<pre class="qml">

  <span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
      <span class="name">width</span>: <span class="number">10</span>; <span class="name">height</span>: <span class="number">10</span>
      <span class="name">rotation</span>: <span class="name">PathView</span>.<span class="name">itemRotation</span>
  }

</pre>
<p>As each item is positioned along the path, it will be rotated accordingly: an item at the beginning of the path with be not be rotated, an item at the end of the path will be rotated 90 degrees, and an item mid-way along the path will be rotated 45 degrees.</p>
</div></div><!-- @@@value -->
<br/>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2018 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br/>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br/>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>