javascript - 如何以编程方式在javascript中获取旋转的svg文本边界-6ren

javascript - 如何以编程方式在javascript中获取旋转的svg文本边界

转载作者：太空狗更新时间：2023-10-29 15:53:54

24

4

我正在动态渲染 SVG 图像并创建旋转文本。如果旋转的文本与其他文本重叠，我需要删除该文本。但我无法测量旋转的文本以创建边界并检查下一个标签文本区域。

我创建了 3 个 SVG 元素来解释。

SVG-1 显示重叠的文本。
SVG-2 显示重叠的旋转文本(Angle-10)
SVG-3 显示不重叠的旋转文本(Angle-50)

我会动态地将文本旋转到任意 Angular 。如果它在旋转文本时重叠，我需要以编程方式删除重叠的文本。

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>

谁能提出解决方案？

最佳答案

这可能有点棘手，但您可以为每个文本元素计算多边形，然后查看它们是否相交。我在下面的示例中使用了您的一个标签:

<!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)
{
	var ctm = myPoly.getCTM()
	var svgRoot = myPoly.ownerSVGElement

	var pointsList = myPoly.points;
	var n = pointsList.numberOfItems;


	for(var m=0; m < n; m++)
	{
		var mySVGPoint = svgRoot.createSVGPoint();
		mySVGPoint.x = pointsList.getItem(m).x
		mySVGPoint.y = pointsList.getItem(m).y
		mySVGPointTrans = mySVGPoint.matrixTransform(ctm)
		pointsList.getItem(m).x=mySVGPointTrans.x
		pointsList.getItem(m).y=mySVGPointTrans.y
	};

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

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

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

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

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

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

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

		return [x,y]
    }
	else
	return false
}

</script>
</body>

</html>

关于javascript - 如何以编程方式在javascript中获取旋转的svg文本边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42901370/

24

4

0

文章推荐： android - 如何使用 libgdx 在 android 中保存游戏状态/首选项

文章推荐：混淆两个不同字符数组的输出

文章推荐： java - Android 版 Google map V2 无法正常工作？

文章推荐： c - 如何在定义的位置附加一个字符

c - 在英特尔 x64 汇编中执行函数的最快(CPU 方式)方式？
我一直在阅读有关汇编函数的内容，但对于是使用进入和退出还是仅使用调用/返回指令来快速执行，我感到很困惑。一种方式快而另一种方式更小吗？例如，在不内联函数的情况下，在汇编中执行此操作的最快(stdcal
解析元组的 Pythonic 方式
我正在处理一个元组列表，如下所示: res = [('stori', 'JJ'), ('man', 'NN'), ('unnatur', 'JJ'), ('feel', 'NN'), ('pig',
使用线程的 Pythonic 方式
最近我一直在做很多网络或 IO 绑定(bind)操作，使用线程有助于加快代码速度。我注意到我一直在一遍又一遍地编写这样的代码: threads = [] for machine, user, data
请求资源子集的 RESTful 方式
假设我有一个名为 user_stats 的资源，其中包含用户拥有的帖子、评论、喜欢和关注者的数量。是否有一种 RESTful 方式只询问该统计数据的一部分(即，对于 user_stats/3，请告诉我
接受选择的 RESTful 方式
我有一个简单的 api，它的工作原理是这样的: 用户创建一个请求 ( POST /requests ) 另一个用户检索所有请求 ( GET /requests ) 然后向请求添加报价 ( POST /
扩展构建器模式的 Pythonic 方式
考虑以下 CDK Python 中的示例(对于这个问题，不需要 AWS 知识，这应该对基本上任何构建器模式都有效，我只是在这个示例中使用 CDK，因为我使用这个库遇到了这个问题。): from aws
用于管理对象池的 Scala 方式
Scala 中管理对象池的首选方法是什么？我需要单线程创建和删除大规模对象(不需要同步)。在 C++ 中，我使用了静态对象数组。在 Scala 中处理它的惯用和有效方法是什么？最佳答案我会把它
将多个类方法应用于对象列表的 Pythonic 方式
我有一个带有一些内置方法的类。这是该类的抽象示例: class Foo: def __init__(self): self.a = 0 self.b = 0
返回和检查方法执行的 Pythonic 方式
返回和检查方法执行的 Pythonic 方式我目前在 python 代码中使用 golang 编码风格，决定移动 pythonic 方式例子: import sys from typing imp
处理丢失数据的 RESTful 方式
我正在开发一个 RESTful API。其中一个 URL 允许调用者通过 id 请求特定人员的记录。返回该 id 不存在的记录的常规值是什么？服务器是否应该发回一个空对象或者一个 404，或者其他什
加载具有相似文件名的文件的 Pythonic 方式
我正在使用 pathlib.Path() 检查文件是否存在，并使用 rasterio 将其作为图像打开. filename = pathlib.Path("./my_file-name.tif") 但
创建嵌套字典的 Pythonic 方式
我正在寻找一种 Pythonic 方式来从列表和字典创建嵌套字典。以下两个语句产生相同的结果: a = [3, 4] b = {'a': 1, 'b': 2} c = dict(zip(b, a))
处理异常后恢复的 Pythonic 方式
我有一个正在操裁剪理设备的脚本。设备有时会发生物理故障，当它发生时，我想重置设备并继续执行脚本。我有这个: while True: do_device_control() device
做组合别名的 Pythonic 方式
做组合别名的最pythonic和正确的方法是什么？这是一个假设的场景: class House: def cleanup(self, arg1, arg2, kwarg1=False):
在一个请求中创建多个项目的 RESTful 方式
我正在开发一个小型客户端服务器程序来收集订单。我想以“REST(ful)方式”来做到这一点。我想做的是: 收集所有订单行(产品和数量)并将完整订单发送到服务器目前我看到有两种选择: 将每个订单行发
动态调用静态方法的 Groovy 方式
我知道在 Groovy 中您可以使用字符串调用类/对象上的方法。例如: Foo."get"(1) /* or */ String meth = "get" Foo."$meth"(1) 有没有办法
复制没有不同属性的字典的 Pythonic 方式
在 ECMAScript6 中，您可以使用扩展运算符来解构这样的对象 const {a, ...rest} = obj; 它将 obj 浅拷贝到 rest，不带属性 a。有没有一种干净的方法可以在
函数中条件返回的 Pythonic 方式
我有几个函数返回数字或None。我希望我的包装函数返回第一个不是 None 的结果。除了下面的方法之外，还有其他方法吗？ def func1(): return None def func2(
处理资源之间双向关系的 RESTful 方式
假设我想设计一个 REST api 来讨论歌曲、专辑和艺术家(实际上我就是这样做的，就像我之前的 1312414 个人一样)。歌曲资源始终与其所属专辑相关联。相反，专辑资源与其包含的所有歌曲相关联。
有条件地使用上下文管理器的 Pythonic 方式
这是我认为必须经常出现的问题，但我一直无法找到一个好的解决方案。假设我有一个函数，它可以作为参数传递一个开放资源(如文件或数据库连接对象)，或者需要自己创建一个。如果函数需要自己打开文件，最佳实践通常

首页

博学

6Ren·AI

商城

javascript - 如何以编程方式在javascript中获取旋转的svg文本边界