javascript - 使用 Javascript 创建具有漫画风格/手抖动的 SVG/ Canvas 草图

Question

如何使用 Javascript 创建具有漫画风格/手抖动的 SVG/ Canvas 草图

我知道 xkcd风格 JS 绘图仪和 this文章。 请注意，我不是要求绘图，而是要求任何类型的草图、线条、形状、文本等。

还有哪些使用 JS 的方法/技术？

编辑:在思考并阅读了一些时间之后，我决定实现自己的 JS 库，为 SVG 和 HTML5 Canvas 提供卡通风格的绘图。 它被称为comic.js可以找到here .

Answer 1

我会使用 Canvas 库来做到这一点，只是为了在操作形状时简单起见。

我要寻找的是 Paper.js和 Fabric.js 。 不过，我将重点关注 Paper.js，因为它是我使用过的。

<小时/>

• 您可以draw beziers or lines创建形状。你甚至可以 import SVG's如果你想。您甚至可以有预定义的形状 如Circles/Squares等等

所以你已经有了形状，现在做什么？

• 您可以flatten他们(将它们分割为段，添加更多 其几何体的顶点)。可以增加分割 间隔，这将导致每个顶点/节点的数量较多 小路。分割间隔是参数maxDistance 展平函数。

• 然后你可以沿着每个路径/形状的顶点行走并移动每个 通过使用 position.x 和 position.y

在一定程度上(例如，向随机方向移动 1-2 个像素)

如果这就是您的意思:

，那么这是代码:

//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 上的每个“点”都是一个对象，并且大量的点/节点/顶点对于浏览器来说有点难以处理。因此，如果您的设计很复杂和/或您希望用户与您的绘图进行交互(交互可能会很缓慢)，这可能会成为一个障碍。

或者，您可以使用普通的旧 Canvas 来执行此操作，无需任何库，但我不会这样做，因为我闻到需要算法来手动绘制形状，然后在这些算法中引入抖动。就计算时间而言，这会快得多，但实现起来会更困难，因为 Canvas 是一种低级的东西 - 它只记住绘制的像素，你需要滚动 -您自己的数据结构来记住形状、它们的位置等。