将SVG ARCTO映射到HTML Canvas ARCTO [英] Mapping SVG ARCTO to HTML Canvas ARCTO

问题描述

ARCTO在 SVG规范中与我们所拥有的完全不同在 Canvas 中。我有一个用例，我将有数据按照SVG规范，但我需要在Canvas绘制。

ARCTO in SVG specification is quite different from the one we have in Canvas. I have a use case where I will have the data as per SVG spec but I need to draw that on Canvas.

我试过这个，但我猜我的几何是弱的。

I tried this but I guess my geometry is weak. Can you please help?

推荐答案

因此，svg椭圆和canvas帆布的区别是你在svg中有两个半径，在arcTo中。然后你还需要在画布上的特定角度旋转你的弧。要模拟2个半径，您需要在给定坐标中以最小半径生成弧。然后，您需要使用系数（rx / ry）以特定方向缩放此弧。现在你只需要旋转。但在这个Approuch是真的很难想象你想要显示的椭圆的哪一部分，因为它依赖于大弧标志扫描标志在SVG规格。另一个问题是通过结束坐标（从svg spec）限制你的弧。

So the difference between svg ellipse and canvas arc is that you have 2 radiuses in svg and only one in arcTo. Then you also need to rotate your arc on specific angle in canvas. To emulate 2 radiuses you need to make an arc in given coordinates with smalest radius. Then you need to scale this arc by specific direction with coefficient(rx/ry). And now you need only to rotate. But in this approuch is really hard to figurate which part of ellipse you want to show because it depends from large-arc-flag sweep-flag in svg spec. Another problem is to limit your arc by end coordinates(from svg spec). So by arcTo you can build maximum the half of ellipse, I guess.

你也可以使用bezierCurveTo（x0，y0，x1，y1，x2，y2）绘制一个椭圆。椭圆的一部分，如果你的椭圆上有3个控制点的坐标。有了这个Approuch，你可以构建任何段的椭圆。因为，对于大于PI的段，你至少需要两条曲线。

You also may use bezierCurveTo(x0,y0,x1,y1,x2,y2) to draw a part of ellipse, if you have coordinates of 3 control points on your ellipse. With this approuch you can build any segment of ellipse. Of cause, for segments more than PI you will need at least two curves

从SVG规范你有（rx ry x轴旋转大弧标志扫描，标志xy）。因此，示例路径将如下所示：

From SVG spec you have (rx ry x-axis-rotation large-arc-flag sweep-flag x y). So the sample path would be like that:

  M100,100 a25,50 -30 0,1 50,-25

Here you may find how bizier curves should be drawn.

现在你有上下文点（这是100,100）和终点（这是100 + 50,100-25）
现在，您需要在旋转前计算控制点到-30度。

Now you have context point(which is 100,100), and end point (which is 100+50,100-25) Now you need to calculate control points before rotation to -30 degrees.

这里有一些适用于我的示例：

Here the some example that works for me:

$(document).ready(function(){
        var startX = 100;
        var startY = 100;
        var dX = 50;
        var dY = -25;
        var angle = -30;
        var rx = 25;
        var ry = 50;
        var svg = Raphael($('#svg')[0], 200, 200);

        var path = "M" +startX + "," + startY + " a" + rx + "," + ry + " " + angle + " 0,1" + " " + dX + "," +dY;
        svg.path(path).attr({"stroke-width" : 2, "stroke" : "#FFFFFF"});

        var kappa = .5522848,
        ox = rx*kappa,
        oy = ry*kappa,
        xm = startX + rx,       // x-middle
        ym = startY + ry;       // y-middle
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.moveTo(startX,startY);
        ctx.bezierCurveTo(startX, startY - oy, startX + ox, startY - ry, startX + rx, startY - ry);
        ctx.bezierCurveTo(startX + rx + ox, startY - ry, startX + 2*rx, startY - oy, startX + dX, startY + dY);
        ctx.stroke();
    });

标记简单：

<div id="svg" style="border: 1px solid black;position : absolute;top : 50px;left : 50px;"></div>
<canvas id="canvas" width="200px" height="200px" style="border: 1px solid black;position : absolute;top : 300px;left : 50px;"></canvas>

曲线不相似，因为我没有旋转cotrol点到-30度。但我胆敢说，这只是你需要做的一件事。因为如果你会把angle = 0。他们会类似
你可以使用这个

the curves are not similar because I didnt rotate cotrol points to -30 degrees. But I bilieve that it is only one thing that you need to do. Because if you will put angle = 0. They will be similar You may use this artical to get mathematic for rotation.

PS：我从 this answer

PS: I took some parts of code from this answer

这篇关于将SVG ARCTO映射到HTML Canvas ARCTO的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！