如何翻转数字,在我的案例中为svg中的圆圈添加边框?

时间:2018-02-07 08:13:53

标签: angular svg

我像这样做了一个圆圈,就像一个时钟。这是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;}

现在有一些我无法解决的问题:

  • 1。如何使数字平滑而不倒置?
  • 2。如何添加边框,即如下图所示拆分它们。
  • 3。为什么内圈不正确?我可以为每个圆圈编写一个单独的函数吗?

这是我想要看到的图片。

enter image description here

1 个答案:

答案 0 :(得分:0)

与围绕圆心旋转文本位置的方式相同,您需要围绕自己的中心旋转文本,但方向相反。

我已经在这个插件中攻击了一个解决方案:

https://plnkr.co/edit/cpkaJwdiVqj6vT2rdteO?p=preview

我所做的更改如下:

  1. 文本的转换需要与标记行不同,因此我创建了一个新数组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();
    }
    
  2. 用于计算文本元素的转换属性的新函数:

    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()的版本来获取旋转中心的坐标。它等同于您正在进行的转换,但更简洁。