19

19.md

@@ -1,16 +1,26 @@
 # 十九、项目：像素艺术编辑器
 
+> 原文：[Project: A Pixel Art Editor](http://eloquentjavascript.net/19_paint.html)
+> 
+> 译者：[飞龙](https://github.com/wizardforcel)
+> 
+> 协议：[CC BY-NC-SA 4.0](http://creativecommons.org/licenses/by-nc-sa/4.0/)
+> 
+> 自豪地采用[谷歌翻译](https://translate.google.cn/)
+> 
+> 部分参考了[《JavaScript 编程精解（第 2 版）》](https://book.douban.com/subject/26707144/)
+
 > 我看着眼前的许多颜色。 我看着我的空白画布。 然后，我尝试使用颜色，就像形成诗歌的词语，就像塑造音乐的音符。
 > 
 > Joan Miro
 
-![]()
+![](img/19-0.jpg)
 
 前面几章的内容为你提供了构建基本的 Web 应用所需的所有元素。 在本章中，我们将实现一个。
 
 我们的应用将是像素绘图程序，你可以通过操纵放大视图（正方形彩色网格），来逐像素修改图像。 你可以使用它来打开图像文件，用鼠标或其他指针设备在它们上面涂画并保存。 这是它的样子：
 
-![]()
+![](img/19-1.png)
 
 在电脑上绘画很棒。 你不需要担心材料，技能或天赋。 你只需要开始涂画。
 
@@ -337,7 +347,7 @@ function rectangle(start, state, dispatch) {
 
 实现洪水填充涉及更多东西。 这是一个工具，填充和指针下的像素，和颜色相同的所有相邻像素。 “相邻”是指水平或垂直直接相邻，而不是对角线。 此图片表明，在标记像素处使用填充工具时，着色的一组像素：
 
-![]()
+![](img/19-2.svg)
 
 有趣的是，我们的实现方式看起来有点像第 7 章中的寻路代码。那个代码搜索图来查找路线，但这个代码搜索网格来查找所有“连通”的像素。 跟踪一组可能的路线的问题是类似的。
 
@@ -730,7 +740,7 @@ function startPixelEditor({state = startState,
 
 两个像素之间的直线是连接像素的链条，从起点到终点尽可能直。对角线相邻的像素也算作连接。 所以斜线应该看起来像左边的图片，而不是右边的图片。
 
-![]()
+![](img/19-3.svg)
 
 如果我们有了代码，它在两个任意点间绘制一条直线，我们不妨继续，并使用它来定义`line`工具，它在拖动的起点和终点之间绘制一条直线。