如何绘制与SVG上给定图像数据完全相同的折线对象

问题描述 投票:1回答:2

Doughnut picture

例如,给定图像如上所述,我想要做的是在SVG上绘制完全相同形状的折线对象(我创建'绘图'或者我应该说基于SVG的'刷'工具,这就是为什么我使用折线使得用户可以用他的鼠标绘画,甚至可以用他或她的鼠标使用橡皮擦)。以下是我将如何实现这一目标。

  1. 在画布上下文中绘制给定的图像。
  2. 获取着色为#000000的像素的所有坐标。
  3. 使用该坐标列表在SVG上创建折线。

通过这个过程我得到了这个结果doughnut drawin with svg polyline(现在这只是一个示例结果,它形成丑陋,因为我必须用我的手手动绘制它。但我的目的是获得与输入图像相同的形状)

但我不确定这是否是唯一的方法,甚至不确定我是否应该坚持使用SVG。有没有其他好方法来实现这一目标?或者使用canvas而不是SVG让它更容易?

javascript svg canvas
2个回答
2
投票

这个形状可以用圆圈绘制。 使用由圆圈组成的面具制作镂空

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="405" height="401" viewBox="0 0 405 401" >  
<defs>
<mask id="msk1" >
	<rect width="100%" height="100%" fill="white" />
<g fill="black">
	<circle cx="202" cy="200" r="40"   />
	<circle cx="260" cy="298" r="40"   />
	<circle cx="215" cy="303" r="20"   />
</g>
</mask>
</defs>	
<circle cx="202" cy="200" r="98"  fill="black" mask="url(#msk1)" />

1
投票

这假设您已经拥有SVG路径。

要绘制多边形,您需要通过M命令拆分路径。在下一个示例中,我手动完成,但您可以动态执行此操作。这很重要,否则你会在多边形中得到一个分裂。

您还需要设置精度,即多边形点之间的距离。

请阅读我的代码中的注释。

let paths = document.querySelectorAll("#theGroup path");
let precision = 5;//how far one of other the points of the polygon are
let points = [];// the array of points

// for each path in the array of paths 
paths.forEach(p=>{
  // get the total length
  let totalLength = p.getTotalLength();
  // get the number of points for the polygon in base of the precision
  let numPoints = ~~(totalLength / precision);
  // calculate the segment length
  let segmentLength = totalLength / numPoints;
 
  for(let i = 0; i <= numPoints; i++ ){
  let point = p.getPointAtLength(i*segmentLength);
  // get the coordinates of this point and push it
  points.push(point.x);
  points.push(point.y);
}
})

//set the value for the points attribute of the polygon
poly.setAttributeNS(null,"points", points.join())
svg{border:1px solid; width:90vh;}
path{fill:none}
<svg viewBox="0 0 531 531">
<g id="theGroup">
	<path id="donut" d="M268.64,76.066c70.065,2.632,125.154,32.347,163.73,91.372
		c14.944,22.864,23.47,48.161,27.698,75.22c3.987,25.512,2.188,50.551-3.64,75.354c-4.821,20.522-13.383,39.648-24.866,57.406
		c-2.003,3.099-3.899,3.396-7.365,1.548c-30.011-16.005-64.509-10.767-87.731,14.13c-6.295,6.748-9.985,15.893-15.108,23.783
		c-1.548,2.384-3.508,5.256-5.938,6.189c-19.202,7.375-32.874,20.547-41.279,39.064c-1.911,4.211-4.254,5.562-8.308,5.085
		c-13.198-1.554-26.507-2.515-39.562-4.873c-30.46-5.502-57.275-19.262-81.055-38.724c-28.703-23.491-49.496-52.646-61.424-88.046
		c-7.479-22.198-11.34-44.892-10.42-68.225c2.042-51.761,20.944-96.305,57.854-133.023c22.272-22.156,48.427-37.859,78.3-47.183
		C228.671,79.17,248.365,75.884,268.64,76.066z"/> 
                      
<path id="hole" d="M340.466,271.259c0.179-40.212-32.175-73.14-72.067-73.348
		c-40.072-0.208-73.264,32.326-73.485,72.032c-0.226,40.441,32.218,73.372,72.436,73.522
		C307.646,343.616,340.286,311.382,340.466,271.259z"/>
</g>
  
  <polygon id="poly" fill="gold" points = "" />
</svg>

推荐问答