qtscript-script-context2d-scripts-scale-js.html 11.1 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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>scale.js Example File | Qt Script</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="qtscript-index.html">Qt Script</a></td><td ><a href="qtscript-script-context2d-example.html">Context2D Example</a></td><td >scale.js Example File</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="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">scale.js Example File</h1>
<span class="subtitle">script/context2d/scripts/scale.js</span>
<!-- $$$script/context2d/scripts/scale.js-description -->
<div class="descr"> <a name="details"></a>
<pre class="js">

  var <span class="name">ctx</span> = <span class="name">document</span>.<span class="name">getElementById</span>(<span class="string">'tutorial'</span>).<span class="name">getContext</span>(<span class="string">'2d'</span>);
    <span class="name">ctx</span>.<span class="name">strokeStyle</span> <span class="operator">=</span> <span class="string">&quot;#fc0&quot;</span>;
    <span class="name">ctx</span>.<span class="name">lineWidth</span> <span class="operator">=</span> <span class="number">1.5</span>;
    <span class="name">ctx</span>.<span class="name">fillRect</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">300</span>,<span class="number">300</span>);

    <span class="comment">// Uniform scaling</span>
    <span class="name">ctx</span>.<span class="name">save</span>()
    <span class="name">ctx</span>.<span class="name">translate</span>(<span class="number">50</span>,<span class="number">50</span>);
    <span class="name">drawSpirograph</span>(<span class="name">ctx</span>,<span class="number">22</span>,<span class="number">6</span>,<span class="number">5</span>);  <span class="comment">// no scaling</span>

    <span class="name">ctx</span>.<span class="name">translate</span>(<span class="number">100</span>,<span class="number">0</span>);
    <span class="name">ctx</span>.<span class="name">scale</span>(<span class="number">0.75</span>,<span class="number">0.75</span>);
    <span class="name">drawSpirograph</span>(<span class="name">ctx</span>,<span class="number">22</span>,<span class="number">6</span>,<span class="number">5</span>);

    <span class="name">ctx</span>.<span class="name">translate</span>(<span class="number">133.333</span>,<span class="number">0</span>);
    <span class="name">ctx</span>.<span class="name">scale</span>(<span class="number">0.75</span>,<span class="number">0.75</span>);
    <span class="name">drawSpirograph</span>(<span class="name">ctx</span>,<span class="number">22</span>,<span class="number">6</span>,<span class="number">5</span>);
    <span class="name">ctx</span>.<span class="name">restore</span>();

    <span class="comment">// Non uniform scaling (y direction)</span>
    <span class="name">ctx</span>.<span class="name">strokeStyle</span> <span class="operator">=</span> <span class="string">&quot;#0cf&quot;</span>;
    <span class="name">ctx</span>.<span class="name">save</span>()
    <span class="name">ctx</span>.<span class="name">translate</span>(<span class="number">50</span>,<span class="number">150</span>);
    <span class="name">ctx</span>.<span class="name">scale</span>(<span class="number">1</span>,<span class="number">0.75</span>);
    <span class="name">drawSpirograph</span>(<span class="name">ctx</span>,<span class="number">22</span>,<span class="number">6</span>,<span class="number">5</span>);

    <span class="name">ctx</span>.<span class="name">translate</span>(<span class="number">100</span>,<span class="number">0</span>);
    <span class="name">ctx</span>.<span class="name">scale</span>(<span class="number">1</span>,<span class="number">0.75</span>);
    <span class="name">drawSpirograph</span>(<span class="name">ctx</span>,<span class="number">22</span>,<span class="number">6</span>,<span class="number">5</span>);

    <span class="name">ctx</span>.<span class="name">translate</span>(<span class="number">100</span>,<span class="number">0</span>);
    <span class="name">ctx</span>.<span class="name">scale</span>(<span class="number">1</span>,<span class="number">0.75</span>);
    <span class="name">drawSpirograph</span>(<span class="name">ctx</span>,<span class="number">22</span>,<span class="number">6</span>,<span class="number">5</span>);
    <span class="name">ctx</span>.<span class="name">restore</span>();

    <span class="comment">// Non uniform scaling (x direction)</span>
    <span class="name">ctx</span>.<span class="name">strokeStyle</span> <span class="operator">=</span> <span class="string">&quot;#cf0&quot;</span>;
    <span class="name">ctx</span>.<span class="name">save</span>()
    <span class="name">ctx</span>.<span class="name">translate</span>(<span class="number">50</span>,<span class="number">250</span>);
    <span class="name">ctx</span>.<span class="name">scale</span>(<span class="number">0.75</span>,<span class="number">1</span>);
    <span class="name">drawSpirograph</span>(<span class="name">ctx</span>,<span class="number">22</span>,<span class="number">6</span>,<span class="number">5</span>);

    <span class="name">ctx</span>.<span class="name">translate</span>(<span class="number">133.333</span>,<span class="number">0</span>);
    <span class="name">ctx</span>.<span class="name">scale</span>(<span class="number">0.75</span>,<span class="number">1</span>);
    <span class="name">drawSpirograph</span>(<span class="name">ctx</span>,<span class="number">22</span>,<span class="number">6</span>,<span class="number">5</span>);

    <span class="name">ctx</span>.<span class="name">translate</span>(<span class="number">177.777</span>,<span class="number">0</span>);
    <span class="name">ctx</span>.<span class="name">scale</span>(<span class="number">0.75</span>,<span class="number">1</span>);
    <span class="name">drawSpirograph</span>(<span class="name">ctx</span>,<span class="number">22</span>,<span class="number">6</span>,<span class="number">5</span>);
    <span class="name">ctx</span>.<span class="name">restore</span>();
  <span class="keyword">function</span> <span class="name">drawSpirograph</span>(<span class="name">ctx</span>,R,r,O){
    var <span class="name">x1</span> = <span class="name">R</span><span class="operator">-</span><span class="name">O</span>;
    var <span class="name">y1</span> = <span class="number">0</span>;
    var <span class="name">i</span>  = <span class="number">1</span>;
    <span class="name">ctx</span>.<span class="name">beginPath</span>();
    <span class="name">ctx</span>.<span class="name">moveTo</span>(<span class="name">x1</span>,<span class="name">y1</span>);
    <span class="keyword">do</span> {
      <span class="keyword">if</span> (<span class="name">i</span><span class="operator">&gt;</span><span class="number">20000</span>) <span class="keyword">break</span>;
      var <span class="name">x2</span> = (<span class="name">R</span><span class="operator">+</span><span class="name">r</span>)<span class="operator">*</span><span class="name">Math</span>.<span class="name">cos</span>(<span class="name">i</span><span class="operator">*</span><span class="name">Math</span>.<span class="name">PI</span><span class="operator">/</span><span class="number">72</span>) <span class="operator">-</span> (<span class="name">r</span><span class="operator">+</span><span class="name">O</span>)<span class="operator">*</span><span class="name">Math</span>.<span class="name">cos</span>(((<span class="name">R</span><span class="operator">+</span><span class="name">r</span>)<span class="operator">/</span><span class="name">r</span>)<span class="operator">*</span>(<span class="name">i</span><span class="operator">*</span><span class="name">Math</span>.<span class="name">PI</span><span class="operator">/</span><span class="number">72</span>))
      var <span class="name">y2</span> = (<span class="name">R</span><span class="operator">+</span><span class="name">r</span>)<span class="operator">*</span><span class="name">Math</span>.<span class="name">sin</span>(<span class="name">i</span><span class="operator">*</span><span class="name">Math</span>.<span class="name">PI</span><span class="operator">/</span><span class="number">72</span>) <span class="operator">-</span> (<span class="name">r</span><span class="operator">+</span><span class="name">O</span>)<span class="operator">*</span><span class="name">Math</span>.<span class="name">sin</span>(((<span class="name">R</span><span class="operator">+</span><span class="name">r</span>)<span class="operator">/</span><span class="name">r</span>)<span class="operator">*</span>(<span class="name">i</span><span class="operator">*</span><span class="name">Math</span>.<span class="name">PI</span><span class="operator">/</span><span class="number">72</span>))
      <span class="name">ctx</span>.<span class="name">lineTo</span>(<span class="name">x2</span>,<span class="name">y2</span>);
      <span class="name">x1</span> <span class="operator">=</span> <span class="name">x2</span>;
      <span class="name">y1</span> <span class="operator">=</span> <span class="name">y2</span>;
      i++;
    } <span class="keyword">while</span> (<span class="name">x2</span> <span class="operator">!=</span> <span class="name">R</span><span class="operator">-</span><span class="name">O</span> <span class="operator">&amp;&amp;</span> <span class="name">y2</span> <span class="operator">!=</span> <span class="number">0</span> );
    <span class="name">ctx</span>.<span class="name">stroke</span>();
  }

</pre>
</div>
<!-- @@@script/context2d/scripts/scale.js -->
        </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>