等价于 SVG 中的 canvas quadraticCurveTo

Question

我正在开发一个允许 "natural looking" 使用鼠标或触摸来绘制签名的插件。当用户确认后，结果将是一个存储的 SVG，然后可以显示在 "Click to sign" 按钮的位置。

附带的 JSFiddle http://jsfiddle.net/TrueBlueAussie/67haj4nt/3/ 显示了我正在尝试做的事情的测试平台。 SVG 生成的图像应该看起来接近原始 canvas 路径。

第一个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，但我对如何将相同的点集转换为等效曲线感到困惑。二次贝塞尔曲线需要 "proper" 个控制点，但如果可能的话，我更愿意使用简单得多的中点。

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

jQuery 或原始 JavaScript 解决方案都可以，但您需要在提供的 JSFiddle 中演示 :)

Answer 1

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

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

如果您更新 SVG 版本以匹配 canvas 版本，您将获得相同的曲线。

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

等价于 SVG 中的 canvas quadraticCurveTo

Equivalent of canvas quadraticCurveTo in SVG

javascript

jquery

canvas

svg

bezier