SVG元素与变换相交

Intersection library from Kevin Lindsey允许轻松计算几种类型的元素（路径，矩形，线条......）之间的交集。SVG元素与变换相交

但是，它似乎没有考虑通过transform="translate(x,y) rotate(r)"应用到任何对象的转换。

<svg> 
    <polygon id="machine" transform="translate(40,25) rotate(45)"... /> 
    <path id="outer" ... /> 
</svg> 

<script> 
var machine = document.getElementById("machine") 
var outer = document.getElementById("outer") 

var m = new Polygon(machine) 
var o = new Path(outer) 

Intersection.intersectPathShape(o, m) // incorrect 
</script>

有没有办法在计算交叉点时考虑应用于任何元素的转换？

来源

2016-12-16 Jivan

是否有可能得到一个基本的jsfiddle举一个测试例子？我认为这将是相当困难的，但它可能会提供一些想法。 – Ian

@Ian workin'on它 – Jivan

您可以尝试更改其“屏幕”值的值，提取变换。下面是多边形和路径（除弧）一些例子：注意对路径：铬弃用pathSegList最近，现在需要填充工具， https://github.com/progers/pathseg

//---except arc paths--- 
 
function screenPath(path) 
 
{ 
 
\t var sCTM = path.getCTM() 
 
\t var svgRoot = path.ownerSVGElement 
 

 
\t var segList=path.pathSegList 
 
\t var segs=segList.numberOfItems 
 
\t //---change segObj values 
 
\t for(var k=0;k<segs;k++) 
 
\t { 
 
\t \t var segObj=segList.getItem(k) 
 

 
\t \t if(segObj.x && segObj.y) 
 
\t \t { 
 
\t \t \t var mySVGPoint = svgRoot.createSVGPoint(); 
 
\t \t \t mySVGPoint.x = segObj.x 
 
\t \t \t mySVGPoint.y = segObj.y 
 
\t \t \t mySVGPointTrans = mySVGPoint.matrixTransform(sCTM) 
 
\t \t \t segObj.x=mySVGPointTrans.x 
 
\t \t \t segObj.y=mySVGPointTrans.y 
 
\t \t } 
 

 
\t \t if(segObj.x1 && segObj.y1) 
 
\t \t { 
 
\t \t \t var mySVGPoint1 = svgRoot.createSVGPoint(); 
 
\t \t \t mySVGPoint1.x = segObj.x1 
 
\t \t \t mySVGPoint1.y = segObj.y1 
 
\t \t \t mySVGPointTrans1 = mySVGPoint1.matrixTransform(sCTM) 
 
\t \t \t segObj.x1=mySVGPointTrans1.x 
 
\t \t \t segObj.y1=mySVGPointTrans1.y 
 
\t \t } 
 
\t \t if(segObj.x2 && segObj.y2) 
 
\t \t { 
 
\t \t \t var mySVGPoint2 = svgRoot.createSVGPoint(); 
 
\t \t \t mySVGPoint2.x = segObj.x2 
 
\t \t \t mySVGPoint2.y = segObj.y2 
 
\t \t \t mySVGPointTrans2 = mySVGPoint2.matrixTransform(sCTM) 
 
\t \t \t segObj.x2=mySVGPointTrans2.x 
 
\t \t \t segObj.y2=mySVGPointTrans2.y 
 
\t \t } 
 
\t } 
 
\t //---force removal of transform-- 
 
\t path.setAttribute("transform","") 
 
\t path.removeAttribute("transform") 
 
} 
 

 
//---changes all transformed points to screen points--- 
 
function screenPolygon(myPoly) 
 
{ 
 
\t var sCTM = myPoly.getCTM() 
 
\t var svgRoot = myPoly.ownerSVGElement 
 

 
\t var pointsList = myPoly.points; 
 
\t var n = pointsList.numberOfItems; 
 
\t for(var m=0;m<n;m++) 
 
\t { 
 
\t \t var mySVGPoint = svgRoot.createSVGPoint(); 
 
\t \t mySVGPoint.x = pointsList.getItem(m).x 
 
\t \t mySVGPoint.y = pointsList.getItem(m).y 
 
\t \t mySVGPointTrans = mySVGPoint.matrixTransform(sCTM) 
 
\t \t pointsList.getItem(m).x=mySVGPointTrans.x 
 
\t \t pointsList.getItem(m).y=mySVGPointTrans.y 
 
\t } 
 
\t //---force removal of transform-- 
 
\t myPoly.setAttribute("transform","") 
 
\t myPoly.removeAttribute("transform") 
 
}

来源

2016-12-18 20:16:46

SVG元素与变换相交

回答

相关问题