9

だから私はtrianglify.jsをいじっています。

ここでの私の目的は、マウスが移動すると、三角形のキャンバスの分散が変化することです。

理論的には問題ありませんが、実際には、いくつかの異なるコード形式を試してみましたが、実際には新しい値を尊重するために trianglify を取得できないようです。

うまくいけば、誰かが私が間違っていることに光を当てることができます。

//Do Traingle Canvas
window.onload = function() {
    var pattern = Trianglify({
      width: window.innerWidth,
      height: window.innerHeight,
      cell_size: 120,
      stroke_width: 1.3,
      variance: 0.75,
      seed: '9rqsn',
      x_colors: 'Blues'
    });
    var homecan = document.getElementById('home');
    homecan.appendChild(pattern.canvas());

    document.onmousemove = (function() {
      var onmousestop = function() {
          var pattern = Trianglify({
            variance: 0.05
          });
          pattern.canvas()
        },
        thread;

      return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 100);
      };
    })();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.4.0/trianglify.min.js"></script>
<div id="home"></div>

4

3 に答える 3

1

var pattern関数内で定義された関数は、元の関数内で定義されonmousetopたものには影響しません。したがって、期待どおりに既存のキャンバスを変更することはありません。代わりに、古いキャンバスを削除して、新しいキャンバスを追加してみてください。期待どおりに機能させるには、ここにもすべてのオプションを追加する必要がある場合があります。（さらに、機能の閉じ括弧を逃しました。質問を書いているときの入力ミスだけだと思います。あなたの質問でもそれを編集しました。）patternwindow.onload}window.onload

    var patternOptions = {
      width: window.innerWidth,
      height: window.innerHeight,
      cell_size: 120,
      stroke_width: 1.3,
      variance: 0.75,
      seed: '9rqsn',
      x_colors: 'Blues'
    };
    ...........
    ..........
        var onmousestop = function() {
          patternOptions.variance = 0.05;
          var pattern2 = Trianglify(patternOptions);
          homecan.innerHTML = ''; //Clear the existing canvas
          homecan.appendChild(pattern2.canvas()); //append the new canvas
        },
        thread;

完全なデモ:

//Do Traingle Canvas
window.onload = function() {
    var patternOptions = {
      width: window.innerWidth,
      height: window.innerHeight,
      cell_size: 120,
      stroke_width: 1.3,
      variance: 0.75,
      seed: '9rqsn',
      x_colors: 'Blues'
    };
    var pattern = Trianglify(patternOptions);
    var homecan = document.getElementById('home');
    homecan.appendChild(pattern.canvas());

    document.onmousemove = (function() {
      var onmousestop = function() {
          patternOptions.variance = 0.05;
          var pattern2 = Trianglify(patternOptions);
          homecan.innerHTML = ''; //Clear the existing canvas
          homecan.appendChild(pattern2.canvas()); //append the new canvas
        },
        thread;

      return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 100);
      };
    })();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.4.0/trianglify.min.js"></script>
<div id="home"></div>

于 2016-01-05T06:54:16.110 に答える
1

マウスの移動で色が正常に変化する例を次に示します。テストするのは難しいようですが、分散については同じである必要があります。 

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.4.0/trianglify.min.js"></script>
<body>
<canvas id='mycanvas' width='200' height='200' style="border:1px solid Black;"></canvas>
<script type="text/javascript">
   window.onload = function () {
       var pattern = Trianglify({
           width: window.innerWidth,
           height: window.innerHeight,
           cell_size: 120,
           stroke_width: 1.3,
           variance: 0.75,
           seed: '9rqsn',
           x_colors: 'Blues'
       });

       pattern.canvas(document.getElementById('mycanvas'));
   };
   document.onmousemove = function () {
       var pattern = Trianglify({
           variance: 0.05,
           x_colors: 'Reds'
       });
       pattern.canvas(document.getElementById('mycanvas'));
   };
</script>
</body>
</html>

ソース:

Trianglify の readme: https://github.com/qrohlf/trianglify/blob/master/Readme.md

Trianglify の開始: http://qrohlf.com/trianglify/#gettingstarted

HTML5 キャンバス: http://www.w3schools.com/html/html5_canvas.asp

OnMouseMove イベント: http://www.w3schools.com/jsref/event_onmousemove.asp

于 2016-01-04T20:33:45.640 に答える
1

元のソリューションの問題は、onmousemove で新しく生成されたキャンバスがどこにも表示されないことです。最初にキャンバスを作成した瞬間からキャンバスを覚えておいて、後で pattern.canvas(...) 呼び出しに引数として渡すだけです。

window.onload = function() {
    var pattern = Trianglify({
      width: window.innerWidth,
      height: window.innerHeight,
      cell_size: 120,
      stroke_width: 1.3,
      variance: 0.75,
      seed: '9rqsn',
      x_colors: 'Blues'
    });
    var homecan = document.getElementById('home');
    var canvas = pattern.canvas();
    homecan.appendChild(canvas);

    document.onmousemove = (function() {
      var onmousestop = function() {
          var pattern = Trianglify({
            width: window.innerWidth,
            height: window.innerHeight,
            variance: 0.05
          });
          pattern.canvas(canvas);
        },
        thread;

      return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 100);
      };
    })();
}

<canvas>@pabrams の解決策も問題ありません。id="mycanvas" で要素を作成することを忘れないでください。ところで、タイマーで行っていることは、基本的に自家製のデバウンスの実装です (ただし、正しいものです!): RxJS.Observable デバウンスは何をしますか?

于 2016-01-04T20:54:05.803 に答える