使用JavaScript來創建漫畫風格/手抖動

Question

SVG /帆布草圖如何使用JavaScript

我知道xkcd風格JS繪圖儀和this文章的創建與漫畫風格/手抖動SVG /帆布草圖。 請注意，我不是要求重複繪製，而是繪製任何類型的素描，線條，形狀，文字等等。

使用JS有什麼更多的方法/技術？

編輯：經過思考並閱讀了一些關於此的內容之後，我決定實現我自己的JS庫，爲SVG和HTML5畫布提供卡通風格繪畫。 它被稱爲comic.js，可以找到here。

Answer 1

我會使用Canvas庫來做到這一點，只是爲了簡化操作圖形。

我會尋找的是Paper.js和Fabric.js。 但是，我將專注於Paper.js，因爲它是我一起工作的人。

---

• 可以draw beziers or lines創建形狀。如果需要，您甚至可以使用 import SVG's。你甚至可以有預定義的形狀 如Circles/Squares等

所以，你必須形狀，現在該怎麼辦？

• 可以flatten他們（它們細分成段，增加更多的 頂點其幾何形狀）。您可以增加細分 區間，這會導致每個 路徑的頂點/節點數量較多。細分間隔是 flatten函數的參數maxDistance。

• 然後，您可以沿着每個路徑/形狀的頂點行走，並將每個 移動一定程度（例如，摹1-2像素隨機方向），通過使用position.x和position.y

如果這是你的意思是：

，那麼這裏是代碼：

//STEP 1 -- create shapes, a circle and rectangle in this example 

var myCircle = new Path.Circle(new Point(100, 70), 50); 
myCircle.strokeColor = 'white'; 
myCircle.strokeWidth = 2; 

var mySquare = new Rectangle(new Point(350, 250), new Point(190, 100)); 
var square = new Path.Rectangle(mySquare); 
square.strokeColor = 'white'; 
square.strokeWidth = 2; 

//STEP 2 -- Subdivide the shapes into segments. Parameter here is the max distance we walk along-the-path before adding a new vertex 

myCircle.flatten(5); 
square.flatten(4); 


//STEP 3 -- Loop through the segment points of the path and move each to a random value between 1 and 4 

for (var i = 0; i < myCircle.segments.length; i++) { //loop for circle 
    myCircle.segments[i].point.x += getRandomInt(1,3); 
    myCircle.segments[i].point.y += getRandomInt(1,3); 
}; 

for (var i = 0; i < square.segments.length; i++){ //loop for square 
    square.segments[i].point.x += getRandomInt(1,3); 
    square.segments[i].point.y += getRandomInt(1,3); 
}; 


//draw the paper view 
view.draw(); 


//Utility function that returns a random integer within a range 
function getRandomInt(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 

，這是jsFiddle它：

---

這個方案的問題是你的畫布上的每個「點」是一個對象和大量的點/節點/頂點是有點重了瀏覽器來處理。所以如果你的設計很複雜並且/或者你想讓用戶與你的圖畫交互（這種交互可能會遲緩），這可能是一個障礙。

或者您可以使用普通老式帆布要做到這一點，沒有任何庫，但我不會那麼做，因爲我聞到了需要算法手動繪製形狀，然後在這些算法產生抖動。就計算時間而言，這會更快，，但實現起來會比較困難，因爲Canvas是一種低級別的東西 - 它只記住像素，並且需要自己滾動數據結構要記住形狀，他們的位置等等。