简单的漫画创作项目comicgen

简单的漫画创作项目comicgen项目地址:https://github.com/gramener/comicgen它利用头\手\身体等各部位的组合,形成动画人物.可以搞些简单的漫画.实际上还发现国外有些线上生成漫画的.如时能加上一些简单过场(转场)动画,对话框,延时功能等,就更像那么回事了.<!DOCTYPEhtml><html> <head> <metac…

项目地址:https://github.com/gramener/comicgen

它利用头\手\身体等各部位的组合,形成动画人物.可以搞些简单的漫画.实际上还发现国外有些线上生成漫画的.

如时能加上一些简单过场(转场)动画,对话框,延时功能等,就更像那么回事了.

简单的漫画创作项目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/>

1.通过组合,形成一个人物.  在线设置:https://gramener.com/comicgen/  <br/>
<g class="comicgen" name="dee" angle="straight" emotion="smile" pose="thumbsup"></g>

<br/><br/>

2.部份可以指定图层,一个右后在前,一个右手在后<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/>
    
3.人物组合</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/>

4.视角:缩小</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/>

4.视角:关注某部份</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/>

5.1个面板<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/>

6.两个横向面板<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/>

7.可以通过修改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/>

8.标题/文字<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/>

9.可以通过修改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>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/35785.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注