gpt4 book ai didi

javascript - 将 SVG 路径转换为矩形

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:24:39 25 4
gpt4 key购买 nike

我想为光栅图像自动生成图像映射类型的结果。我能够以 PNG 格式提供此图像:enter image description here

原始的 SVG 看起来像这样:

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<g>
<rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<rect id="svg_1" height="67" width="54" y="119.5" x="125.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
<rect id="svg_3" height="67" width="54" y="119.5" x="180.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
</g>
</svg>

一旦我使用库追踪它:https://github.com/jankovicsandras/imagetracerjs我得到这样的返回路径数据:

<svg width="156" height="114" version="1.1" xmlns="http://www.w3.org/2000/svg" desc="Created with imagetracer.js version 1.2.3" >
<path fill="rgb(60,60,60)" stroke="rgb(60,60,60)" stroke-width="1" opacity="1" d="M 20 20 L 131 20 L 131 89 L 20 89 L 20 20 Z M 22 22 L 22 87 L 74 87 L 74 22 L 22 22 Z M 77 22 L 77 87 L 129 87 L 129 22 L 77 22 Z " />
<path fill="rgb(255,255,255)" stroke="rgb(255,255,255)" stroke-width="1" opacity="1" d="M 0 0 L 156 0 L 156 114 L 0 114 L 0 0 Z M 20 20 L 20 89 L 131 89 L 131 20 L 20 20 Z " />
<path fill="rgb(255,255,255)" stroke="rgb(255,255,255)" stroke-width="1" opacity="1" d="M 22 22 L 74 22 L 74 87 L 22 87 L 22 22 Z " />
<path fill="rgb(255,255,255)" stroke="rgb(255,255,255)" stroke-width="1" opacity="1" d="M 77 22 L 129 22 L 129 87 L 77 87 L 77 22 Z " />
</svg>

我想回到 rect 或多边形方法,这样我就可以测量每个对象的面积,这样如果有跟踪文本,我可以通过说它是总面积来排除它/压平它低于允许的多边形/矩形对象。

有没有办法将路径数据转换回我有 2 个独立对象的位置?我希望能够将结果叠加在原始图像上并允许定位每个方 block

最佳答案

我会尽力回答您的问题,但这里有多种解决方案。

如果强制 imagetracerjs 只使用直线边缘(qtres = 0.00001),那么 SVG 路径元素是多边形,它们的坐标定义在 d 属性中:d="M 20 20 L 131 20 ... "第一个例子。 (更多信息:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d)但是 1 d 属性通常不仅仅是 1 个多边形。该形状可以包含孔洞,它们表示为较小的多边形。 (更多信息:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule)

您可以提取 d 属性,例如正则表达式,将它们按 Z 标记拆分(大致意思是:此形状结束,孔形状开始),然后在坐标上使用高斯面积公式 ( https://en.wikipedia.org/wiki/Shoelace_formula ) 来获取面积。您可能需要从父形状的面积中减去孔的面积。

您的图像上有 4 个独立的对象,但其中一些并不微不足道。我尝试“翻译”您的 SVG 结果,以便您可以决定要处理的路径。ImageTracer 输出首先按颜色排序。 1. 路径是两个较小矩形周围的黑色框架,从技术上讲,这是一个带有两个矩形孔的黑色矩形。 2.路径是黑色框架周围的白色框架,技术上是一个带有大矩形孔的白色矩形。 3. 和 4. 路径是较小的白色矩形,可能与您相关。

除了拆分和解析 SVG 字符串之外,还有一种替代方法,但遗憾的是,它有点没有文档记录。您可以先获取一个 tracedata 对象,对其进行处理,然后可选择将其呈现为 SVG 字符串。 (更多信息:https://github.com/jankovicsandras/imagetracerjs#examples)


var options = {qtres:0.0001};

ImageTracer.imageToTracedata(
'example.png',
function(tracedata){

// color layers loop
for(var i=0; i<tracedata.layers.length; i++){
// paths loop
for(var j=0; j<tracedata.layers[i].length; j++){

var thispath = tracedata.layers[i][j];

// processing this path if it's not a hole
if( !thispath.isholepath ){

// accumulating coordinates in [ [x,y] , [x,y] , ... ] polygon
var thispolygon = [];
thispolygon.push( [ thispath.segments[0].x1 , thispath.segments[0].y1 ] );
for(var k=0; k<thispath.segments.length; k++){ thispolygon.push( [ thispath.segments[k].x2 , thispath.segments[k].y2 ] ); }

// TODO: calculate thispolygon area with https://en.wikipedia.org/wiki/Shoelace_formula here
}


}// End of paths loop
}// End of color layers loop


},// End of imageToTracedata callback()

options

);// End of ImageTracer.imageToTracedata()


希望这些对您有所帮助。 :)

关于javascript - 将 SVG 路径转换为矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49884777/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com