2.52

练习 2.52 在上面描述的各个层次上工作，修改图2-9中所示的方块的限制。特别是：

a）给练习2.49的基本wave画家加入某些线段（例如，加上一个笑脸）。

b）修改 corner-split 的构造模式（例如，只用up-split和right-split的图像的各一个副本，而不是两个）。

c）修改square-limit，换一种使用square-of-four的方式，以另一种不同模式组合起各个角区（例如，你可以让大的Rogers先生从正方形的每个角向外看）。

为了方便直观地体验，将采用 js 实现。

a）

先复用一下上一练习的代码，然后增加了两条眼线的线段，下滑看效果，有点兔斯基的感觉。

 
cons = (x, y) => [x, y];
car = (z) => z[0];
cdr = (z) => z[1];
​
makeVect = cons;
xCorVect = car;
yCorVect = cdr;
​
makeSegment = cons;
startSegment = car;
endSegment = cdr;
​
o = makeVect(0, 0);
e1 = makeVect(300, 0);
e2 = makeVect(0, 150); 
​
s = makeSegment(makeVect(1, 0), makeVect(0, 1)); 
console.log('s = ', s);
​
console.log(startSegment(s));
console.log(endSegment(s));
​x
 
"s = " Array [
  Array [
    1,
    0,
  ],
  Array [
    0,
    1,
  ],
]
Array [
  1,
  0,
]
Array [
  0,
  1,
]
undefined

 
makeFrame = (origin, edge1, edge2) => {
  return [origin, edge1, edge2];
};
​
originFrame = (frame) => frame[0];
edge1Frame = (frame) => frame[1];
edge2Frame = (frame) => frame[2];
​
addVect = (v1, v2) => makeVect(xCorVect(v1) + xCorVect(v2), yCorVect(v1) + yCorVect(v2));
subVect = (v1, v2) => makeVect(xCorVect(v1) - xCorVect(v2), yCorVect(v1) - yCorVect(v2));
scaleVect = (s, v) => makeVect(s * xCorVect(v), s * yCorVect(v));
​
frameCoordMap = (frame) => {
  return (v) => {
    return addVect(
      originFrame(frame),
      addVect(
        scaleVect(
          xCorVect(v),
          edge1Frame(frame)
        ),
        scaleVect(
          yCorVect(v),
          edge2Frame(frame)
        )
      )
    );
  };
}
​
f = makeFrame(o, e1, e2);
 
Array [
  Array [
    0,
    0,
  ],
  Array [
    300,
    0,
  ],
  Array [
    0,
    150,
  ],
]

 
drawLine = (v1, v2) => {
  return (ctx) => {
    ctx.beginPath();
    ctx.moveTo(xCorVect(v1), yCorVect(v1));
    ctx.lineTo(xCorVect(v2), yCorVect(v2));
    ctx.stroke();
  }
};
​
segmentsPainter = (segmentList) => {
  return (frame) => (ctx) => {
    const m = frameCoordMap(frame);
​
    segmentList.forEach((segment) => {
      drawLine(
        m(startSegment(segment)),
        m(endSegment(segment))
      )(ctx);
    });
  }
}
​
applyToCanvas = (painter, canvasSelector, setWH = false) => {
  const canvas = document.querySelector(canvasSelector);
​
  if(setWH) {
    const originalRatio = canvas.width/canvas.height;
    canvas.width = 1000;
    canvas.height = canvas.width / originalRatio;
  }
​
  const ctx = canvas.getContext('2d');
​
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
​
  painter(ctx);
}
 
[Function applyToCanvas]

 
wavePainter = (frame) => {
  const v1 = makeVect(0.4, 0);
  const v2 = makeVect(0.6, 0);
  const v3 = makeVect(0, 0.2);
  const v4 = makeVect(0.3, 0.2);
  const v5 = makeVect(0.7, 0.2);
  const v6 = makeVect(0, 0.4);
  const v7 = makeVect(0.2, 0.4);
  const v8 = makeVect(0.3, 0.35);
  const v9 = makeVect(0.42, 0.4);
  const v10 = makeVect(0.6, 0.4);
  const v11 = makeVect(0.8, 0.4);
  const v12 = makeVect(0.3, 0.4);
  const v13 = makeVect(0.2, 0.55);
  const v14 = makeVect(0.31, 0.5);
  const v15 = makeVect(0.6, 0.51);
  const v16 = makeVect(1, 0.7);
  const v17 = makeVect(0.5, 0.8);
  const v18 = makeVect(1, 0.85);
  const v19 = makeVect(0.35, 1);
  const v20 = makeVect(0.4, 1);
  const v21 = makeVect(0.6, 1);
  const v22 = makeVect(0.7, 1);
​
  const v23 = makeVect(0.5, 0.1);
  const v24 = makeVect(0.55, 0.1);
​
  const v25 = makeVect(0.6, 0.1);
  const v26 = makeVect(0.65, 0.1);
​
  return segmentsPainter([
    makeSegment(v1, v4),
    makeSegment(v2, v5),
    makeSegment(v3, v7), 
    makeSegment(v7, v8),
    makeSegment(v8, v9),
    makeSegment(v9, v4),
    makeSegment(v10, v5),
    makeSegment(v10, v11),
    makeSegment(v6, v13),
    makeSegment(v13, v12),
    makeSegment(v12, v14),
    makeSegment(v16, v11),
    makeSegment(v18, v15),
    makeSegment(v19, v14),
    makeSegment(v20, v17),
    makeSegment(v21, v17),
    makeSegment(v22, v15),
​
    makeSegment(v23, v24),
    makeSegment(v25, v26),
  ])(frame); 
}
​
applyToCanvas(wavePainter(f), '#wave-canvas');
 
undefined

 
transformPainter = (painter, origin, corner1, corner2) => {
  return (frame) => {
    const m = frameCoordMap(frame);
    const newOrigin = m(origin);
    return painter(
      makeFrame(
        newOrigin, 
        subVect(m(corner1), newOrigin),
        subVect(m(corner2), newOrigin)
      )
    );
  }
}
​
flipHoriz = (painter) => {
  return transformPainter(
    painter,
    makeVect(1, 0),
    makeVect(0, 0),
    makeVect(1, 1)
  )
}
 
[Function flipHoriz]

 
rotateLeft180 = (painter) => {
  return transformPainter(
    painter,
    makeVect(1, 1),
    makeVect(0, 1),
    makeVect(1, 0)
  )
}
 
[Function rotateLeft180]

 
rotateLeft270 = (painter) => {
  return transformPainter(
    painter,
    makeVect(1, 0),
    makeVect(1, 1),
    makeVect(0, 0)
  )
}
 
[Function rotateLeft270]

b

可以和 练习 2.44 对比着看，这里只用 rightSplit 完成同样的效果。

 
below = (painter1, painter2) => {
  const splitPoint = makeVect(0, 0.5);
  const paintBelow = transformPainter(
    painter1,
    splitPoint,
    makeVect(1, 0.5),
    makeVect(0, 1)
  );
  const paintUp = transformPainter(
    painter2,
    makeVect(0, 0),
    makeVect(1, 0),
    splitPoint
  );
​
  return frame => ctx => {
    paintBelow(frame)(ctx);
    paintUp(frame)(ctx);
  }
}
​
beside = (painter1, painter2) => {
  const splitPoint = makeVect(0.5, 0);
  const paintLeft = transformPainter(
    painter1, 
    makeVect(0, 0),
    splitPoint,
    makeVect(0, 1)
  );
  const paintRight = transformPainter(
    painter2,
    splitPoint,
    makeVect(1, 0),
    makeVect(0.5, 1)
  );
​
  return frame => ctx => {
    paintLeft(frame)(ctx);
    paintRight(frame)(ctx);
  };
};
​
rightSplit = (painter, n) => {
  if (n === 0) {
    return painter;
  }
​
  const smaller = rightSplit(painter, n-1);
  return beside(painter, below(smaller, smaller));
};
​
rotateLeft90 = (painter) => {
  return transformPainter(
    painter,
    makeVect(0, 1),
    makeVect(0, 0),
    makeVect(1, 1)
  )
}
​
cornerSplit = (painter, n) => {
  if(n === 0) {
    return painter;
  }
​
  const right = rightSplit(painter, n-1);
  const up = rotateLeft90(
    rightSplit(
      rotateLeft90(
        rotateLeft90(
          rotateLeft90(
            painter
          )
        )
      ), 
      n-1
    )
  );
​
  const topLeft = beside(up, up);
  const bottomRight = below(right, right);
  const corner = cornerSplit(painter, n-1);
​
  return beside(
    below(painter, topLeft), 
    below(bottomRight, corner)
  );
}
​
applyToCanvas(cornerSplit(wavePainter, 4)(f), '#corner-split-canvas');
 
undefined

c

 
squareOfFour = (tl, tr, bl, br) => {
  return (painter) => {
    const top = beside(tl(painter), tr(painter));
    const bottom = beside(bl(painter), br(painter));
​
    return below(bottom, top);
  };
};
​
id = x => x;
flipVert = (painter) => {
  return transformPainter(
    painter,
    makeVect(0, 1),
    makeVect(1, 1),
    makeVect(0, 0)
  );
};
​
squareLimit = (painter, n) => {
  const combine4 = squareOfFour(flipHoriz, id, rotateLeft180, flipVert);
​
  return combine4(cornerSplit(painter, n));
};
​
applyToCanvas(squareLimit(wavePainter, 4)(f), '#square-of-four-canvas');
 
undefined

至此，可以解决 练习 2.44 最后的一个问题了，只需要替换 wavePainter 为 jeffTianPainter 即可。

 
jeffTianPainter = (frame) => ctx => {
  const jeffTian = document.querySelector('#jeff-tian');
​
  const m = frameCoordMap(frame);
  const v1 = makeVect(0, 0);
  const v2 = makeVect(1, 1);
​
  const x = xCorVect(m(v1));
  const y = yCorVect(m(v1));
  const w = xCorVect(m(v2)) - x;
  const h = yCorVect(m(v2)) - y;
​
  ctx.drawImage(jeffTian, 0, 0, jeffTian.naturalWidth, jeffTian.naturalHeight, x, y, w, h);
};
​
applyToCanvas(squareLimit(jeffTianPainter, 4)(f), '#solved', false);
 
InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

但是这样看起来，仍然不是预期的。虽然解决了子画布没有旋转的问题，但是带了新的问题，即翻转操作无效。现在知道了，2.44 中的问题在于使用了 ctx.scale()，导致子画布的旋转被撤销了。而现在的问题，是由于没有使用 ctx.scale()，所以直接 drawImage，实现不了水平或者垂直方向上的旋转。

segmentsPainter 没有这个问题，因为是矢量形式。要彻底解决画图片的问题，必须对 canvas 做深度介入，或者逐像素读取图片，一个点一个点的去画(将图片上每个点在画布上的位置都做一个计算)。

像素点画家：

 
pixelPainter = (img) => (frame) => (ctx) => {
  const m = frameCoordMap(frame);
​
  const o = originFrame(frame);
  const e1 = edge1Frame(frame);
  const e2 = edge2Frame(frame);
​
  const frameWidth = Math.round(Math.sqrt(
    Math.pow(xCorVect((e1)) - xCorVect(o), 2) +
    Math.pow(yCorVect((e1)) - yCorVect(o), 2)
  ));
  const frameHeight = Math.round(Math.sqrt(
    Math.pow(xCorVect((e2)) - xCorVect(o), 2) +
    Math.pow(yCorVect((e2)) - yCorVect(o), 2)
  ));
​
  const wStep = 1/frameWidth;
  const hStep = 1/frameHeight;
​
  for (let y = 0; y <= 1; y += hStep) {
    for (let x = 0; x <= 1; x += wStep) {
      const logicalPixel = makeVect(x, y);
      const transformedPixel = m(logicalPixel);
​
      const frameX = xCorVect(transformedPixel);
      const frameY = yCorVect(transformedPixel);
​
      const imageX = x * img.naturalWidth;
      const imageY = y * img.naturalHeight;
​
      ctx.drawImage(img, 
                    imageX, imageY, 1, 1, 
                    frameX, frameY, 1, 1);
    }
  }
};
​
applyToCanvas(pixelPainter(document.getElementById('jeff-tian'))(f), '#pixel-canvas', false);
 
InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

对像素点画家应用 squareLimit 效果

至此，就修复了2.44中的 squareLimit 在 Jeff Tian Painter 上的应用！

但是有两个小问题：

1、性能不够好；

2、清晰度不高。

 
const jeffTianPixel = pixelPainter(document.getElementById('jeff-tian'));
​
applyToCanvas(squareLimit(jeffTianPixel, 2)(f), '#square-limit-to-pixel', false);
 
InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

现在，要实现向外看的效果，可以简单变形一下，即将最初的 wavePainter 水平翻转，做为最底层的画家：

 
const squareLimit = (painter, n) => {
  const combine4 = squareOfFour(flipHoriz, id, rotateLeft180, flipVert);
​
  return combine4(cornerSplit(painter, n));
};
​
applyToCanvas(squareLimit(flipHoriz(wavePainter), 4)(f), '#square-of-four-2-canvas');
 
undefined

 
console.log('done');
 
"done"
undefined