- html - 我的下拉菜单的内容关闭得太快
- c# - 使用 Html Agility Pack 从网页中的表中获取值而不使用 "SelectNode'
- html - 内容容器下的 CSS 下拉菜单
- html - 如何停止嵌套列表重叠父列表?
如何使用 Javascript 创建具有漫画风格/手抖动的 SVG/ Canvas 草图
我知道 xkcd风格 JS 绘图仪和 this文章。请注意,我不是要求绘图,而是要求任何类型的草图、线条、形状、文本等。
还有哪些使用 JS 的方法/技术?
编辑:在思考并阅读了一些时间之后,我决定实现自己的 JS 库,为 SVG 和 HTML5 Canvas 提供卡通风格的绘图。它被称为comic.js
可以找到here .
最佳答案
我会使用 Canvas 库来做到这一点,只是为了在操作形状时简单起见。
我要寻找的是 Paper.js和 Fabric.js 。不过,我将重点关注 Paper.js,因为它是我使用过的。
<小时/>所以你已经有了形状,现在做什么?
您可以flatten他们(将它们分割为段,添加更多其几何体的顶点)。可以增加分割间隔,这将导致每个顶点/节点的数量较多小路。分割间隔是参数maxDistance
展平
函数。
然后你可以沿着每个路径/形状的顶点行走并移动每个通过使用 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 上的每个“点”都是一个对象,并且大量的点/节点/顶点对于浏览器来说有点难以处理。因此,如果您的设计很复杂和/或您希望用户与您的绘图进行交互(交互可能会很缓慢),这可能会成为一个障碍。
或者,您可以使用普通的旧 Canvas 来执行此操作,无需任何库,但我不会这样做,因为我闻到需要算法来手动绘制形状,然后在这些算法中引入抖动。就计算时间而言,这会快得多,但实现起来会更困难,因为 Canvas 是一种低级的东西 - 它只记住绘制的像素,你需要滚动 -您自己的数据结构来记住形状、它们的位置等。
关于javascript - 使用 Javascript 创建具有漫画风格/手抖动的 SVG/ Canvas 草图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27321215/
我构建了一个没有修饰的 Java Swing 对话框。我已经通过 MouseListener 和 MouseMotionListener 接口(interface)使用拖放实现了对话框移动。 但是,在
我在 Linux 2.6 上使用 clock_gettime()(来自 time.h)来控制线程循环中的计时。我需要在 +/- 5mS 时间范围内有 500mS。它似乎给了我 500 毫秒,然后开始漂
有没有办法抖动 geom_line() 中的线条? ?我知道这有点违背了这个情节的目的,但是如果你有一个只有几行的情节并且希望他们都展示它可能会很方便。也许有一些其他解决方案可以解决这个可见性问题。
所以我有一些物体(我可以在运行时创建越来越多的物体),我需要它们被磁化到屏幕中心。让它在世界空间中为 (480/2/WORLD_SCALE, 320/2/WORLD_SCALE)。我是 box2d 的
我终于制作了一个可以按照我想要的方式运行的股票代码,但现在唯一的问题是它看起来有点不稳定,看起来像是在旧电视上显示的。如何让它看起来更平滑? 这是我的代码: import java.awt.Color
所以我的游戏几乎完成了...但是当我将手指按住屏幕时会出现这种小故障或抖动,现在我已经注意到了,我无法不注意到... 它发生得非常快,并且只有在调用一个函数来处理点击和按住(长按)时才会发生。这会在使
我接手了一个半成品的网站开发,这个网站上有一些使用jquery 1.3.2的 slider 。突然间,今天,我第一次看到 slider 在到达内容末尾时摇晃。这是带有问题 slider 的站点: ht
正如您从下面的屏幕截图中看到的那样,“标题栏”在带有文本的区域中出现了这些丑陋的 strip ,这些 strip 延伸了整个屏幕的宽度。它在真实设备上更加明显。 有什么办法可以解决这个问题吗? 最佳答
我创建了一个 UICollectionView 并希望所有单元格都像 iPhone 上跳板的编辑模式一样摇动。我已经创建了我的 shake 代码,但不知道如何实现它。我有自定义单元格,所以我假设它在那
我正在尝试将列表传递给有状态小部件的构造函数,但是在 main.dart 中添加小部件时,它不需要任何参数。 class Appointments extends StatefulWidget {
我最初在 gamedev 上问过这个问题,但没有一个答案有助于解决问题,我仍然不知道真正的原因是什么。我在常见问题解答中没有看到任何关于在 SE 中重新发布问题的内容,所以我只能希望这没问题。此外,回
我的数据看起来像这样: df1 <- structure( list( y = c(-0.19, 0.3,-0.05, 0.15,-0.05, 0.15), lb
我目前的工作需要在 Intel Core 系列的 CPU 上生成指定数量的 TLB 未命中,但进展并不顺利。我尝试了很多方法,但所有方法的 TLB 命中率都非常高。有谁知道一些关于 x86 TLB 如
我知道有一种方法可以将图像转换为 Icon通过 ImageIcon .但我正在使用 FancyBottomNavigation这是必需的 TabData具有参数 iconData类型 IconData
我想像在js中的示例一样实现视频到 Canvas 应用程序:http://jsfiddle.net/Ls9kfwot/2/ 但是我的问题是如何在特定区域拍摄视频播放器的屏幕截图? 就像drawImag
如果 onTap: changeName, void changeName() { setState(() { name = "Your own codes"; }
我正在尝试为从api中获取的list实现延迟加载。我为ListView实现了一个侦听器,以检查它何时到达底部。我在这里的问题是: 1)如何为列表设置初始加载项数? 2)如何在调用loadMore()方
我正在使用流从REST API检索数据,但是当数据库中的数据更新时,流不会刷新应用程序中的数据。 StreamController _productsController = new StreamCo
我还没有看到这个问题在 SO 中被提及,所以就这样吧。我有一个搜索栏,可以防止搜索超出次要进度(在本例中为音乐缓冲)。假设这首歌长 5 分钟,已缓冲 4 分钟,并且正在一分钟标记处播放。当我去拖动
我的应用程序基于 GPS 数据,为此我使用了 Fused-location-provider。从现在开始,我看到有一个 gps 抖动,一些 GPS 坐标偏离了道路。这是无法接受的。我试图做的是实现 K
我是一名优秀的程序员,十分优秀!