帶有mousemove函數的SVG動畫裏面setInterval函數

Question

我想創建一些SVG響應鼠標移動與隨機移動相結合。

您可以檢查這裏的代碼
https://jsfiddle.net/hass/Lfv2yjyf/

$(document).ready(function(){ 
    var d = document; 
    var mysvg = d.getElementById("mysvg"); 

    var mx,my,random,xmid,ymid,input; 

    setInterval(function() { 
     //svg size 
     var svgw = $("svg").width(); 
     var svgh = $("svg").height(); 

     //center point of svg 
     xmid = svgw/2; 
     ymid = svgh/2; 

     //random numbers 
     random = { 
      a: Math.floor(Math.random()*25), 
      b: Math.floor(Math.random()*25), 
      c: Math.floor(Math.random()*25) 
     }; 

     //add event to svg 
     mysvg.addEventListener("mousemove", function(e) { 
      //aqcuire mouse position relative to svg 
      mx = e.clientX; 
      my = e.clientY; 

      //add <path> to svg 
      input = '<path d="M ' + xmid + ',' + ymid + ' l ' + 0 + ',' + 0 + ' ' + ((mx-xmid)/2) + ',' + random.a + ' ' + ((mx-xmid)-((mx-xmid)/2)) + ',' + ((my-ymid)-random.a) + ' ' + '" stroke="orange" stroke-width="7" stroke-linejoin="round" fill="none" />'; 
     }); 

     //display datas 
     $("#status1").html("X Position : " + mx + "<br>Y Position: " + my + "<br><br>Center Point X: " + xmid + "<br><br>Center Point Y: " + ymid + "<br><br>Width: " + svgw + "<br>Height: " + svgh + "<br><br>Random Value a: " + random.a + "<br>Random Value b: " + random.b + "<br>Random Value c: " + random.c); 

     $("#mysvg").html(input); 
    }, 10); 
}); 

這裏我的問題是在中點線的隨機運動只響應當我移動鼠標時，我知道這並不因爲隨機工作值只能通過鼠標移動獲得。

我想要做的是我想要隨機移動，即使沒有鼠標移動。

所以我想知道我是如何在setInterval中每10毫秒獲取一次全局對象的值，或者是我在「setInterval」函數中設置的任何值，但我更喜歡幾乎每毫秒，以便獲得隨機振動效果。

我也試着寫了鼠標移動功能的「路徑」之外，它的工作原理，這是我想達到

https://jsfiddle.net/hass/d2L4hda5/

但這裏的問題是，當我檢查控制檯（瀏覽器的發展工具→控制檯選項卡）鼠標x和鼠標y的值是「NaN」。但渲染的作品。

我找不到我在這裏失蹤的東西。

所以我想得到一些建議，如果第二個鏈接是我想要實現的，並獲得鼠標x和鼠標y或任何其他最有效的技術的正確值。

問候。

Answer 1

我不完全確定你的問題在這裏。您的問題是，您似乎無法在您的瀏覽器工具中看到mx和我的價值觀？你如何閱讀它們？請注意，它們不是全局變量。它們在ready()函數中是本地的。因此，例如，如果您只是在控制檯中鍵入mx，您將無法看到該值。

另請注意，每次調用間隔計時器函數時，都不需要繼續添加mousemove事件處理程序。它可以完全獨立。見下文。

$(document).ready(function(){ 
 
    var d = document; 
 
    var mysvg = d.getElementById("mysvg"); 
 

 
    var mx,my,random,xmid,ymid,input; 
 

 
    //svg size 
 
    var svgw = $("svg").width(); 
 
    var svgh = $("svg").height(); 
 

 
    //center point of svg 
 
    xmid = svgw/2; 
 
    ymid = svgh/2; 
 

 
    //add event to svg 
 
    mysvg.addEventListener("mousemove", function(e) { 
 
     //aqcuire mouse position relative to svg 
 
     mx = e.clientX; 
 
     my = e.clientY; 
 
    }); 
 

 
    setInterval(function() { 
 
     //random numbers 
 
     random = { 
 
      a: Math.floor(Math.random()*25), 
 
      b: Math.floor(Math.random()*25), 
 
      c: Math.floor(Math.random()*25) 
 
     }; 
 

 
     //add <path> to svg 
 
     input = '<path d="M ' + xmid + ',' + ymid + ' l ' + 0 + ',' + 0 + ' ' + ((mx-xmid)/2) + ',' + random.a + ' ' + ((mx-xmid)-((mx-xmid)/2)) + ',' + ((my-ymid)-random.a) + ' ' + '" stroke="orange" stroke-width="7" stroke-linejoin="round" fill="none" />'; 
 

 
     //display datas 
 
     $("#status1").html("X Position : " + mx + "<br>Y Position: " + my + "<br><br>Center Point X: " + xmid + "<br><br>Center Point Y: " + ymid + "<br><br>Width: " + svgw + "<br>Height: " + svgh + "<br><br>Random Value a: " + random.a + "<br>Random Value b: " + random.b + "<br>Random Value c: " + random.c); 
 

 
     $("#mysvg").html(input); 
 
    }, 10); 
 

 
});

html, body { 
 
\t \t width: 100%; 
 
\t \t height: 100%; 
 
\t \t padding: 0; 
 
\t \t margin: 0; 
 
\t } 
 

 
body { 
 
    overflow: hidden; 
 
} 
 

 
#wrapper { 
 
    width: 100%; 
 
    min-height: 100%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    height: 100%; 
 
    outline: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <p id="status1"></p> 
 
    <svg id="mysvg" width="300" height="300"></svg> 
 
</div>