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

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

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

使用JS还有哪些其他方法/技术

编辑：在思考和阅读了一段时间后，我决定实现自己的JS库，为SVG和HTML5画布提供卡通风格的绘图。

---

它被称为

comic.js

，可以找到。

我会使用画布库来实现这一点，只是为了在操作形状时简单起见

我要找的是和。 不过，我将重点介绍Paper.js，因为它是我使用过的

---

• 您可以选择创建形状。你甚至可以 如果你愿意的话。您甚至可以拥有预定义的形状 比如

那么你有了这些形状，现在呢？

• 您可以将它们（细分为段，添加更多 顶点到其几何体）。可以增加细分 间隔，这将导致每个节点的顶点数/节点数较高 路径细分间隔是

  展平功能
  

• 然后，可以沿着每个路径/形状的顶点行走并移动每个路径/形状 通过使用

  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;
}

//步骤1——在本例中创建形状、圆和矩形
var myCircle=新路径圆（新点（100,70,50）；
myCircle.strokeColor='白色'；
myCircle.strokeWidth=2；
var mySquare=新矩形（新点（350250），新点（190100））；
var square=新路径矩形（mySquare）；
square.strokeColor='白色'；
平方。冲程宽度=2；
//步骤2——将形状细分为段。这里的参数是在添加新顶点之前沿路径行走的最大距离
myCircle.flatten（5）；
正方形。扁平（4）；
//步骤3——在路径的段点之间循环，并将每个点移动到1到4之间的随机值
对于（var i=0；i

这是它的最佳选择：

---

此场景的问题是画布上的每个“点”都是一个对象，并且对于浏览器来说，大量的点/节点/顶点有点难以处理。因此，如果您的设计很复杂，并且/或者您希望用户与您的图形交互（交互可能很缓慢），这可能是一个障碍

---

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

否-我的意思是使用“线”、“圆”等命令以编程方式绘制，…你看过这篇文章吗？这篇文章介绍了几种画布技巧，感谢你的链接，这绝对是一篇好文章，我相信你可以从哪里开始找到一些灵感，但它似乎并没有真正涵盖我的目标。嗯，首先，您需要找到一种方法，使用绘制直线的分步算法绘制基本图形-例如，在绘制直线时通过调整角度绘制圆。然后，调整程序以包括随机的上/下/左/右移动将更容易。您的问题不是如何绘制抖动的直线，而是如何手动绘制形状，而不使用圆、圆弧命令。在我看来，这应该是你的出发点。如果我重新措辞我的问题，问什么JS库允许本地漫画风格的绘画，你会重新回答这个问题吗？请注意，我不会要求“最佳实践”或“建议”，而只是要求存在任何JS库——如果有的话，应该很少。因为我的问题被阻止了，这是我接受的唯一答案。谢谢你写这篇文章，我同意这是一种可能的方式。然而，我认为，如果使用现有的绘图库，那么应该考虑从任何特定库中抽象出“comicification”：编写一个库，以通用格式获取节点，引入滑稽噪音并返回。是的，听起来很酷。如果我有更多的时间，我会编写一个函数，将路径的开始/结束段稍微扩展一点，以便使用您的术语看起来更简洁。如果您使用的是

SVG路径

，则该库很容易构建，因为它们已经包含节点，并且本质上是向量形状。然而，Canvas需要一个已经模仿向量形状基本原理（如节点）的库，如果我们讨论的是类似于上面提出的解决方案，则构建起来会更困难。因此，基本上我实现了我们一直在讨论的内容-请看我上面的链接：）