Canvas 中 fillText 如何旋转角度

想要实现文字按自身旋转90度单独写this.context.fillText(this.appearanceBean.length, w * 0.28, h * 0.87)可以展示文字,但是添加this.context.rotate(90 * Math.PI/180)后文字就消失了 并没有实现我想要的效果。

HarmonyOS
2024-09-23 14:00:35
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

rotate旋转是以左上角坐标(0,0)为原点顺时针开始旋转,原有fillText的内容以(0,0)为原点旋转90度后会展示在屏幕外,此时y轴坐标需要调整为负值,并且x轴和y轴坐标对调,才会在页面展示。需要根据旋转角度调整x轴和y轴坐标,才能保持元素在页面相对位置不会改变。例如:

this.context.fillText(this.appearanceBean.length, h * 0.8 , -w * 0.28)
分享
微博
QQ
微信
回复
2024-09-23 17:25:25
相关问题
HarmonyOS 如何获取图片的角度
61浏览 • 1回复 待解决
Canvas深色/浅色主题切换
434浏览 • 1回复 待解决
JS UI框架canvas如何动态指定宽高
6909浏览 • 1回复 待解决
HarmonyOS 关于canvas 动态设置lineto
37浏览 • 1回复 待解决
如何实现图片裁剪、旋转
472浏览 • 1回复 待解决
HarmonyOS Canvas如何重置clip
273浏览 • 1回复 待解决
HarmonyOS 如何实现旋转动画
457浏览 • 1回复 待解决
HarmonyOS 如何实现Y轴旋转
276浏览 • 1回复 待解决
HarmonyOS 手势响应不同角度问题
280浏览 • 1回复 待解决
canvas如何实现水印效果
952浏览 • 1回复 待解决
如何操作canvas重新绘制
1104浏览 • 1回复 待解决