我像这样做了一个圆圈,就像一个时钟。这是link。 来自plnkr的一些代码:
getTransformMatrix() {
let t;
const res = [];
const x = this.items.length - 2;
for (let i = 0; i < this.items.length; i++) {
t = -360 / this.items.length * i + (-360 / this.items.length * x);
res.push('translate(' + 55 + ' ' + 55 + ')' + 'rotate(' + t + ')' + 'translate(' + (-55) + ' ' + (-55) + ')');
}
return res;}
现在有一些我无法解决的问题:
这是我想要看到的图片。
答案 0 :(得分:0)
与围绕圆心旋转文本位置的方式相同,您需要围绕自己的中心旋转文本,但方向相反。
我已经在这个插件中攻击了一个解决方案:
https://plnkr.co/edit/cpkaJwdiVqj6vT2rdteO?p=preview
我所做的更改如下:
文本的转换需要与标记行不同,因此我创建了一个新数组textTransform
。
<text *ngFor="let l of items; let i = index" x="53.7" y="105" fill="#F8B133"
font-size="3" [attr.transform]="textTransform[i]">{{i+1}}</text>
textTransform = [];
ngOnInit() {
this.transform = this.getTransformMatrix();
this.textTransform = this.getTextTransformMatrix();
}
用于计算文本元素的转换属性的新函数:
getTextTransformMatrix() {
let t;
const res = [];
const x = this.items.length - 2;
for (let i = 0; i < this.items.length; i++) {
t = -360 / this.items.length * i + (-360 / this.items.length * x);
res.push('rotate(' + t + ', 55,55) rotate(' + (-t) + ', 54,104)');
}
return res;
}
请注意,我使用了rotate()
的版本来获取旋转中心的坐标。它等同于您正在进行的转换,但更简洁。