打赏
项目地址：https://github.com/gramener/comicgen
它利用头＼手＼身体等各部位的组合，形成动画人物．可以搞些简单的漫画．实际上还发现国外有些线上生成漫画的．
如时能加上一些简单过场(转场)动画，对话框，延时功能等，就更像那么回事了．
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>漫画</title>
<link rel="stylesheet" href="src/comicgen.min.css">
<script src="src/comicgen.min.js"></script>
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
https://github.com/gramener/comicgen
<br/>
１．通过组合,形成一个人物. 在线设置：https://gramener.com/comicgen/ <br/>
<g class="comicgen" name="dee" angle="straight" emotion="smile" pose="thumbsup"></g>
<br/><br/>
２．部份可以指定图层,一个右后在前，一个右手在后<br/>
<g class="comicgen" name="dee" angle="straight" emotion="yuhoo" pose="yuhoo"></g>
<g class="comicgen" name="dee" angle="straight" pose="yuhoo" emotion="yuhoo"></g>
<br/><br/>
３．人物组合</br/>
<svg width="500" height="600">
<g class="comicgen" name="dee" angle="straight" emotion="smilehappy" pose="pointingright" x="-120"></g>
<g class="comicgen" name="dey" angle="straight" emotion="smile" pose="handsinpocket" x="150"></g>
</svg>
<br/><br/>
４．视角：缩小</br/>
<svg width="300" height="200" viewBox="0 0 500 600">
<g class="comicgen" name="dee" angle="straight" emotion="smilehappy" pose="pointingright" x="-120"></g>
<g class="comicgen" name="dey" angle="straight" emotion="smile" pose="handsinpocket" x="150"></g>
</svg>
<br/><br/>
４．视角：关注某部份</br/>
<svg width="300" height="200" viewBox="0 0 500 600" preserveAspectRatio="xMidYMin slice">
<g class="comicgen" name="dee" angle="straight" emotion="smilehappy" pose="pointingright" x="-120"></g>
<g class="comicgen" name="dey" angle="straight" emotion="smile" pose="handsinpocket" x="150"></g>
</svg>
<br/><br/>
５．１个面板<br/>
<div class="comic-panel">
<g class="comicgen" name="dee" angle="straight" emotion="smilehappy" pose="handsfolded"
x="-320" y="-120" scale="2.2" width="200" height="200"></g>
</div>
<br/><br/>
６．两个横向面板<br/>
<div class="comic-row">
<div class="comic-panel" style="margin-right: 10px">
<g class="comicgen" name="dee" angle="straight" emotion="smilehappy" pose="handsfolded"
x="-320" y="-120" scale="2.2" width="200" height="200"></g>
</div>
<div class="comic-panel">
<svg width="200" height="200">
<g class="comicgen" name="dey" angle="straight" emotion="smile" pose="handsinpocket"
x="-200" y="-120" scale="2.2" width="200" height="200"></g>
<g class="comicgen" name="dee" angle="straight" emotion="smilehappy" pose="handsfolded"
x="-250" y="-120" scale="1.4" width="200" height="200"></g>
</svg>
</div>
</div>
<br/><br/>
７．可以通过修改css来修改面板的样子
<pre>
:root {
--comic-background: #eee; /* Light grey background. Default: transparent */
--comic-border-color: #ccc; /* Light grey border. Default: grey */
--comic-border-width: 1px; /* Thin border. Default 2px */
}
</pre>
<br/><br/>
８．标题/文字<br/>
<div class="comic-panel">
<div class="comic-caption-top">Hi,我是迪伊</div>
<g class="comicgen" name="dee" angle="straight" emotion="smilehappy" pose="handsfolded" x="-317" y="-119" scale="2.2" width="150" height="200"></g>
</div>
<div class="comic-panel">
<div class="comic-caption-bottom">Hi,我是迪伊</div>
<g class="comicgen" name="dee" angle="straight" emotion="smilehappy" pose="handsfolded" x="-317" y="-119" scale="2.2" width="150" height="200"></g>
</div>
<br/><br/>
９．可以通过修改css来改变效果<br/>
<pre>
:root {
--comic-caption-background: #eee; /* Light grey background. Default: white */
--comic-caption-font: Neucha, cursive; /* Custom Google font. Default: cursive */
--comic-caption-padding: 0.25rem 0.5rem; /* Custom margin. Default: 0.25rem */
}
.comic-caption-top, .comic-caption-bottom { /* Apply any custom styles you want */
text-transform: uppercase;
}
</pre>
<br/><br/>
10．一个漫画<br/>
<div class="comic-row">
<div class="comic-panel">
<div class="comic-caption-top">我是迪伊</div>
<g class="comicgen" name="dee" angle="straight" emotion="smilehappy" pose="handsfolded" x="-317" y="-119" scale="2.2" width="150" height="200"></g>
</div>
<div class="comic-panel">
<div class="comic-caption-top">我在一个叫＂迪伊和戴伊＂的漫画里.</div>
<g class="comicgen" name="dee" angle="straight" emotion="smilehappy" pose="handsfolded" x="-150" y="10" scale="1.5" width="150" height="200" mirror="1"></g>
</div>
<div class="comic-panel">
<div class="comic-caption-top">这是戴伊，我漫画里的搭档．</div>
<svg width="300" height="200">
<g class="comicgen" name="dee" angle="straight" emotion="smilehappy" pose="pointingright" x="160" y="0" scale="0.88" width="300" height="200" mirror="1"></g>
<g class="comicgen" name="dey" angle="straight" emotion="smile" pose="handsinpocket" x="-120" y="10" scale="0.88" width="300" height="200"></g>
</svg>
</div>
</div>
<br/><br/>
11．在脚本中使用<br/>
<div id="comicgen1"></div>
<script>
$('<g class="new" name="aryan" angle="straight" emotion="sad" pose="handsinpocket"></g>').appendTo('#comicgen1') ;
comicgen('.new');
</script>
12．脚本中使用,参数方式<br/>
<div id="comicgen2"></div>
<script>
$('<g class="new" name="dee" angle="straight"></g>').appendTo('#comicgen2')
comicgen('.new', {
name: 'dey', // Set the default name. <g name="dee"> overrides this
emotion: 'sad', // Set the default emotion
pose: 'yuhoo', // Set the default pose, etc
width: 400,
height: 300
})
</script>
</body>
</html>