Comicgen:
哈喽，大家好，我是指北君。
大家是不是和指北君一样，对漫画家有着崇高的敬意，可自己提笔却总是“四不像”的惨状？那我们的漫画梦是否就此结束了？
答案当然是：达咩！
引用 Comicgen创始缘由来作为简介：“我们喜欢漫画。我们非常想创作连环画。但是有一个问题。我们中的一些人无法为坚果画一条直线。但是为什么这会阻止我们创作漫画呢？所以这是给我们自己和世界的礼物——漫画创作者。我们创建了 Comicgen 来帮助人们使用漫画写出更好的故事。”
也就是说，不管是谁，不管画技如何，都可以在这里实现一个漫画梦！下面就介绍一下 Comicgen这款开源项目。 Comicgen是一款可以画出不同形态不同任务的漫画项目。使用方式有多种（如下的用法），但本文主要介绍的是在HTML中的使用。
用法：
使用 Comicgen 的简单方法来自gramener.com/comicgen/
● 选择您的角色
● 保存图像
● 将其插入您最喜欢的编辑器 ------ Illustrator、PowerPoint、Photoshop 等（插件）。
具体的使用方式如下图：
1.进入官网，可以直接挑选你喜欢的角色，然后修改他的姿势、表情、是否使用镜像、以及所要导出图片的格式。
2.可以直接保存图片，或者复制代码，也可以修改背景颜色，移动并调整人物在图片中的位置。在新版本中，还可以调整人物衣物的颜色。
image
JavaScript API
要在选择器上显式运行 Comicgen，请运行comicgen(selector). 这使您可以动态创建或更改字符。
这是 jQuery 中的一个示例，展示了如何动态创建字符：
// Add the character
$('<g class="comicgen" name="priyanuova" angle="straight" emotion="blush" pose="handsheldback" x="40" y="-46" width="500" height="600"></g>').appendTo('body')
// Call comicgen()
comicgen('.new')
image
如果只想显示漫画人物的脸，可以通过跳过pose属性来实现。例如：
// Add only face of character
$('<g class="comicgen" name="priyanuova" angle="straight" emotion="blush" x="40" y="-46" width="500" height="600"></g>').appendTo('body')
// Call comicgen()
comicgen('.only-face')
image
安装：
通过在 HTML 页面中添加这一行来加载 Comicgen 库<head>：
<link rel="stylesheet" href="https://gramener.com/comicgen/dist/comicgen.min.css">
<script async src="https://gramener.com/comicgen/dist/comicgen.min.js"></script>
其中，可以使用unpkg.com/comicgen@0/代替 gramener.com 。
您还可以使用npm或在本地安装 Comicgen yarn：
yarn add comicgen@0 # Installs Comicgen v0
npm install comicgen@0 # Alternative, if you prefer npm over yarn
然后在 HTML 页面中添加：
<link rel="stylesheet" href="node_modules/comicgen/dist/comicgen.min.css">
<script async src="node_modules/comicgen/dist/comicgen.min.js"></script>
Comicgen 适用于谷歌、Edge 和 火狐浏览器。它不适用于 IE浏览器。
嵌入：
要嵌入字符，请添加：
<g class="comicgen" name="ava" emotion="blush" ext="png" pose="handsheldback" x="40" y="17" width="500" height="600"></g>
这会在您的 HTML 中插入以下图像。您可以将其嵌入到任何地方，包括<svg>元素内部。
image
字幕：
Comicgen.css 还提供字幕功能，可将字幕放在图片的上面或下面。具体通过在.comic-panel内部元素添加comic-caption-top和 comic-caption-bottom来实现。.
例如，这定义了一个顶部标题：
<div class="comic-panel">
<div class="comic-caption-top">你好啊，我是小北哦。</div>
<g class="comicgen" name="bean" angle="side" emotion="blush" ext="png" pose="handsfolded" x="20" y="10" width="200" height="200"></g>
</div>
image
除了单个图片外，还可以进一步细化形成一个故事集等，以下贴一个来自网友制作的小事例：
image
诸如此类故事集，只要你想，千言万语都可以是一幅幅漫画，这也是它独特之处。
指北君有话说
经过以上的Comicgen介绍，大家都认可它逢人皆可画的强大功能了吧!
简单来说即：Comicgen是目前市场上最符合中国人审美的一款开源且免费的漫画自动形成工具。它既能直接在网页加载一个专属漫画头像、漫画图；也能通过安装插件的形式在Illustrator、PowerPoint、Photoshop中直接明了地丰富你的漫画设计；还能通过代码，码出一本本专属于自己的漫画集。咱就是说，如果有一天，你能拿着专属你们昔日浪漫的漫画集和女朋友在浪漫小屋一起回忆过往的点点滴滴；你的孩子读着你亲手制作的营养漫画书。它这不香吗！
所以啊，不管你是单纯的想设计一个漫画人物图、头像的创意青年；想把自制的漫画图放进网页的码农；想自己谱写一副生动形象的连环画的的普罗大众；亦或是要设计新角色的设计师，都能在这个平台找到专属自己的舞台。
看了这么久，相信你也按耐不住要行动起来了吧。那快随指北君一起先去给自己设计个卡哇伊的头像呀！
好啦，以上就是本次推荐的全部内容啦，这里是指北君，感谢各位的观看，如果你觉得内容还不错，欢迎点赞、收藏和评论。
关注“开源指北”公众号，我们立志做最好的开源项目分享平台，这里不仅仅有各种有趣且实用的开源项目，还会定期分享关于Java，并发编程，性能优化，中间件服务，架构设计等相关后端知识与面试，就业，找工作，简历模板等就业大计，拥有我就相当于拥有整个互联网宝库，快来聊一聊吧！
这里是“开源指北” 我们做开源 不只是开源。
关注公众号[开源指北]回复[漫画] 即可获取Comicgen的相关资料。
网友评论