要打印出SVG多边形的点,你可以使用Angular 2的方法来动态生成SVG代码,并通过循环生成多边形的点。
首先,你需要在Angular组件中定义多边形的点坐标数组。假设你的多边形有三个点,你可以这样定义:
points: Array = [[50, 50], [150, 50], [100, 150]];
然后,在模板中使用Angular的循环指令来生成多边形的点。你可以使用ngFor
指令来遍历多边形的点数组,并使用插值表达式来动态生成SVG代码。
在组件中,你需要定义一个方法getPointsString()
来将多边形的点数组转换为字符串。你可以使用Array.map()
方法来遍历多边形的点数组,并将每个点的坐标转换为字符串。
getPointsString(): string {
return this.points.map(point => point.join(',')).join(' ');
}
最后,你将在SVG的polygon
元素上设置[attr.points]
属性绑定,将生成的多边形点字符串传递给SVG元素。
这样,当组件渲染时,SVG多边形将根据多边形的点数组动态生成。
完整的代码示例如下:
import { Component } from '@angular/core';
@Component({
selector: 'app-svg-polygon',
template: `
`,
})
export class SvgPolygonComponent {
points: Array = [[50, 50], [150, 50], [100, 150]];
getPointsString(): string {
return this.points.map(point => point.join(',')).join(' ');
}
}
希望这可以帮助到你!