Sophie

Sophie

distrib > Mageia > 7 > i586 > media > core-updates > by-pkgid > 6e2327ca1c896c6d674ae53117299f21 > files > 1686

qtdeclarative5-doc-5.12.6-1.mga7.noarch.rpm

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- shadereffects.qdoc -->
  <title>Qt Quick Examples - Shader Effects | Qt Quick 5.12.6</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 >Qt 5.12</td><td ><a href="qtquick-index.html">Qt Quick</a></td><td >Qt Quick Examples - Shader Effects</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.6 Reference Documentation</a></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="#running-the-example">Running the Example</a></li>
<li class="level1"><a href="#using-shadereffect">Using ShaderEffect</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt Quick Examples - Shader Effects</h1>
<span class="subtitle"></span>
<!-- $$$shadereffects-brief -->
<p>A Qt Quick example demonstrating the use of shader effects.</p>
<!-- @@@shadereffects -->
<!-- $$$shadereffects-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/qml-shadereffects-example.png" alt="" /></p><p>This example demonstrates a couple of visual effects that you can perform with shaders in Qt Quick. It applies five different effects on a text and a couple of images. For more information, visit <a href="qtquick-effects-topic.html">Important Concepts In Qt Quick - Graphical Effects</a></p>
<a name="running-the-example"></a>
<h2 id="running-the-example">Running the Example</h2>
<p>To run the example from Qt Creator, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit Building and Running an Example.</p>
<a name="using-shadereffect"></a>
<h2 id="using-shadereffect">Using ShaderEffect</h2>
<p>The <a href="qml-qtquick-shadereffect.html">ShaderEffect</a> type typically operates on other types, using a <a href="qml-qtquick-shadereffectsource.html">ShaderEffectSource</a>:</p>
<pre class="qml">

  ShaderEffectSource {
      id: theSource
      sourceItem: theItem
  }

</pre>
<p>In the above snippet, <code>theItem</code> is the ID of a complex QML object in the file.</p>
<p>ShaderEffects can use this <a href="qml-qtquick-shadereffectsource.html">ShaderEffectSource</a> as a texture in their fragment shader:</p>
<pre class="qml">

  fragmentShader: "qrc:shadereffects/content/shaders/wobble.frag"

</pre>
<p>In order to support multiple graphics APIs, not just OpenGL, the shader source is not embedded into QML. Instead, file selectors are used to select the correct variant at runtime. Based on the Qt Quick backend in use, Qt will automatically select either <code>shaders/wobble.frag</code> with the GLSL source code or <code>shaders/+hlsl/wobble.frag</code> with the HLSL source code.</p>
<p><b>Note: </b>For simplicity shader source code is used in all variants of the files. However, with the Direct3D backend of Qt Quick pre-compiled shaders are also supported. For example, try the following commands in the <code>content/shaders/+hlsl</code> directory: <code>move wobble.frag wobble.frag.src</code> followed by <code>fxc /E main /T ps_5_0 /Fo wobble.frag wobble.frag.src</code>. Now <code>wobble.frag</code> contains Direct3D bytecode and that is what gets shipped with the application instead of the shader source. Further changes are not necessary, the application will function like before.</p><p>You can use any custom property on the <a href="qml-qtquick-shadereffect.html">ShaderEffect</a> in your shader. This makes animated shader code very easy:</p>
<pre class="qml">

  property variant source: theSource
  property real bend: 0
  property real minimize: 0
  property real side: genieSlider.value
  SequentialAnimation on bend {
      loops: Animation.Infinite
      NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
      PauseAnimation { duration: 1600 }
      NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
      PauseAnimation { duration: 1000 }
  }
  SequentialAnimation on minimize {
      loops: Animation.Infinite
      PauseAnimation { duration: 300 }
      NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
      PauseAnimation { duration: 1000 }
      NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
      PauseAnimation { duration: 1300 }
  }

</pre>
<p>ShaderEffects can also have a custom vertext shader. Setting the mesh property on <a href="qml-qtquick-shadereffect.html">ShaderEffect</a> provides more vertices for you to manipulate, enabling more effects.</p>
<pre class="qml">

  mesh: Qt.size(10, 10)
  vertexShader: "qrc:shadereffects/content/shaders/genie.vert"

</pre>
<p>Files:</p>
<ul>
<li><a href="qtquick-shadereffects-content-slider-qml.html">shadereffects/content/Slider.qml</a></li>
<li><a href="qtquick-shadereffects-main-cpp.html">shadereffects/main.cpp</a></li>
<li><a href="qtquick-shadereffects-shadereffects-pro.html">shadereffects/shadereffects.pro</a></li>
<li><a href="qtquick-shadereffects-shadereffects-qml.html">shadereffects/shadereffects.qml</a></li>
<li><a href="qtquick-shadereffects-shadereffects-qmlproject.html">shadereffects/shadereffects.qmlproject</a></li>
<li><a href="qtquick-shadereffects-shadereffects-qrc.html">shadereffects/shadereffects.qrc</a></li>
</ul>
<p>Images:</p>
<ul>
<li><a href="images/used-in-examples/shadereffects/content/face-smile.png">shadereffects/content/face-smile.png</a></li>
<li><a href="images/used-in-examples/shadereffects/content/qt-logo.png">shadereffects/content/qt-logo.png</a></li>
</ul>
</div>
<!-- @@@shadereffects -->
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 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>

Perl :: Catalyst :: PostgreSQL :: RPM Valid HTML 4.01 Transitional