如何實現素描刷，就像deviantART muro一樣？

Question

deviantART muro有一套很棒的繪畫工具。我非常好奇，如何在算術上實現這些畫筆，如Sketch和Paintbrush？

使用任何正常的編程語言來解釋是好的，但我更喜歡C++或JavaScript。我認爲它比閱讀他們的JS源代碼更好。

Answer 1

我要說它的工作原理是這樣的：

• 鼠標運動軌跡
• 上捕捉鼠標移動，從保存的「老鼠標位置」捕捉到「新的鼠標位置」畫出你想要刷，迭代在一個像素的距離
• 如果您移動鼠標太快，腳本捕獲，它將看起來像一個計算長直線（這是它看起來像穆羅正在做的）。如果你想得到真正的幻想，你可以計算從以前的鼠標位置軌跡，並繪製，而不是一條「平滑」線。

既然你指定了Javascript，你可能想畫一個canvas對象。

編輯1：

Sketch專門似乎保存鼠標移動，然後通過循環，說20個最新的鼠標移動每個鼠標的移動，並從該點到當前點繪製貝塞爾曲線。

因此，像（僞代碼）

Object mousemovements = []; 
on.mousemove(event) 
{ 
    if (mousemovements.length > 20) 
    { 
    mousemovements.removeLast(); 
    } 
    mousemovements.insertAtBeginning([ event.mouseX, event.mouseY ]); 
    for-each (movement in mousemovements) 
    { 
    drawBeziercurveFromTo(movement.mouseX, movement.mouseY, 
          event.mouseX, event.mouseY); 
    } 
} 

Jquery/Canvas DEMO based on the above pseudo code

編輯2：

我在如何 「素描」 工作定睛一看，似乎他們更新鼠標指針位置，將舊點移近新點。事情是這樣的：

This DEMO works pretty much like the sketch brush