在 SVG 和 CANVAS 中制作相同的曲线

Question

我在 SVG 和 CANVAS 中创建相同的曲线时遇到问题。我有图形 d3js 强制布局，并在强制刻度方法中为 SVG 曲线准备值：

                        link.attr("d", function (d) {
                        var dx = d.target.x - d.source.x,
                            dy = d.target.y - d.source.y,
                            dr = Math.sqrt(dx * dx + dy * dy),
                            normX = dx / ((dr != 0) ? dr : 1),
                            normY = dy / ((dr != 0) ? dr : 1),
                            sourcePadding = d.left ? 50 : 5,
                            targetPadding = d.right ? 50 : 5,
                            sourceX = d.source.x + (sourcePadding * normX),
                            sourceY = d.source.y + (sourcePadding * normY),
                            targetX = d.target.x - (targetPadding * normX),
                            targetY = d.target.y - (targetPadding * normY);

                        return "M" +
                            sourceX + "," +
                            sourceY + "A" +
                            dr + "," + dr + " 0 0,1 " +
                            targetX + "," +
                            targetY;});

如何在 CANVAS 中创建相同的曲线？我试试这个，但这没有用：

                    edges.forEach(function (d) {
                        // Draw a line from source to target.
                        context.beginPath();
                        context.fillStyle = d.color;
                       // context.quadraticCurveTo(288, 0, 388, 150);
                        context.moveTo(d.source.x, d.source.y);
                        context.quadraticCurveTo(d.source.y, d.source.y - 50, d.target.x, d.target.y);
                       // context.lineTo(d.target.x, d.target.y);
                        context.stroke();
                    });

感谢您的帮助！

有 jdFidlle SVG / CANVAS : JsFiddle SVG on the left canvas on right

已解决，解决方案在此： SOLUTION 但是我在曲线的尽头有箭头问题。有人可以帮我吗？我认为半径可能存在问题。谢谢！

Answer 1

SVG 二次曲线命令是 Q，而不是 A（椭圆弧）。画布中的弧线将使用arc or arcTo 绘制。