Question

我正在开发一个插件，允许使用鼠标或触摸绘制“自然外观”签名。当用户确认后，结果将是存储的SVG，然后可以显示该SVG来代替“点击签名”按钮。

附加的JSFiddle http://jsfiddle.net/TrueBlueAussie/67haj4nt/3/显示了我试图做的测试平台。 SVG生成的图像应该看起来接近原始画布路径。

enter image description here

第一个div包含canvas，其中我绘制了一些多段线（例如路径）。使用quadraticCurveTo和控制点的中点，我绘制了具有平滑曲线的线条。这很好用。

曲线图的关键部分是：

$.each(lines, function () {
    if (this.length > 0) {
        var lastPoint = this[0];
        ctx.moveTo(lastPoint[0], lastPoint[1]);
        for (var i = 1; i < this.length; i++) {
            var point = this[i];
            var midPoint = [(lastPoint[0] + point[0]) / 2, (lastPoint[1] + point[1]) / 2];
            ctx.quadraticCurveTo(lastPoint[0], lastPoint[1], midPoint[0], midPoint[1]);
            lastPoint = point;
        }
        // Draw the last line straight
        ctx.lineTo(lastPoint[0], lastPoint[1]);
    }
});

我已尝试过多个SVG生成相同输出的选项，但我对如何将相同的点集转换为等效的曲线感到困惑。 Quadratic Beziers需要“适当的”控制点，但如果可能的话，我更愿意使用更简单的 mid-points 。

有什么想法吗？这是可能的还是我必须将两者都转换为使用具有计算控制点的贝塞尔曲线。有没有一种简单的方法可以计算出能完成相同工作的控制点？

jQuery或原始JavaScript解决方案都很好，但你需要在提供的JSFiddle中演示：）

Answer 1

这只是代码中的一个错误。您没有在SVG版本中更新lastPoint。

http://jsfiddle.net/67haj4nt/4/

如果更新SVG版本以匹配画布版本，则会获得相同的曲线。

http://jsfiddle.net/67haj4nt/5/

相当于SVG中的canvas quadraticCurveTo

1 个答案: