Javascript рисует границу вокруг формы на холсте изображения

Question

Я ищу решение нарисовать границу вокруг всех фигур на изображении.Я уже пробовал это решение Нарисуйте границу вокруг непрозрачной части изображения на холсте , но у меня это не работает.

Представьте себе этот png

решение, которое я ищу, должно выглядеть следующим образом

есть ли библиотека / решение?

Спасибо

Answer 1

Если вы рисуете все фигуры, используя ctx.fill(), вы можете просто вызвать ctx.stroke() перед каждым вызовом ctx.fill().Это приведет к линии шириной ctx.lineWidth/2, так как половина линии будет покрыта самой формой.Тем не менее, он не будет работать для других методов, таких как ctx.drawImage() или ctx.putImageData().Пожалуйста, укажите, как именно вы рисуете эти фигуры на холсте, чтобы получить более подробную помощь.

Редактировать: Я думаю, что вы можете использовать решение, которое вы уже упомянули, вам просто нужно сделать не черную частьваше изображение прозрачно.Вы можете сделать это, отредактировав imageData на холсте:

var ctx = canvas.getContext("2d");
var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
for (let i=0;i<imageData.data.length;i+=4){
    if (shouldBeTransparent(imageData.data[i],imageData.data[i+1],imageData.data[i+2]){
        imageData.data[i+3] = 0;
    }
}
ctx.putImageData(imageData,0,0);

function shouldBeTransparent(r,g,b){
    return r!=0||g!=0||b!=0;
}

Это сделает все пиксели не полностью черными прозрачными, поэтому вы можете продолжить с методом, который вы уже упоминали.