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 但是我在箭头的末尾有箭头的问题。任何人都可以帮我吗？我认为raduis可能存在问题。谢谢！

Answer 1

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

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

1 个答案: