Question

我目前正在为我的学校从事一个项目。我需要用C ++制作SVG景观生成器。我的老师给了我们不同的C ++函数，这些函数在output.svg上绘制svg形式。然后，我们在Web浏览器中打开文件，并显示生成的景观。他的函数编写HTML5标签来绘制<circle>和<polygon>之类的svg。

例如绘制六边形的函数：

void Svgfile::addHexagone(double x1,double y1,double x2,double y2,double x3,double y3,double x4,double y4,
                      double x5,double y5,double x6,double y6, std::string colorFill){
m_ostrm << "<polygon points=\"" << x1 << "," << y1 << " " << x2 << "," << y2 << " " << x3 << "," << y3
        << " " << x4 << "," << y4 << " " << x5 << "," << y5 << " " << x6 << "," << y6
        << "\" style=\"fill:" << colorFill << "\" ></polygon>";

问题是我的程序需要按比例缩放景观中的每个SVG对象以增加多样性。我使用addHexagone制作了一个非常简单的由灰色六边形表示的岩石。但是<polygon>使用6点的位置，我找到调整大小的唯一方法是将每个点的每个x和y乘以变量*size。它正在工作，但是它改变了我不需要的形状的位置。我已经阅读了有关SVG上ViewBox属性的一些文档，但没有设法使用它。我还尝试添加属性transform='size(10em)'，但未做任何更改。

Answer 1

要缩放对象而不更改其位置，必须首先找到其位置。定义该方法的一种方法是“质心” Find the center of mass of points方法（只需对每个点使用1作为“质量”，所以这是一个简单的平均值）。有了位置后，将其从对象的所有点中减去（在本例中为多边形），这将使其质心位于原点，然后按比例缩放新的点坐标，方法是乘以规模。然后，只需将质心的坐标重新添加到对象的每个点即可。

Answer 2

您可以使用transform属性，如示例所示：

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200">
<g>
    <circle cx="20" cy="20" r="10"/>
 </g>
<g transform="scale(2)">
    <circle cx="50" cy="50" r="10"/>
</g>
</svg>

Answer 3

我不确定我们为什么要为您完成任务...

很明显，在放置位置之前，需要先缩放比例点。创建一个函数，该函数生成所需的六边形点，然后调用addHexagon() fmethod。

类似这样的东西：

void generateHexagon(double centreX, double centreY, double hexagonSize, std::string fillColour)
{
  double[][]  pts = new double[6][2];
  for (int step=0; step<6; step++)
  {
    double angle = step * 60f;
    pts[step][0] = centreX + hexagonSize * cos(angle);
    pts[step][1] = centreY + hexagonSize * sin(angle);
  }
  Svgfile::addHexagone(pts[0][0], pts[0][1],
                       pts[1][0], pts[1][1],
                       pts[2][0], pts[2][1],
                       pts[3][0], pts[3][1],
                       pts[4][0], pts[4][1],
                       pts[5][0], pts[5][1],
                       fillColour);
}

缩放SVG而不更改其在C ++中的位置

3 个答案: