使用HTML5 Canvas对图像/纹理进行透视转换

Question

我已经使用这里描述的'keystoning'技术成功地将透视添加到带有html5画布的转动'硬封面'书页。

基本上发生的是图像/画布元素被定义为源纹理。 在每个渲染循环期间，这被分割成具有定义宽度的片段（1px是最佳质量），并且每个片段的高度根据其在纹理的X轴上的位置而缩放。

这可以使用给定的源图像/纹理创建一个良好的透视错觉，如下所示：

这适用于“硬封面”页面转动，纹理以及任何包含的文本给出了很好的透视效果。 但是我需要将相同类型的梯形失真应用于“软”页面转弯。 问题是简单的透视变换不起作用，因为页面本身是用曲线定义的，如下所示：

目前，页面纹理在页面转弯中的任何给定点处被缩放到曲线的最大高度，页面边缘二次曲线路径被设置为剪切图像/纹理。 由于我使用各种标准画布函数动态绘制阴影和页面线，这看起来是可以接受的，因为页面线（使用二次曲线绘制）为页面转向提供了自然的视角。

然而，文本本身（源自另一个缓存的画布/图像元素）看起来不够好，始终保持完全平坦。

我想要做的是如上所述应用相同的切片/分割/缩放梯形校正技术，但不知何故根据二次曲线（绘制为ctx.quadraticCurveTo(); ）计算每个1px片段的高度ctx.quadraticCurveTo(); ）路径和垂直位置画布。

在我的示例图像中，它实际上看起来并不太糟糕，但是当文本接近页面的顶部/底部时，翘曲效果当然应该更大。 不仅如此，我们还需要计算水平比例因子来压缩最接近页面折叠的文本。

我真的不能提供任何我害怕的示例代码。 但基本上我们做的事情与我上面提供的链接中描述的关键字石头的方式非常相似。 总而言之，我需要能够使用二次曲线坐标/值来计算切片/渲染函数中每个线段的比例因子，如下所示：

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宽度的片段时，较大的文本保持完全笔直的单个非梯形图像纹理，以便它自然地跟随翻页。 如果没有任何其他“黑客”或方法在这种情况下实现半现实的透视效果将是非常有帮助的。

Answer 1

我终于找到了解决方案......

感谢这里的精彩答案： html二次曲线的中心点

我有必要的方程式来获得二次曲线上任何点的y值。

然后，使用此y值计算对文本纹理高度的调整是一个简单的情况。 我有一些调整要做，以找到最好的二次曲线计算，但结果是非常奇妙的，即使是。

见下图：

它目前在Firefox / Chrome中运行大约60fps，在IE9 / 10中运行大约45fps。 我确信有优化的余地，但不管我对结果非常满意。 显然，它不会沿着曲线水平拉伸/挤压纹理，但这样做需要至少一次额外的穿过纹理，可能更多，这会削弱性能。

另一个选择是采用实际的Affine 3d纹理映射，但在我的尝试中，我发现这种方法在性能和质量方面要优越得多，同时显然牺牲了一点准确性。

循环，在页面翻转的主渲染循环中，如下所示：

    for (var i = 0; i < segments; i++) {
            var sw = i >= segments - 1 ? segmentWidth : segmentWidth + 3;
            var sourceLeft = texw * ((i * segmentWidth) / texw);
            var sourceWidth = texw * (sw / texw)
            var texleft = foldX - foldWidth + (i * segmentWidth);                   
            var percent = ((i * segmentWidth)/foldWidth);
            var curve = self.getQuadraticCurvePoint(foldX - foldWidth, 0, foldX, -verticalOutdent * 2, foldX, 0, percent)
            var curvedheight = self.PAGE_HEIGHT + Math.abs(curve.y*2);
            var y = -((curvedheight - self.PAGE_HEIGHT)/2);

context.drawImage(self.flips[flip.index+1].leftcanvas, sourceLeft, 0, sourceWidth, texh, texleft, y, sw, curvedheight);

    }

相关的二次点函数如下：

    getQuadraticCurvePoint : function(startX, startY, cpX, cpY, endX, endY, position) {
            return {
                x:  this.getQBezierValue(position, startX, cpX, endX),
                y:  this.getQBezierValue(position, startY, cpY, endY)
            };
        },

和：

getQBezierValue : function(t, p1, p2, p3) {
                var iT = 1 - t;
                return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
        },