logo标签列表

鼠标移动时更改方差

javascripttrianglify
9

我正在尝试使用trianglify.js。

我的目标是当鼠标移动时，我的三角形画布的变化将会改变。

理论上很好，但实际上并没有起作用。我尝试了几种不同的代码格式，但似乎无法使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>

2
你能否在CodePen或其他地方创建一个可工作的演示？包括所需的库等。 - Roope
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

谢谢您的帖子，我明天会有机会仔细看一下。 - user4563161
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的解决方案也很好，只是不要忘记创建id为"mycanvas"的<canvas>元素。顺便说一句，你使用计时器的方法基本上是手工实现的去抖动（虽然是正确的！）：RxJS.Observable debounce是什么？
谢谢您的帖子，我明天会有机会仔细看一下。 - user4563161
好的，如果还有什么不清楚的地方，请告诉我。 - Tomas Kulich
1
onmousetop函数内定义的var pattern对window.onload函数中定义的原始pattern没有影响。因此，它不会修改现有的画布，正如您所期望的那样。相反，您可以尝试删除旧的画布并附加新的画布。您可能还需要在此处添加所有选项以使其按预期工作。（此外，您错过了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>

谢谢您的帖子，我明天会有机会仔细看一下。 - user4563161
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接