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
相关问题
Canvas深色/浅色主题切换
328浏览 • 1回复 待解决
JS UI框架canvas如何动态指定宽高
6745浏览 • 1回复 待解决
如何实现图片裁剪、旋转
350浏览 • 1回复 待解决
HarmonyOS 如何实现Y轴旋转
179浏览 • 1回复 待解决
如何操作canvas重新绘制
955浏览 • 1回复 待解决
canvas如何实现水印效果
858浏览 • 1回复 待解决
HarmonyOS 如何实现旋转动画
308浏览 • 1回复 待解决
HarmonyOS Canvas关于绘制图片问题
230浏览 • 1回复 待解决
HarmonyOS Canvas如何重置clip
177浏览 • 1回复 待解决
HarmonyOS如何设置应用跟随屏幕旋转
249浏览 • 1回复 待解决
Canvas绘制内容如何动态更新
1340浏览 • 1回复 待解决
如何实现应用的屏幕自动旋转
2171浏览 • 1回复 待解决
HarmonyOS 手势响应不同角度问题
175浏览 • 1回复 待解决
如何使用canvas添加水印
1233浏览 • 1回复 待解决
如何使用canvas绘制圆角矩形
399浏览 • 1回复 待解决