如何使用JavaScript（或其他）來製作可拖動點的網格，以實時修改曲線？

Question

我想在頁面上創建一個包含曲線圖的框，然後用戶可以在修改曲線時拖動幾個點。最好是javascript或者我可以很容易地與DOM和ASP.NET共享變量。我想拿出一定數量的要點。創建新點並刪除它們也會很棒。通過這種方式，我可以獲得可移動的曲線以及選擇可以保存到數據庫的座標數量的功能。

噢是的曲線是日誌（n）基地，無論我猜10默認？

Answer 1

如果你想在JavaScript中做到這一點，那麼我建議你不要擔心asp部分，而只是專注於你想要的功能，首先。

你會想看看HTML5元素，<canvas>，對於IE，你會想要得到excanvas.js，http://excanvas.sourceforge.net/。

對於在畫布上的教程，你可以從這裏開始： https://developer.mozilla.org/en/Canvas_tutorial

這將使你有一個繪圖表面，您可以捕捉鼠標點擊和鼠標移動事件，以及其他JavaScript事件，這樣你就可以有你想要的功能。

Answer 2

如果你只是想讓用戶畫一條曲線，我想你會想看看使用樣條曲線。這將使您可以通過定義2D空間中的點來計算曲線。參見，例如：

http://www.math.ucla.edu/~baker/java/hoefer/Spline.htm

我不知道對數的基礎，雖然。

Answer 3

我創建了一個jQuery plugin，它允許您沿着曲線定位元素。在主頁上，我已經實現了你正在談論的內容，以幫助生成曲線。

它使用jQuery，jQuery UI和jCurvy插件的組合來實現此目的。我建議在主頁上查看源代碼，但是這裏是處理大部分代碼的代碼：

$('.draggable').draggable({ 
       start: function() { 

       }, 
       drag: function() { 

        $('.dot').remove(); 
        var curId = $(this).attr('id'); 
        var pos = $(this).position(); 
        var param; 
        switch (curId) { 
         case 'x1y1': 
          x1 = pos.left; 
          y1 = pos.top; 
          break; 

         case 'x2y2': 
          x2 = pos.left; 
          y2 = pos.top; 
          break; 

         case 'start': 
          x0 = pos.left; 
          y0 = pos.top; 
          break; 

         case 'finish': 
          x3 = pos.left; 
          y3 = pos.top; 
          break; 
        } 
        param = { 
         "x0": x0, 
         "y0": y0, 
         "x1": x1, 
         "y1": y1, 
         "x2": x2, 
         "y2": y2, 
         "x3": x3, 
         "y3": y3 
        }; 

        $('.curve').curve(param); 
        $('#sampleCode').text('$(".mySelector").curve(' + JSON.stringify(param) + ')'); 
        $('#demoLink').attr('href', 'demo.html?p=' + JSON.stringify(param)); 
       }, 
       stop: function() { 
       } 
      });