#javascript #web-component
Вопрос:
Я разрабатываю веб-компонент , который отображает некоторую графику на a <canvas> , которая добавляется к компоненту shadowRoot
Я хотел бы изменить размер и повторно отобразить холст при изменении размера элемента (например width , при обновлении его свойства CSS).
Как это сделать? Должен ли я использовать a ResizeObserver ?
Комментарии:
1. » Каков наилучший способ сделать это? » Эта суть вашего вопроса в значительной степени основана на мнении, без учета конкретных, измеримых показателей того, что вы сами , в вашей конкретной ситуации, учитываете при принятии такого решения о том, что является » лучшим «. Пожалуйста, отредактируйте свой вопрос, чтобы указать, какие показатели вы оцениваете при принятии такого решения.
2. Изменено на «Как».
Ответ №1:
В итоге я использовал a ResizeObserver в конструкторе моего пользовательского элемента:
constructor() {
super();
const resizeObserver = new ResizeObserver(() => {
// re-render my canvas
});
resizeObserver.observe(this);
}