fix: avatarの縦横比が1:1ではない場合に画像がゆがむ問題を修正

This commit is contained in:
kakkokari-gtyih 2025-07-21 17:15:27 +09:00
parent 2b0801dfdd
commit 05b6244b64
1 changed files with 5 additions and 1 deletions

View File

@ -412,11 +412,15 @@ function drawVisualizer() {
//
const avatarSize = radius;
const avatarHeight = Math.max(userAvatarImage.value.height * (avatarSize / userAvatarImage.value.width), avatarSize);
const avatarWidth = Math.max(userAvatarImage.value.width * (avatarSize / userAvatarImage.value.height), avatarSize);
const avatarDx = centerX - avatarWidth / 2;
const avatarDy = centerY - avatarHeight / 2;
canvasCtx.value.save();
canvasCtx.value.beginPath();
canvasCtx.value.arc(centerX, centerY, avatarSize / 2, 0, Math.PI * 2);
canvasCtx.value.clip();
canvasCtx.value.drawImage(userAvatarImage.value, centerX - avatarSize / 2, centerY - avatarSize / 2, avatarSize, avatarSize);
canvasCtx.value.drawImage(userAvatarImage.value, avatarDx, avatarDy, avatarWidth, avatarHeight);
canvasCtx.value.restore();
if (isActuallyPlaying.value) {