Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

如何让图片上面的文字, 跟着图片一起按照中心点旋转,而不是横向移动? #797

Closed
sssKKwater opened this issue Aug 16, 2021 · 7 comments

Comments

@sssKKwater
Copy link

  this.getPaiZi('活动', this.zrW / 2, 220)
//创建一个标题牌子(文字,横纵坐标)
getPaiZi(text, x, y) {
  let paiZi = new zrender.Image({
    style: {
      position: [0, 0],
      image: shuPaiZi,
      width: 52,
      height: 40,
      y: y,
      x: x
    },
    textContent: new zrender.Text({
      style: {
        text: text,
        fontWeight: '800',
        fontSize: '14',
        textFill: '#333333',
        **textPosition: 'bottom',
        transformText: true,**  //这个代码并没有用
        x: (52 - 28) / 2,
        y: 20
      }
    }),
    textConfig: {
      position: 'center',
      origin: [x + 28, y]
    }
  }).on('click', () => {
    paiZi.animate('')
      .when(100, {
        origin: [x + 28, y],
        rotation: 0
      })
      .when(1000, {
        origin: [x + 28, y],
        rotation: -0.3
      })
      .when(2000, {
        origin: [x + 28, y],
        rotation: 0.3
      })
      .when(3000, {
        origin: [x + 28, y],
        rotation: 0
      }).start()
  })
  this.zr.add(paiZi)
}

image

按理说图片上面的文字,应该是跟图片一样的倾斜角的,现在并没有发生对应的旋转而是对应角度平移

@sssKKwater
Copy link
Author

一人血书,求更新文档 QAQ

@plainheart
Copy link
Collaborator

动画的时候可以给 text 也加上 rotation

paiZi.animate('')
  .when(100, {
      rotation: 0
  })
  .when(1000, {
      rotation: -0.3
  })
  .when(2000, {
      rotation: 0.3
  })
  .when(3000, {
      rotation: 0
  })
  .during(el => {
      el.getTextContent().rotation = el.rotation;
  })
  .start()

@sssKKwater
Copy link
Author

动画的时候可以给 text 也加上 rotation

paiZi.animate('')
  .when(100, {
      rotation: 0
  })
  .when(1000, {
      rotation: -0.3
  })
  .when(2000, {
      rotation: 0.3
  })
  .when(3000, {
      rotation: 0
  })
  .during(el => {
      el.getTextContent().rotation = el.rotation;
  })
  .start()

image
image

不行啊。。。这个文字的位移更奇怪了哈哈

@plainheart
Copy link
Collaborator

思路大概是这样,可能你还需要调整下 origin。

@plainheart
Copy link
Collaborator

写了个小demo,你可以参考下。https://codepen.io/plainheart/pen/mdmggWj

@sssKKwater
Copy link
Author

写了个小demo,你可以参考下。https://codepen.io/plainheart/pen/mdmggWj
thankU,找到问题所在了
textConfig: {
position: 'insideBottom' //使用了insideBottom而不是inside,所以他没跟着跑
},

@sssKKwater
Copy link
Author

写了个小demo,你可以参考下。https://codepen.io/plainheart/pen/mdmggWj

多谢多谢,您真厉害,麻烦问一下有没有相关的群?想学习一下QwQ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants