这个页面的代码没跑起来。

直接从文件夹里打开 index.html,浏览器会拦下 JavaScript 模块,于是你选好谁上这张图之后,页面不会有任何反应。改用 http 把这个文件夹提供出去:

powershell -ExecutionPolicy Bypass -File serve.ps1

然后打开 http://localhost:8080/。

身高对比 — 一张能下载的并排图

把身高打进去,把图带走。为了画它,不会往外送任何东西。

语言: 简体中文
查看源码
你的名字、身高,以及它们凑成的那张图在浏览器里处理,无须上传处理。

一张身高图就是算术加一幅画:没有文件要送出去,也没有服务要去问——而这个页面唯一会收的文件,也就是你放到标尺上的那张图片,同样是在这里读的,哪儿都不去。男性、女性、男孩和女孩是随这个页面一起发出去的公有领域画作,而男孩和女孩画的是真孩子,不是缩小的大人——正是这一点,让一张全家的图不至于以一种谁也说不上来的方式显得不对。这里面的每一步,都发生在这个页面里那几百行你能读的 JavaScript 中。这里压根就没有任何网络功能,而这一点在这里格外要紧,因为你打进去的是一份人的名单,以及每个人有多高。

实时检查: 检查中…

离线: 检查中…

不用信我们说的。打开开发者工具,盯着“网络”面板,打一个名字和一个身高。没有哪个请求带走它们中的一个字符。嫌麻烦就直接拔掉网线,照样把图做出来。

1 说清楚你在比谁

一个名字、一个身高,还有画成哪种图形。每一行一开始就带着一个身高,你可以直接盖着改。身高按你平时的写法写就行——173、1.73 m、5'8"、68 in 都读得懂——每个框下面那行会显示它读成了什么;框是空的,或者身高读不出来,它就用红字说出来。不会有什么被悄悄猜掉。

这里的从上到下,就是图上的从左到右。要挪动一行,抓住它左边的把手拖,或者用箭头,那在键盘上做的是同一件事。不管哪种,只要图表原本在按身高排序,它都会回到你自己的顺序。

SVG 能把任何一张图放到标尺上——一个标志、一张平面图、一个机器零件都行。文件在这个页面里读,哪儿都不去。留下的只有里面的形状:它以一种实色进来,颜色由你逐行来挑;而任何够得着网络的东西——外链图片、样式表、字体、脚本——都会被留在原地,不会跟着进到一张你可能发给别人的图里。用细线画的、不是实心形状的图,出来会是一团实心的墨块,这也是这个工具唯一不合适的场合。

照片或 PNG 则原样放上去,保留它自己的颜色,所以那一行的颜色只用来写名字。它同样在这个页面里读,放上去之前会重画一遍——这既限制了它给图表添的分量,也把文件里的附带信息留在了外面。透明的地方仍然透明,所以抠好的图能干净地站在标尺上;照片则连背景一起来,最好先裁掉。

这里大多数是画出来的,不是一个素方块——带把手的门、上面带冷冻室的冰箱、一看就是沙发的沙发。画会按这一行的两个数字来套,所以决定形状的还是数字:把你自己的盖上去,图就跟着变。有三个没有画,因为没找到既能自由使用、比例又对的:篮球架、海运集装箱和厨房台面,还是以前每件物件都用的那个矩形。

里头有几个是真的固定:20 英尺的海运集装箱按定义就是 259 cm 高,篮球框在 305,美国的室内门是 203 乘 81。其余是常见尺寸而不是标准——门、窗和台面各国不同、各家也不同。每一个进来都是一行普通的行,量一下你自己的,把真数字盖上去。

物体宽度留空时使用自动宽度。如果无法识别输入的宽度,修正之前不会在图表中绘制该行。

2 拿走

要粘进文档或者聊天窗口的是 PNG。要留着的是 SVG:它把图表存成指令而不是像素,所以放到多大都印得清楚,以后任何能打开矢量的东西都能给它换颜色。

画出标尺 横穿图表的那些线,还有两边的数字。没有它们,这张图仍然能正确地比出两个人谁高,但它不再说谁有多高。

在每个图形上方写名字和身高 关掉之后,图表就是标尺上的一排剪影——如果名字反正要写在你粘贴过去的那个东西里,你要的就是这样。

完全不要背景 透明,方便放到本来就有颜色的幻灯片上。标尺和文字会按上面选的颜色画成深色或浅色,所以就算背景本身关掉了,也把那个颜色设成图差不多要落在的颜色。

那是绘图区的高度,所以成品会稍微高一点:名字在它上面。宽度由有几个图形、每个的标签有多宽决定。图下面那行会说最后是多少。

它长什么样

以 Markdown 查看

怎么做一张身高对比图

  1. 先把人都加进去,好不好看以后再说。一行就是一个人形、一个名字、一个身高和一种颜色。名字可以不填——两个没名字的剪影,上面标着身高,常常正是有人想要的那种图——如果顺序要紧,每行的箭头能把它往左往右挪。
  2. 身高按你平时的写法打。173、1.73 m、5'8"、68 in 和 5 ft 8 都能正确读出来。框下面那行会用两套单位显示它读成了什么,所以读错是在画出来之前就看得见,而不是印出来之后。一个光秃秃的数字,在公制图上是厘米,在英制图上是英寸;小于三的光秃秃的数字是米——没有人身高 1.73 厘米。
  3. 挑跟这个人对得上的人形。孩子大约六个头高,大人是七个半,所以把孩子画成缩小的大人,会以一种说不上来但一眼看得出的方式显得不对。男孩和女孩画的是真孩子,不是缩小的大人,一张全家的图看着像一家人,多半就靠这个。而且每一行进来就带着一个身高,所以加一个人就画出一个人——直接盖着改就行。
  4. 在图上放一件眼熟的东西。数字是抽象的,一道门不是。加一件大家都知道多大的东西——一扇门、一扇窗、教室里的白板、一台自动售货机——就是把一张只说出两个身高的图,变成一张让人看见这两个身高的图。菜单里有二十件,分了组,每一件进来都是普通的一行,你可以把自己的数字盖上去。物件除了高度还有宽度,所以一扇门是 203 乘 81,不是一根条。
  5. 或者把你自己的图放上去。自己的图片会从你的机器上取一个文件,按你给的高度把它放到标尺上——图讲的不是人,而是一件产品、一辆车或者一栋建筑时,就用它。SVG 会像其他任何图形一样,用那一行自己的颜色画出来;照片或 PNG 则原样放上去。两种都保留自己的比例,两种都是在这里读的,不往任何地方送。
  6. 把标尺调成你读者习惯的单位。在厘米和英尺之间切换,是把框里的内容重写一遍,而不是重新解释一遍,所以图本身不动,动的只是记法。要是这张图给两拨人看,每个人形上方写的身高用图表的单位,而每个框下面那行两套都有。
  7. 要粘就用 PNG,要印就用 SVG。PNG 是一张按你设定的像素高度出的图,聊天窗口、文档或者幻灯片要的就是它。SVG 是把图表存成指令,所以放到多大都印得清楚,之后任何能打开矢量的东西都还能给它换颜色。

说得更细的版本

怎么做一张身高对比图 把一串身高变成一张并排的图:身高怎么写,给小孩挑哪个图形,为什么一件眼熟的东西比第三个人更管用,以及怎么把图导出成 PNG 或 SVG。

常见问题

我打进去的东西会被送到什么地方吗?

不会。图是这个页面里的 JavaScript 在你自己的设备上画的,而这个工具压根就没有任何网络功能——从不取任何东西,也从不发任何东西。页面的 Content-Security-Policy 里写着它允许联系的每一个地址,没有一个属于本站。这话在这里值得挑明,因为输入的是一份人名和各自身高的清单,比本站处理的绝大多数东西都更私人。

图能下载吗?

能,PNG 或者 SVG 都行,没有水印,也不用账号。PNG 按你设定的像素高度画出来,是往文档、幻灯片或聊天里粘的那一个。SVG 是把图表存成指令而不是像素:放到多大都印得清楚,以后还能在任何矢量编辑器里打开重新上色。两个都是从屏幕上那份同样的标记做出来的,所以哪个都不会跟预览对不上。

身高该怎么写——厘米还是英尺?

都行,哪一行都行,你平时怎么写就怎么写。173、173 cm、1.73 m、5'8"、5 ft 8 in 和 68 in 全都读得懂,框下面那行会用两套单位显示它读成了什么。一个光秃秃的数字,图是公制时算厘米,是英制时算英寸;小于三的光秃秃的数字按米算,因为 1.73 厘米不是谁会打进去的身高。

孩子为什么看着不像缩小的大人?

因为孩子本来就不是。身体比例随年龄变:两岁孩子大概四个半头高,八岁六个,大人七个半——所以头差不多占小孩子的四分之一,占大人的八分之一。这里的男孩和女孩画的是真孩子,不是把一个剪影缩小。一张全家的图看着像一家人而不像四个不同尺寸的大人,原因就在这儿。

这些人形是哪儿来的?

四个都是别人的画,全都在公有领域:男性出自 pitr,女性出自 Madeleine Price Ball,女孩出自 OpenClipart-Vectors,男孩出自 Ryan Kissinger 为 NIH BioArt 图库所作。每个文件都按发布时的样子放在 vendor/ 里随页面一起发出去,所以你可以拿去跟原件对。公有领域什么都不要,而这正是关键:画最后会进到你下载的那张图里,一份要求署名的许可,就会把那份要求粘到你的图上。

能把我自己的图片放到图上吗?

能——自己的图片接受一张画或者一张照片,按你打的高度把它放到标尺上:标志、平面图、机器零件、汽车都行,那件东西本身的照片也行。比例是它自己的,所以没有宽度要填。

SVG 是用一种实色画的,就是那一行设定的颜色,因为图的其余部分也是这样——所以用细轮廓线画的、不是实心形状的图,出来会是一团墨块,这种图用这个工具就不合适。只有形状会留下来:文件会用路径、矩形和圆从头重搭一遍,任何够得着网络的东西——外链图片、样式表、字体、脚本——都被留下。

照片或 PNG 则原样放上去,保留它自己的颜色,所以那一行的颜色只用来写名字。它放上去之前会在这里重画一遍,这既限制了它给图表添的分量,也把文件里的元数据留在了外面。透明的地方仍然透明,所以抠好的图能干净地站在标尺上——照片则连背景一起来,最好先裁掉。

两个文件哪儿都不去。这一点要紧两回,因为你下载的图是一个你可能发给别人的文件。

为什么没有幼儿或者婴儿?

我们没有找到符合本工具公有领域许可和绘图要求的婴幼儿素材。内置儿童图形是一个男孩和一个女孩,并非儿童素材的完整目录。比较更年幼的孩子时,可将图形设为实测身高,或添加合适的自有图片;标尺承载的是测量值。

一张图能放多少人?

十二个。这不是技术上的限制——画三十个它也乐意——但过了一打,列就比上面写的名字还窄,图也就读不成了。要是需要更多,把名字关掉能把宽度还给你,或者两张图会比一张说得更清楚。

能在图上放一件物件吗?

能——而且大多数进来时就带着画。菜单里有二十件可以起步,分成四组:门和窗,学校和办公室(白板、办公桌、文件柜、投影幕),街上的东西(自动售货机、带轮垃圾桶、篮球架、20 英尺的海运集装箱),还有家里的东西。其中十七件带着一幅画——有把手的门、冷冻室在上头的冰箱、一看就是沙发的沙发——画会按那一行的高度和宽度套进去,所以尺寸仍然由数字说了算,你盖着改的数字也照样算数。剩下三件是普通矩形,因为没找到一幅既画对了、比例又对的免费画,而在一张讲尺度的图上,画错了还不如老老实实一个方块。

其中一些真的是标准,一些只是常见尺寸,页面把这话说在明处。一件眼熟的东西,对一张图的作用比再多几个人都大:它把一次比较,变成对尺度的感觉。

有狗或者猫的人形吗?

没有,而且这是故意留的空缺,不是疏漏。两个都做过——侧面、站着、头与肩同高,好让画的顶端就是旁边写的那个高度,因为所有品种标准都是那么量动物的。做出来的效果不够好,就没发:一只从侧面看的四足动物,站在四个正面看的人旁边,哪怕画得好,读起来也像出了错。在那之前,用一个到动物肩高的矩形是诚实的。

能用链接把图分享出去吗?

从这里不能,而且是故意的。提供这功能的工具,做法是把整份名单塞进地址,这就意味着每个名字和每个身高,都会落进这条链接经过的一切里——聊天服务器的日志、邮件扫描器、某人的浏览记录、一个去抓链接预览的服务。把图下载下来发那个:它说的是同一件事,却不带着名单走。

免费吗?做出来的图能商用吗?

免费,没有账号也没有水印,做出来的东西你可以放进报告、演示、广告或者产品里。本站有广告,站点靠它维持。你在这里做的图,没有一处是我们的,也什么都不留存。

标尺为什么是十格一跳,不是一格一跳?

因为间距是按这张图能承得住多少条线来定的,而不是按一个固定数字。两个大人的图,每十厘米一条线;放上一个篮球架,线就挪到二十五,因为一张图上九十条线是一片灰,不是标尺。用英尺英寸时,梯级是一、三、六、十二英寸,好让线落在整英寸上,而不是落在旁边。

能把图放到深色幻灯片上吗?

能。把背景设成它将要落在的那个颜色,标尺和文字就会在深浅之间切换来配合它——这是从那个颜色的亮度算出来的,不是猜的。然后如果你想让图本身透明,就勾上“完全不要背景”:决定墨色的还是你选的那个颜色,所以一张要去深蓝幻灯片的透明图,落上去照样读得清。

断网还能用吗?

能。页面加载一次之后拔掉网线,它照样工作。这也是证明没有上传的最简单办法:一个把你的名单送出去让别人画图的工具,在你拔线的那一刻就停了。