让我们绘图吧

为了建立应用，我们需要创建一个状态，一组工具，一组控件和一个分派函数。 我们可以将它们传递给PixelEditor构造器来创建主要组件。 由于我们需要在练习中创建多个编辑器，因此我们首先定义一些绑定。

  1. const startState = {
  2.   tool: "draw",
  3.   color: "#000000",
  4.   picture: Picture.empty(60, 30, "#f0f0f0"),
  5.   done: [],
  6.   doneAt: 0
  7. };
  9. const baseTools = {draw, fill, rectangle, pick};
  11. const baseControls = [
  12.   ToolSelect, ColorSelect, SaveButton, LoadButton, UndoButton
  13. ];
  15. function startPixelEditor({state = startState,
  16.                            tools = baseTools,
  17.                            controls = baseControls}) {
  18.   let app = new PixelEditor(state, {
  19.     tools,
  20.     controls,
  21.     dispatch(action) {
  22.       state = historyUpdateState(state, action);
  23.       app.setState(state);
  24.     }
  25.   });
  26.   return app.dom;
  27. }

解构对象或数组时，可以在绑定名称后面使用=，来为绑定指定默认值，该属性在缺失或未定义时使用。 startPixelEditor函数利用它来接受一个对象，包含许多可选属性作为参数。 例如，如果你未提供tools属性，则tools将绑定到baseTools。

这就是我们在屏幕上获得实际的编辑器的方式：

  1. <div></div>
  2. <script>
  3.   document.querySelector("div")
  4.     .appendChild(startPixelEditor({}));
  5. </script>

来吧，画一些东西。 我会等着你。