简单的漫画创作项目comicgen
生活随笔
收集整理的這篇文章主要介紹了
简单的漫画创作项目comicgen
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
項目地址：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 thisemotion: 'sad', // Set the default emotionpose: 'yuhoo', // Set the default pose, etcwidth: 400,height: 300}) </script></body> </html>?
總結
以上是生活随笔為你收集整理的简单的漫画创作项目comicgen的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机网申兴趣爱好怎么写,网申个人爱好如
- 下一篇： 哪有岁月静好，不过有人在为你负重前行