如何修改lottery-wheel脚本实现奖品文本90度旋转指向中心？

要实现奖品文本旋转90度、首字符指向转盘中心的效果，你需要修改项目核心JS文件中的文本绘制逻辑，具体步骤如下：

1. 定位核心代码文件 #

打开项目中的 src/js/lottery-wheel.js，找到 LotteryWheel 类里的 draw 方法——这是负责绘制转盘所有元素（包括扇区和文本）的核心函数。

2. 找到文本绘制代码段 #

在 draw 方法内，会遍历所有奖品（this.options.prizes）进行扇区和文本绘制。找到类似以下的文本绘制代码块：

ctx.save();
ctx.translate(this.center.x, this.center.y);
ctx.rotate(angle);
ctx.fillStyle = this.options.fontStyle.color;
ctx.font = `${this.options.fontStyle.size} ${this.options.fontStyle.family}`;
ctx.textAlign = 'center';
ctx.fillText(prize.name, this.radius - this.options.fontStyle.offset, 0);
ctx.restore();

3. 修改文本旋转与对齐逻辑 #

将上述代码调整为以下内容，实现文本垂直旋转、首字符指向中心的效果：

ctx.save();
ctx.translate(this.center.x, this.center.y);
// 在原有扇区角度基础上追加90度旋转，让文本垂直
ctx.rotate(angle + Math.PI / 2);
ctx.fillStyle = this.options.fontStyle.color;
ctx.font = `${this.options.fontStyle.size} ${this.options.fontStyle.family}`;
// 设置文本右对齐，使首字符指向转盘中心
ctx.textAlign = 'right';
// 保持原有径向偏移，确保文本在扇区内
ctx.fillText(prize.name, this.radius - this.options.fontStyle.offset, 0);
ctx.restore();

4. 微调文本位置（可选） #

如果修改后文本仍有偏移或超出扇区，可以调整 this.radius - this.options.fontStyle.offset 的数值，或者在 fillText 的y轴参数上增加微小偏移（比如改为 5 或 -5），适配你的奖品名称长度。

修改完成后重新编译或引入修改后的JS文件，即可看到垂直排列、首字符指向中心的奖品文本，解决多奖品/长名称导致的重叠问题。

内容的提问来源于stack exchange，提问作者Edison Wong