Пересекающаяся проблема отсечения - PullRequest
Новая
       32

Пересекающаяся проблема отсечения

2 голосов
/ 27 мая 2019

У меня проблема с захватом пользователей displayAvatar(), а затем я использую дугу, чтобы сделать изображение круглым. Это работает нормально, однако мне нужно поместить круг поверх этого изображения, но оно разрезается пополам из-за предыдущего clip()

Без clip(): https://i.gyazo.com/b474c656f33a1f004f5e3becffcef527.png

С clip(): https://i.gyazo.com/da13377cd3f6dc7516c2b8fd1f0f8ac9.png

Я знаю, что на изображении «С клипом ()» это выглядит так, как будто граница дуги отображается снаружи клипа, но это жестко закодировано в изображении, я поставил его в качестве ориентира в редакторе изображений.

Я попытался передвигаться по коду, я удалил строку ctx.clip() и увидел, что мой круг хорошо отображается в верхней части изображения. 

        // circle around avatar
        ctx.beginPath();
        ctx.arc(122.5, 141.8, 81, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.clip();
        const avatar = await Canvas.loadImage(
            message.author.displayAvatarURL({ format: 'png' })
        );
        ctx.strokeStyle = '#ffffff';
        ctx.strokeRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(avatar, 41.5, 60.5, 162, 162);

        // presence circle
        ctx.beginPath();
        ctx.arc(184.5, 193.5, 19, 0, Math.PI * 2, true);
        ctx.strokeStyle = '#000000';
        ctx.lineWidth = 8;
        ctx.stroke();
        ctx.fillStyle = userStatusColor;
        ctx.fill();

1 Ответ

1 голос
/ 27 мая 2019

Взгляните на определение canvas clip ():
https://www.w3schools.com/tags/canvas_clip.asp

Совет. После обрезки области все будущие чертежи будут ограничены обрезанной областью (нет доступа).в другие регионы на холсте).Однако вы можете сохранить текущую область холста с помощью метода save () перед использованием метода clip () и восстановить ее (с помощью метода restore ()) в любое время в будущем.

Ниже приведенопример использования сохранения и восстановления 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(90, 90, 81, 0, Math.PI * 2, true);
ctx.stroke();

ctx.save();
ctx.clip();

ctx.beginPath();
ctx.arc(150, 50, 19, 0, Math.PI * 2, true);
ctx.fillStyle = '#0000ff';
ctx.lineWidth = 8;
ctx.stroke();
ctx.fill();

ctx.restore();

ctx.beginPath();
ctx.arc(170, 99, 19, 0, Math.PI * 2, true);
ctx.fillStyle = '#ff0000';
ctx.lineWidth = 8;
ctx.stroke();
ctx.fill();
<canvas id="canvas"></canvas>
...