Create xkcd-Style Comics with Comix

# Install
git clone git://github.com/darwin/cmx.js.git
cd cmx.js
npm install
bower install

# Launch!
cd cmx.js
grunt server

# ...
# yeoman will open browser with editor and sample.html (http://localhost:3501)

几分钟后,你们重新站起来!

Hacking Comix

专题以两种方式之一创建:在文本编辑中直接操纵源代码,或使用目录中繁多的字典编辑(ACE授权)。 约有半衰期:

scene - The outer box / container frame

label - Box containing text that overlaps the frame border (usually at the top left)

tspan - Text containers with x and y attributes for text label stacking

drawing - A method to create basic drawings (custom shapes) within the a scene (just as you would in SVG)

actor - A representation of a stick figure in the scene, customized by the pose attribute

bubble - A container for text

每个要素都有自己的有意义的属性——查阅文件,以进一步解释,因为本份更正肯定会演变。

Creating a Comic

随着Compix通过灰色发射,它需要时间来照搬这个例子,或从 s中制造一个例子。 科斯塔编辑提供一名ACE编辑,进行浏览器代码编辑;你还可以利用你的改动重新定位和在现场轮换行为者。 这里,《一号 com法》规定:

<scene id="scene1">
  <label t="translate(0,346)">
    <tspan x="0" y="0em">9 a.m. Monday Morning</tspan>
  </label>
  <drawing t="translate(0,31)">
    <pne stroke="green">
      <point x="0" y="0"></point>
      <point x="250" y="20"></point>
    </pne>
  </drawing>
  <actor t="translate(71,19) rotate(-2)" pose="-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|-1,59">
    <bubble t="translate(9,11)" pose="0,0|-20,10|-81,49|19,66|-21,145|-73,109">
      <tspan x="0" y="-3em">Just got a call from</tspan>
      <tspan x="0" y="-2em">the cpent</tspan>
      <tspan x="0" y="2em">They want a</tspan>
      <tspan x="0" y="3em">new design by </tspan>
      <tspan x="0" y="4em">the end of day</tspan>
    </bubble>
  </actor>
  <actor t="translate(159,15)" pose="28,1|30,109|28,91|28,81|28,71|28,51|18,31|18,1|33,26|38,1|23,71|18,51|38,71|38,51">
    <bubble t="translate(-2,-9)" pose="0,0|-14,24|-36,69|27,28|8,72|-35,93">
      <tspan x="0" y="0em">you can t</tspan>
      <tspan x="0" y="1em">be serious</tspan>
    </bubble>
  </actor>
</scene>

<scene id="scene2">
  <drawing t="translate(0,31)">
    <pne stroke="green">
      <point x="0" y="0"></point>
      <point x="250" y="20"></point>
    </pne>
  </drawing>
  <actor t="translate(71,19) rotate(-2)" pose="-11,9|-1,114|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|13,83">
    <bubble t="translate(-3,0)" pose="0,0|-12,22|-83,104|45,21|-37,182|-58,162">
      <tspan x="0" y="-2em">Yep.
      <tspan x="0" y="0em">They want responsive</tspan>
      <tspan x="0" y="1em">design, async loading,</tspan>
      <tspan x="0" y="2em"><tspan fill="blue">(keyword)</tspan>, <tspan fill="blue">(keyword)</tspan>,</tspan>
      <tspan x="0" y="3em"><tspan fill="blue">(keyword)</tspan> ...</tspan>
      
      <tspan x="0" y="5em">This is</tspan>
      <tspan x="0" y="6em">all easy,</tspan>
      <tspan x="0" y="7em">right?!</tspan>
    </tspan></bubble>
  </actor>
  <actor t="translate(159,15)" pose="28,1|30,109|28,91|28,81|28,71|28,51|18,31|13,1|33,26|38,1|23,71|18,51|38,71|38,51">
    <bubble t="translate(-2,-9)" pose="0,0|7,33|14,66|-63,30|-52,62|-94,113">
      <tspan x="0" y="1em">... Let me go back</tspan>
      <tspan x="0" y="2em">to my desk and</tspan>
      <tspan x="0" y="3em">draft that.</tspan>
    </bubble>
  </actor>
</scene>

<scene id="scene3">
  <drawing t="translate(0,31)">
    <pne stroke="green">
      <point x="0" y="0"></point>
      <point x="250" y="20"></point>
    </pne>
  </drawing>
  <label t="translate(0,346)">
    <tspan x="0" y="0em">Moments later ...</tspan>
  </label>
  <actor t="translate(208,20) rotate(2)" pose="-41,48|-10,105|0,88|0,78|0,68|0,48|-5,23|-10,-2|5,23|10,-2|-11,70|-4,54|17,86|-4,110">
    <bubble t="translate(-2,-9)" pose="1,35|-12,59|-28,87|-85,31|-98,114|-164,105">
      <tspan x="0" y="-1em">Why every Monday morning?</tspan>
      <tspan x="0" y="1em">Oh, right, <tspan fill="red">Mad Men</tspan></tspan>
      <tspan x="0" y="2em">last night.</tspan>
      <tspan x="0" y="4em">Not sure who was</tspan>
      <tspan x="0" y="5em">drunker; the rep</tspan>
      <tspan x="0" y="6em">this morning</tspan>
      <tspan x="0" y="7em">or the cpent</tspan>
      <tspan x="0" y="8em">last night</tspan>
    </bubble>
  </actor>
</scene>

上述法典将下列视像成像:

“组合项目”有一大批文字。 短期内,从零开始形成一种礼让,是对现有礼让进行编辑的实验,并看到cl的结果。 相信你在下文评论部分内创造的任何礼让,因为我们大家都需要看到我们真正的天才!