javascriptで回転したsvgテキストの境界をプログラムで取得する方法

私はSVGイメージを動的にレンダリングし、回転したテキストを作成しました。回転したテキストが他のテキストと重なっている場合は、そのテキストを削除する必要があります。しかし、私は境界を作成し、次のラベルのテキスト領域で確認するために回転したテキストを測定することはできません。javascriptで回転したsvgテキストの境界をプログラムで取得する方法

説明する3つのSVG要素を作成しました。

SVG-1重複したテキストを表示します。
SVG-2（角度-50）

私は動的に任意の角度にテキストを回転させる重なることなくオーバーラップ（角度-10）で回転テキスト

SVG-3が回転されたテキストを表示を表示します。テキストを回転させながら重なっている場合は、重複したテキストをプログラムで削除する必要があります。

Fiddle link

<div style=" width: 150px;height: 150px;"> 
 

 
    <svg style="width: 250px; height: 144px; border: solid black 1px;"> 
 
    <text id="XLabel_0" x="75" y="30">Sprint 13_March_2015</text> 
 
    <text id="XLabel_1" x="100" y="30">DT_Apr2015_Sprint13</text> 
 
    </svg> 
 

 
    <svg style="width: 250px; height: 144px; border: solid black 1px;"> 
 
    <text id="Label_0" x="75" y="30" transform="rotate(10, 75, 34.5)">Sprint 13_March_2015</text> 
 
    <text id="XLabel_1" x="100" y="30" transform="rotate(10, 100, 34.5)">DT_Apr2015_Sprint13</text> 
 
    </svg> 
 

 
    <svg style="width: 250px; height: 144px; border:solid black 1px;"> 
 
    <text id="XLabel_0" x="75" y="30" transform="rotate(50,94,34.5)">Sprint 13_March_2015</text> 
 
    <text id="XLabel_1" x="100" y="30" transform="rotate(50,123,61)" >DT_Apr2015_Sprint13</text> 
 
    </svg> 
 
    
 
</div>

誰もが解決策を提案することはできますか？

出典

2017-03-20 Bharathi

なぜあなたは回転のテキストを測定することはできませんか？ getBBoxまたはgetBoundingClientRectの何が問題ですか？ –

getBoundingClientRect手段を使用すると、SVG-3 2'ndのテキストが削除されます。最初のテキスト（x + width）領域は2'ndテキストxの位置と重なっているためです。最後のSVG出力を参照してください。 – Bharathi

あなたのやっていることを示してください。あなたのコードにはJavaScriptがありません。 –

これはちょっと難しいかもしれませんが、テキスト要素ごとにポリゴンを計算し、それらが交差するかどうかを確認することができます。私は、以下の例では、あなたのラベルの1つを使用：

<!DOCTYPE HTML> 
 
<html> 
 

 
<body> 
 
    <svg style="width: 250px; height: 144px; border: solid black 1px;"> 
 
    <text id="label1" x="75" y="30" transform="rotate(10, 75, 34.5)">Sprint 13_March_2015</text> 
 
    <text id="label2" x="100" y="30" transform="rotate(10, 100, 34.5)">DT_Apr2015_Sprint13</text> 
 
    <polygon id=polygon1 fill="none" stroke="blue" stroke-dasharray="5 5" stroke-width=1 /> 
 
    <polygon id=polygon2 fill="none" stroke="red" stroke-dasharray="5 5" stroke-width=1 /> 
 
    </svg> 
 
<br> 
 
<button onClick=testOverlap()>Test Overlap</button> 
 
<script> 
 
function testOverlap() 
 
{ 
 
    //---show 'native' rects--- 
 
    var trns1=label1.getAttribute("transform") 
 
    label1.removeAttribute("transform") 
 
    var bb1=label1.getBBox() 
 
    var bb1x=bb1.x 
 
    var bb1y=bb1.y 
 
    var bb1w=bb1.width 
 
    var bb1h=bb1.height 
 
    label1.setAttribute("transform",trns1) 
 

 
    var pnts1=[bb1x,bb1y,bb1x,bb1y+bb1h,bb1x+bb1w,bb1y+bb1h,bb1x+bb1w,bb1y] 
 
    polygon1.setAttribute("points",pnts1.join()) 
 
    polygon1.setAttribute("transform",trns1) 
 
    //---remove transform from polygon-- 
 
    ctmPolygon(polygon1) 
 

 

 
    var trns2=label2.getAttribute("transform") 
 
    label2.removeAttribute("transform") 
 
    var bb2=label2.getBBox() 
 
    var bb2x=bb2.x 
 
    var bb2y=bb2.y 
 
    var bb2w=bb2.width 
 
    var bb2h=bb2.height 
 

 
    label2.setAttribute("transform",trns2) 
 
    var pnts2=[bb2x,bb2y,bb2x,bb2y+bb2h,bb2x+bb2w,bb2y+bb2h,bb2x+bb2w,bb2y] 
 
    polygon2.setAttribute("points",pnts2.join()) 
 
    polygon2.setAttribute("transform",trns2) 
 
    //---remove transform from polygon-- 
 
    ctmPolygon(polygon2) 
 

 

 
    alert(getPolygonIntersect(polygon1,polygon2)) 
 

 
} 
 
//---screen points for polygon--- 
 
function ctmPolygon(myPoly) 
 
{ 
 
\t var ctm = 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(ctm) 
 
\t \t pointsList.getItem(m).x=mySVGPointTrans.x 
 
\t \t pointsList.getItem(m).y=mySVGPointTrans.y 
 
\t }; 
 

 
\t myPoly.removeAttribute("transform") 
 
} 
 
function getPolygonIntersect(polygonA,polygonB) 
 
{ 
 
\t var IntPoints=[] 
 
\t var aPoints=polygonA.points 
 
\t var m=aPoints.numberOfItems 
 
\t for(var i=0;i<m;i++) 
 
\t { 
 
\t \t var aX1=aPoints.getItem(i).x 
 
\t \t var aY1=aPoints.getItem(i).y 
 

 
\t \t if(i<m-1) 
 
\t \t { 
 
\t \t \t var aX2=aPoints.getItem(i+1).x 
 
\t \t \t var aY2=aPoints.getItem(i+1).y 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t var aX2=aPoints.getItem(0).x 
 
\t \t \t var aY2=aPoints.getItem(0).y 
 
\t \t } 
 

 
\t \t var bPoints=polygonB.points 
 
\t \t var n=bPoints.numberOfItems 
 

 
\t \t for(var k=0;k<n;k++) //--each side of polygon--- 
 
\t \t { 
 
\t \t \t var bX1=bPoints.getItem(k).x 
 
\t \t \t var bY1=bPoints.getItem(k).y 
 

 
\t \t \t if(k<n-1) 
 
\t \t \t { 
 
\t \t \t \t var bX2=bPoints.getItem(k+1).x 
 
\t \t \t \t var bY2=bPoints.getItem(k+1).y 
 
\t \t \t } 
 
\t \t \t else 
 
\t \t \t { 
 
\t \t \t \t var bX2=bPoints.getItem(0).x 
 
\t \t \t \t var bY2=bPoints.getItem(0).y 
 
\t \t \t } 
 
\t \t \t //---return false or intersect point--- 
 
\t \t \t var xy=lineSegIntersect(aX1,aY1,aX2,aY2,bX1,bY1,bX2,bY2) 
 
\t \t \t if(xy) 
 
\t \t \t { 
 
\t \t \t \t if(IntPoints.join().indexOf(xy)==-1)//--no dups-- 
 
\t \t \t \t { 
 
\t \t \t \t \t IntPoints.push(xy) 
 
\t \t \t \t } 
 

 
\t \t \t } 
 
\t \t } 
 
\t } 
 
    if(IntPoints.length>0) 
 
     return true 
 
    else 
 
     return false 
 
} 
 
//---compare two lines: A.B--- 
 
function lineSegIntersect(aX1,aY1,aX2,aY2,bX1,bY1,bX2,bY2) 
 
{ 
 
\t //---compute vectors Va, Vb-------- 
 
\t var Va=((bX2-bX1)*(aY1-bY1) - (bY2-bY1)*(aX1-bX1))/ ((bY2-bY1)*(aX2-aX1) - (bX2-bX1)*(aY2-aY1)) 
 
\t var Vb=((aX2-aX1)*(aY1-bY1) - (aY2-aY1)*(aX1-bX1))/((bY2-bY1)*(aX2-aX1) - (bX2-bX1)*(aY2-aY1)) 
 

 
\t if(Va>0 && Va<1 && Vb>0 && Vb<1) 
 
\t { 
 
\t //---intersect true, show point--- 
 
\t \t var ma=(aY2-aY1)/(aX2-aX1) 
 
\t \t var mb=(bY2-bY1)/(bX2-bX1) 
 
\t \t if(aX2!=aX1&&bX2!=bX1) //---!vertical line--- 
 
\t \t { 
 
\t \t \t var x=(aX1*ma-aY1-bX1*mb+bY1)/(ma-mb) 
 
\t \t \t var y=ma*(x-aX1)+aY1 
 
\t \t } 
 
\t \t else if(aX2==aX1) 
 
\t \t { 
 
\t \t \t var x=aX1 
 
\t \t \t var y=mb*(x-bX1)+bY1 
 
\t \t } 
 
\t \t else if(bX2==bX1) 
 
\t \t { 
 
\t \t \t var x=bX1 
 
\t \t \t var y=ma*(x-aX1)+aY1 
 
\t \t } 
 

 
\t \t return [x,y] 
 
    } 
 
\t else 
 
\t return false 
 
} 
 

 
</script> 
 
</body> 
 

 
</html>

出典

2017-03-20 19:28:34

ヘンシャーさんありがとうございました..あなたの努力に感謝します。 – Bharathi

javascriptで回転したsvgテキストの境界をプログラムで取得する方法

答えて

関連する問題