【发布时间】：2013-01-28 01:17:37
【问题描述】：
我已经使用here 中描述的“keystoning”技术成功地为带有 html5 画布的“精装”书页添加了透视图。
本质上发生的是图像/画布元素被定义为源纹理。在每个渲染循环期间，它被分成定义宽度的段（1px 是最好的质量），每个段的高度取决于它在纹理 X 轴上的位置。
这会使用给定的源图像/纹理创建良好的透视错觉，如下所示：
这对于“硬封面”翻页效果很好，纹理以及任何包含的文字都给人一种很好的透视印象。但是，我需要对“软”翻页应用相同类型的梯形校正。问题是简单的透视变换将不起作用，因为页面本身是用曲线定义的，如下所示：
当前页面纹理在翻页中的任何给定点缩放到曲线的最大高度，页面边缘二次曲线路径设置为剪切图像/纹理。由于我使用各种标准画布函数动态绘制阴影和分页线，这看起来可以接受，因为分页线（用二次曲线绘制）为翻页提供了自然的视角。
但是文本本身（来自另一个缓存的画布/图像元素）看起来不够好，始终保持完全平坦。
我想做的是以某种方式应用与上述相同的切片/分段/缩放梯形技术，但以某种方式根据二次曲线（绘制为ctx.quadraticCurveTo();）路径和垂直位置计算每个 1px 段的高度画布。
在我的示例图像中，它实际上看起来并不算太糟糕，但是当文本接近页面的顶部/底部时，变形效果当然应该更大。不仅如此，我们还需要计算一个水平比例因子来压缩最接近页面折叠的文本。
恐怕我无法提供任何示例代码。但本质上，我们所做的事情与我在上面提供的链接中描述的关键石化方式非常相似。总结一下，我需要能够使用二次曲线坐标/值来计算切片/渲染函数中每个段的比例因子，如下所示：
function keystoneAndDisplayImage(ctx, img, x, y, pixelWidth, scalingFactor) {
var h = img.height,
w = img.width,
// The number of slices to draw.
numSlices = Math.abs(pixelWidth),
// The width of each source slice.
sliceWidth = w / numSlices,
// Whether to draw the slices in reverse order or not.
polarity = (pixelWidth > 0) ? 1 : -1,
// How much should we scale the width of the slice
// before drawing?
widthScale = Math.abs(pixelWidth) / w,
// How much should we scale the height of the slice
// before drawing?
heightScale = (1 - scalingFactor) / numSlices;
for(var n = 0; n < numSlices; n++) {
// Source: where to take the slice from.
var sx = sliceWidth * n,
sy = 0,
sWidth = sliceWidth,
sHeight = h;
// Destination: where to draw the slice to
// (the transformation happens here).
var dx = x + (sliceWidth * n * widthScale * polarity),
dy = y + ((h * heightScale * n) / 2),
dWidth = sliceWidth * widthScale,
dHeight = h * (1 - (heightScale * n));
ctx.drawImage(img, sx, sy, sWidth, sHeight,
dx, dy, dWidth, dHeight);
}
}
...但我真的不知道从哪里开始。任何帮助将不胜感激。
编辑：
对我希望实现的目标进行了更多思考后，我意识到通过这种方法完美表示 3D 纹理映射可能有点过分要求。因此，我对任何能够根据 html5 画布中定义的二次曲线简单地更改每个段的高度比例和 y 位置的答案感到非常满意。
这是一个更好的示例图片：
正如您所见，当我需要通过曲线因子及其 y 位置计算 1px 宽度段以使其自然地跟随翻页时，较大的文本保持完全笔直且具有单个非梯形失真图像纹理。在这种情况下，如果没有任何其他“黑客”或方法来实现半现实的透视效果，将会非常有帮助。
【问题讨论】：
标签： javascript canvas html5-canvas