相关疑难解决方法(0)

当绘制二维弧,用Bezier曲线近似,如何计算给定的,你有一个圆圈,开始和结束的角度和半径的中心点在两个控制点？

如何从2d变换矩阵中提取旋转,缩放和平移值？我的意思是有一个2d的转变

matrix = [1, 0, 0, 1, 0, 0]

matrix.rotate(45 / 180 * PI)
matrix.scale(3, 4)
matrix.translate(50, 100)
matrix.rotate(30 / 180 * PI)
matrix.scale(-2, 4)

现在我的矩阵有值[a,b,c,d,tx,ty]

让我们忘记上面的过程,并想象我们只有值a,b,c,d,tx,ty

如何通过a,b,c,d,tx,ty找到总旋转和比例值

对不起我的英语不好

谢谢你的进步

编辑

我认为应该是某个地方的答案......

我刚刚在Flash Builder(AS3)中试过这样的

   var m:Matrix = new Matrix;
   m.rotate(.25 * Math.PI);
   m.scale(4, 5);
   m.translate(100, 50);
   m.rotate(.33 * Math.PI);
   m.scale(-3, 2.5);

   var shape:Shape = new Shape;
   shape.transform.matrix = m;

   trace(shape.x, shape.y, shape.scaleX, shape.scaleY, shape.rotation);

输出是:

x = -23.6 
y = 278.8 
scaleX = 11.627334873920528 
scaleY = -13.54222263865791 
rotation = 65.56274134518259 …

我在CSS中有以下转换矩阵

// rotate the element 60deg
element.style.transform = "matrix(0.5,0.866025,-0.866025,0.5,0,0)"

我可以用这个找到旋转...

// where a = [0.710138,0.502055,-0.57735,1,0,0]
var rotation = ((180/Math.PI) * Math.atan2( ((0*a[2])+(1*a[3])),((0*a[0])-(1*a[1]))) - 90
console.log(rotation); // ~60

同样如果......

// skew(30deg,-50deg) 
element.style.transform = "matrix(1,-1.19175,0.57735,1,0,0)"

var skewY = ((180/Math.PI) * Math.atan2( ((0*a[2])+(1*a[3])),((0*a[0])-(1*a[1]))) - 90;
var skewX = (180/Math.PI) * Math.atan2( ((1*a[2])+(0*a[3])),((1*a[0])-(0*a[1])));

console.log([skewX,skewY]); // ~= [30,-50] 

然而,只要我使用倾斜和旋转,一切都变得奇怪,因为旋转公式与倾斜公式相同...所以公式不能正确.

如何确定已应用两个属性的旋转和倾斜,我所知道的是矩阵变换.

同时缩放也搞砸了我的偏斜值,我认为不应该这样.

给定SVG Path元素,如何将所有路径命令转换为绝对坐标？例如,转换此路径:

<path d="M17,42 l100,0 v100 h-100 z"/>

进入这个等效路径:

<path d="M17,42 L117,42 V142 H17 Z"/>

这个问题是由这个问题推动的.

我想在Raphael JS 2中应用或"烘焙"几个路径的转换,这样我就可以将它们组合成一条路径.

这是一个示例路径,我希望将"transform"属性应用于所有"d"坐标.

<path style="" fill="#000000" stroke="none" d="M150,-265C182,-275,171,-220,180,-194L178,-194C181,-192,180,-185,181,-180C211,-169,282,-173,306,-166C308,-169,316,-171,315,-165C268,-157,225,-148,184,-137C188,-118,186,-96,190,-79L282,-131C289,-131,296,-135,297,-126C293,-118,271,-105,236,-80C190,-48,155,-20,125,-6C112,-15,115,-34,111,-51C121,-70,108,-107,107,-133C70,-132,-5,-126,0,-157C18,-170,39,-181,64,-191C75,-190,92,-181,100,-185C99,-198,95,-211,89,-225Z" transform="matrix(0.1389, 0, 0, 0.1389, 291.91, 235.465)" stroke-width="7.199999999999999">

据我所知,svg-edit框架可以将路径坐标转换为绝对位置,并删除过程中的变换矩阵.

一些相关问题,我无法得到答案:

• 烘焙转换为SVG路径元素命令
• 如何应用转换矩阵？

有没有一种简单的方法来获取两个 SVG 路径的差异路径？我有一个大多边形，我需要在其中切一些孔，或者我必须通过减去路径将其切成碎片。

最好用 JavaScript 编写，但 C# 也可以。

我已经寻找解决方案了。最接近的是如何从另一个形状中剪切一个形状，但它是关于形状，而不是路径。这个答案只提供了如何绘制带孔路径的线索，但无法自动执行此操作。

我真的坚持手动添加第二条路径（包括检查方向、绝对/相对位置、变换等所有内容）吗？

我想知道是否有人听说过一些javascript可以采取一个简单的SVG路径,花了大约30秒在illustrator或其他东西创建并将其转换为看起来像3d的东西.插图画家中有一个拉伸功能.它在sketchUp中也称为轮询.

我现在正在使用Raphael.js,但我愿意接受其他建议.一个简单的解决方案是制作路径的副本并将其向下和向右移动几个像素,并在原始路径后面给它一个更暗的颜色,但我正在寻找可能有更多阴影的东西.

谢谢!

我有Raphael.path2curve()的问题.该函数修改SVG路径字符串,以便将所有路径命令转换为绝对立方曲线(C).该函数支持所有路径命令(mlcqahvstMLCQAHVST参见SVG SPEC).

Raphael.path2curve()可以在很多情况下处理好路径,例如.它甚至可以将弧转换为正确的立方体,这不是一个简单的计算.我做了很多测试,并意识到由命令组成的路径QT,CS或HT转换得很好.以下也没有问题:MS, HS, VS, LS, TC, TH, TL, TV, QA, TA.

但它无法处理命令QS, TS, AS, TT(按此顺序).

如果我们例如.有这样的路径,转换失败:

M 0 0  T 205.4 112.9  S 260.8 23.36 82.45 72.86 

但这转换正确:

M 0 0  S 211.9 54.20 52.14 144.4  T 98.85 44.45 

所以,MTS不行,但MST是.有问题的是S和T,因为当事情失败时,它们总是存在问题.

我制作了一个随机路径生成器(慢,但使用jsbin来提高速度),在那里你可以获得随机路径并使用Raphael.path2curve()将其转换为Cubic命令.在小提琴中单击SVG或在输入字段上按Enter键以获取新的随机路径.重复,直到找到不正确的一个.在jsfiddle中,HTML窗口是一个参数var list = "st";,您可以在其中设置要随机化的路径命令.

这是一个示例图像.蓝色是原始路径,红色是转换路径.它们应该完全相同.

我应该怎么做Raphael代码才能使转换正确？

(我做了一个错误报告,但现在试图解决这个问题几个小时没有运气.