9

所以我在搞乱 trianglify.js。

我的目标是当鼠标移动时，我的三角形画布的方差会发生变化。

理论上很好，但实际上并没有真正采取我尝试了几种不同的代码格式，但实际上似乎无法通过三角化来尊重新值。

所以希望有人可以阐明我做错了什么。

//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

这是一个颜色在鼠标移动时成功更改的示例。方差应该是一样的，尽管这似乎很难测试。 

<!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 自述文件：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);
      };
    })();
}

@pabrams 的解决方案也很好，只是不要忘记<canvas>使用 id="mycanvas" 创建元素。顺便说一句，您对计时器所做的基本上是自制的去抖动实现（尽管，正确的一个！）：RxJS.Observable debounce 做了什么？

于 2016-01-04T20:54:05.803 回答
1

定义的var pattern内部onmousetop函数对原来pattern定义的window.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 回答