Angular 2是一种流行的前端开发框架,它使用TypeScript编写,并且具有许多强大的功能和工具。在Angular 2中,可以使用Have方法来打印出svg多边形的点。
首先,需要在Angular 2项目中引入svg多边形的相关模块。可以使用以下代码导入svg模块:
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'app-svg-polygon',
template: `
<svg [innerHTML]="svgPolygon"></svg>
`,
})
export class SvgPolygonComponent {
svgPolygon: SafeHtml;
constructor(private sanitizer: DomSanitizer) {
this.svgPolygon = this.getPolygonPoints();
}
getPolygonPoints(): SafeHtml {
const points = [
[100, 100],
[200, 50],
[300, 150],
[250, 300],
[150, 300]
];
let svg = '<polygon points="';
points.forEach(point => {
svg += `${point[0]},${point[1]} `;
});
svg += '" style="fill:blue;stroke:black;stroke-width:2" />';
return this.sanitizer.bypassSecurityTrustHtml(svg);
}
}
在上述代码中,我们创建了一个名为SvgPolygonComponent的组件,并在构造函数中调用了getPolygonPoints()方法来获取svg多边形的点。getPolygonPoints()方法使用一个二维数组来定义多边形的各个点的坐标。然后,我们使用forEach循环遍历这些点,并将它们拼接成一个svg多边形的字符串。最后,我们使用DomSanitizer来确保这个字符串是安全的,并将其赋值给svgPolygon变量。
在组件的模板中,我们使用[innerHTML]属性来动态地将svgPolygon变量的值渲染为svg元素。
这样,当SvgPolygonComponent组件被渲染时,它将在页面上显示一个具有指定多边形点的svg图形。
推荐的腾讯云相关产品和产品介绍链接地址:
请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和项目要求进行评估。
领取专属 10元无门槛券
手把手带您无忧上云