Question

我使用了here所描述的'keystoning'技术，成功地将视角添加到带有html5画布的翻版'硬封面'书页。

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

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

enter image description here

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

enter image description here

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

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

我想要做的是如上所述应用相同的切片/分割/缩放梯形校正技术，但不知何故根据二次曲线（绘制为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位置的答案感到满意。

以下是一个更好的示例图片：

enter image description here

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

Answer 1

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

感谢这里的精彩答案：Center point on html quadratic curve

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

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

见下图：

enter image description here

它目前在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);

    }

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

1 个答案: