将SVG ARCTO映射到HTML Canvas ARCTO

概述在 SVG specification中的ARCTO与我们在 Canvas中的完全不同.我有一个用例,我将根据SVG规范获得数据,但我需要在Canvas上绘制它. 我尝试了这个,但我想我的几何形状很弱.你能帮忙吗？ svg ellipse和canvas arc之间的区别在于svg中有2个半径,arcTo中只有1个半径.然后,您还需要在画布中以特定角度旋转圆弧.要模拟2个半径,您需要使用给定坐标具有 在 SVG specification中的ARCTO与我们在 Canvas中的完全不同.我有一个用例,我将根据SVG规范获得数据,但我需要在Canvas上绘制它.

我尝试了这个,但我想我的几何形状很弱.你能帮忙吗？

解决方法 svg ellipse和canvas arc之间的区别在于svg中有2个半径,arcTo中只有1个半径.然后,您还需要在画布中以特定角度旋转圆弧.要模拟2个半径,您需要使用给定坐标具有最小半径的圆弧.然后,您需要使用系数(rx / ry)在特定方向上缩放此弧.而现在你只需要旋转.但是在这种方法中很难说明你要显示的椭圆的哪个部分,因为它取决于svg规范中的大弧标志和扫描标志.另一个问题是通过结束坐标(来自svg规范)限制弧.所以通过arcTo,我猜你可以建立一个椭圆的一半.

如果椭圆上有3个控制点的坐标,也可以使用bezIErCurveto(x0,y0,x1,y1,x2,y2)绘制椭圆的一部分.使用这种方法,您可以构建椭圆的任何部分.当然,对于超过PI的段,您将需要至少两条曲线

从你有SVG规范(rx ry x轴旋转大弧标志扫描标志x y).所以样本路径就是这样的：

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

Here你可能会发现应该如何绘制贝塞尔曲线.

现在你有一个上下文点(100,100)和一个终点(100 50,100-25)
您需要在旋转到-30度之前计算控制点.

这是一个适合我的例子：

$(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,startX + 2*rx,startX + dX,startY + dY);        ctx.stroke();    });

标记很简单：

<div ID="svg" ></div><canvas ID="canvas" wIDth="200px" height="200px" ></canvas>

曲线不相似,因为我没有将控制点旋转到-30度.但我相信这是你唯一需要做的事情.因为如果你将角度= 0,它们将是相似的
您可以使用this文章来获取轮换数学.

PS：我从this回答了部分代码

总结

以上是内存溢出为你收集整理的将SVG ARCTO映射到HTML Canvas ARCTO全部内容，希望文章能够帮你解决将SVG ARCTO映射到HTML Canvas ARCTO所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。