Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 20.08.2022, 23:15   #1
Krasi
Форумчанин
 
Регистрация: 12.02.2010
Сообщений: 787
По умолчанию Как лучше вставлять фотку в круг, нарисованный в canvas

Я написал отрисовку кругов в canvas и вызвал ее столько раз, сколько мне нужно, в итоге получил то, что показано на изображении
Код:
fabArc20[0]={x_center:1040, y_center:390, r:45, h:0, imgHeight: 60, imgWeight: 60, imgXOffset: 30, imgYOffset: 30, color:"green", bgColor:"white", colorHover:"#b8860b", img:img2, helper_title:"Специалисты", helper_desc:"Можно обратиться к инженеру завода или к репетитору, у него могут быть свое оборудование и собственное видение задачи, может чему-то научить"};

fabArc20.forEach(fabArc2 => {
    ctx.fillStyle = fabArc2.bgColor;
    updateCanvas(fabArc2,fabArc2.img,fabArc2.x_center-fabArc2.imgXOffset,fabArc2.y_center-fabArc2.imgYOffset,fabArc2.imgHeight,fabArc2.imgWeight);
    
    canvas.addEventListener("mousemove", function(e){
        
        [xPercent,yPercent] = getCoords(e);
        if ((xPercent>=fabArc2.x_center-fabArc2.r)&(xPercent<=fabArc2.x_center+fabArc2.r)&(yPercent>=fabArc2.y_center-fabArc2.r)&(yPercent<=fabArc2.y_center+fabArc2.r)){
            fabArc2.color = fabArc2.colorHover;
            const helper = document.querySelector('#canvas_helper');
            helper.innerHTML = fabArc2.helper_title;
            helper.innerHTML += "<p style='font-size: 18px;'>"+fabArc2.helper_desc+"</p>";
            helper.style.display = 'block';
        }
        else{
            fabArc2.color = "green";
            
        }
        updateCanvas(fabArc2,fabArc2.img,fabArc2.x_center-fabArc2.imgXOffset,fabArc2.y_center-fabArc2.imgYOffset,fabArc2.imgHeight,fabArc2.imgWeight);
    }, false);

});

function updateCanvas(fabArc12, img12, x12, y12, c12, z12){
ctx.beginPath();
//ctx.strokeStyle = 'rgb(200,200,200)';
ctx.strokeStyle = fabArc12.color;
ctx.arc(fabArc12.x_center, fabArc12.y_center, fabArc12.r, fabArc12.h, getRadians(360));
ctx.fill();
ctx.closePath();
ctx.stroke();
ctx.drawImage(img12,x12, y12, c12, z12);
}
Снимок экрана 2022-08-20 в 23.11.28.jpg

Проблема состоит в том, что круглые картинки накладываются на нарисованные круги, и все окей. Но если фотография прямоугольная, такой подход не сработает, так как она все равно на переднем плане, и под круг ее так просто не загонишь. Проблема решается как-то просто, но я не помню. Как я понимаю, надо вписать картинку внутрь нарисованного круга. Как это правильнее и проще сделать?

Последний раз редактировалось Krasi; 20.08.2022 в 23:19.
Krasi вне форума Ответить с цитированием
Старый 07.09.2022, 12:21   #2
Krasi
Форумчанин
 
Регистрация: 12.02.2010
Сообщений: 787
По умолчанию

Тема еще актуальна. Или предложите, пожалуйста, Ваш вариант, как это решается по уму
Krasi вне форума Ответить с цитированием
Старый 07.09.2022, 14:11   #3
Arigato
Высокая репутация
СуперМодератор
 
Аватар для Arigato
 
Регистрация: 27.07.2008
Сообщений: 16,218
По умолчанию

Посмотрите в сторону метода clip()
Arigato вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
public void someMethod() { this.run = false; Canvas canvas = null; doDraw(canvas); Tatana Java Мобильная разработка (Android) 10 15.12.2016 12:05
Стереть нарисованный текст F1960 Win Api 2 05.08.2011 09:09
Как сохранить нарисованный график в JPG файл Ark Мультимедиа в Delphi 13 03.04.2009 15:41
Как вставить фотку в UserForm valerij Microsoft Office Excel 11 06.02.2009 09:57