Everyone loves the epic comic xkcd. These comics aren't usually masterclasses of artwork but expressions of whit, usually of a tech-related subject. I've always thought I could eventually create witty comics but never had the illustration skills to bring them to fruition. Luckily an incredible tool called cmx.js has come along. Comix I/O allows developers to create xkcd-style comics using a reasonable SVG API.
每个人都喜欢史诗般的喜剧xkcd 。 这些漫画通常不是艺术品的大师班，而通常是与技术相关的主题的表达。 我一直以为我最终可以创造出机智的漫画，但从未具备过将它们变成现实的插图技巧。 幸运的是，出现了一个令人难以置信的工具cmx.js。 Comix I / O允许开发人员使用合理的SVG API创建xkcd风格的漫画。
获得Comix (Getting Comix)
You can download or clone Comix from the GitHub project page. The project uses npm and bower to install dependencies, and a simple grunt command to launch Comix for hacking:
您可以从GitHub项目页面下载或克隆Comix。 该项目使用npm和bower来安装依赖项，并使用一个简单的grunt命令来启动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)
A few moments and you're up and running!
片刻，您就可以开始跑步了！
黑客混音 (Hacking Comix)
Comics are created in one of two ways: direct source code manipulation within your text editor or by using Comix's awesome in-browser comic editor (powered by ACE). There are about a half-dozen tags in play:
漫画是通过以下两种方式之一创建的：在文本编辑器中直接操作源代码，或者使用Comix的出色浏览器内漫画编辑器(由ACE驱动)。 播放中大约有六个标签：
scene- The outer box / container framescene-外箱/容器框架label- Box containing text that overlaps the frame border (usually at the top left)label-包含与框架边框重叠的文本的框(通常在左上方)tspan- Text containers withxandyattributes for text label stackingtspan具有x和y属性的文本容器，用于文本标签堆叠drawing- A method to create basic drawings (custom shapes) within the a scene (just as you would in SVG)drawing-一种在场景内创建基本绘图(自定义形状)的方法(就像在SVG中一样)actor- A representation of a stick figure in the scene, customized by theposeattributeactor-场景中简笔画的表示，由pose属性自定义bubble- A container for textbubble-文本容器
Each element has its own meaningful attributes -- consult the documentation for further explanation as this API is sure to evolve.
每个元素都有其自己有意义的属性-随着此API的发展，请查阅文档以获取进一步的说明。
创作漫画 (Creating a Comic)
With Comix launched via grunt, it's time to edit the example comic or create one from scratch. The Comix editor provides an ACE editor to do in-browser code editing; you can also use your mouse to reposition and rotate actors within the scene. Here's the code for a comic I created:
随着Comix通过grunt启动，现在是时候编辑示例漫画或从头开始创建漫画了。 Comix编辑器提供了一个ACE编辑器来进行浏览器内代码编辑； 您还可以使用鼠标在场景中重新定位和旋转角色。 这是我创建的漫画的代码：
<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)">
<line stroke="green">
<point x="0" y="0"></point>
<point x="250" y="20"></point>
</line>
</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 client</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)">
<line stroke="green">
<point x="0" y="0"></point>
<point x="250" y="20"></point>
</line>
</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)">
<line stroke="green">
<point x="0" y="0"></point>
<point x="250" y="20"></point>
</line>
</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 client</tspan>
<tspan x="0" y="8em">last night</tspan>
</bubble>
</actor>
</scene>
The code above translates to the following visual gem:
上面的代码转换为以下可视化的gem：
The Comix project has awesome written all over it. Creating a comic from scratch will be a task in the short term so experiment with editing the existing comic and see what cleverness results. Be sure to post any comics you create within the comment section below as we all need our true genius to be seen!
Comix项目上写的真棒。 从头开始创建漫画将是短期任务，因此请尝试编辑现有漫画并查看产生的巧妙之处。 请务必在下面的评论部分中发布您创建的所有漫画，因为我们所有人都需要真正的天才才能被看到！
扫一扫
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
