javascript - 使用 HTML5 Canvas 进行图像/纹理的透视变换

Question

我使用了描述的“梯形失真”技术 here使用 html5 canvas 成功地将透视图添加到转动的“硬封面”书页。

本质上发生的是图像/ Canvas 元素被定义为源纹理。在每个渲染循环中，它被分成定义宽度的段(1px 是最好的质量)并且每个段的高度根据其在纹理 X 轴上的位置进行缩放。

这会在给定的源图像/纹理下产生良好的透视错觉，如下所示:

这对于“精装”翻页效果很好，纹理以及任何包含的文本都给人以透视的深刻印象。但是，我需要对“软”翻页应用相同类型的梯形失真处理。问题是简单的透视变换将不起作用，因为页面本身是用曲线定义的，如下所示:

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

但是文本本身(来自另一个缓存的 Canvas /图像元素)看起来不够好，始终保持完全平坦。

我想做的是以某种方式应用与上述相同的切片/分段/缩放梯形校正技术，但以某种方式根据二次曲线(绘制为 ctx.quadraticCurveTo(); )计算每个 1px 段的高度。 ) Canvas 内的路径和垂直位置。

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

恐怕我无法提供任何示例代码。但本质上，我们正在做的事情与我在上面提供的链接中描述的 key-stoning 非常相似。总而言之，我需要能够使用二次曲线坐标/值来计算切片/渲染函数中每个段的比例因子，如下所示:

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 Canvas 中定义的二次曲线简单地改变每个段的高度比例和 y 位置的答案感到非常满意。

这是一个更好的示例图像:

如您所见，当我需要通过曲线因子及其 y 位置计算 1px 宽度段以使其自然跟随翻页时，较大的文本与单个非梯形图像纹理保持完全笔直。如果没有任何其他“技巧”或方法无法在这种情况下实现半现实的透视效果，将会非常有帮助。

Answer 1

我终于找到了解决办法....

感谢这里的精彩回答:Center point on html quadratic curve

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

然后是使用这个 y 值来计算对文本纹理高度的调整的简单情况。我需要进行一些调整以找到最佳的二次曲线计算，但即使是这样，结果也非常棒。

见下图:

它目前在 Firefox/Chrome 中以大约 60fps 的速度运行，在 IE9/10 中以大约 45fps 的速度运行。我确信还有优化的空间，但无论如何我对结果都非常满意。显然，它不会根据曲线水平拉伸(stretch)/挤压纹理，但这样做将需要至少一次额外通过纹理，可能更多，这会削弱性能。

另一种选择是求助于实际的仿射 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;
        },