Оптимизация ререндера канваса при скролле?

Question

[Алексей]

В примере нарисованы просто точки, по факту там будут графы, соответственно к этим нодам добавятся еще ребра и лейблы, есть ли вариант добиться "плавности" в скролле ?
И есть ли вообще возможность оптимизации ?

Comments

[Сергей Сергей]

на время перемещения "выключать" рёбра и метки.

[Василий Банников]

Можно для отрисовки использовать webassembly и webgl :)
Плавнее чем так не выйдет

[Алексей]

Сергей Сергей, ты имеешь ввиду функционал как в винде "отоборажать содержимое папок при перетаскивании " ? Хотелось бы оставить все что есть на канвасе.
Была еще идея, чтобы сделать из него цельную картинку, а изменения, такие как допустим подсветка путей, сделать через доп. канвасы типа лееров

[Сергей Сергей]

Как с папками, вроде. _{с win98 не отключаю этот "эффект".}
Тогда можно цельную картинку в момент начала перетаскивания делать с постепенной подгрузкой и преображением в картинку соседних открывающихся областей. Но это уже 2D-движок получается, может к ним и обратиться?

[Алексей]

Сергей Сергей, с леафлетом то я както баловался, но там не настолько уж больших размеров графы, чтоб прибегать к такого рода библиотекам. Пока думаю о конвертации в svg, хз правда поможет ли )

[RAX7]

Можно отрендерить элементы в отдельный канвас, а при перетягивании мышкой отрисовавать этот канвас через drawImage

const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');

function drawItems() {
	offscreenCtx.clearRect();
	items.forEach(item => {
		offscreenCtx.beginPath();
		offscreenCtx.arc(item.x, item.y, item.r, 0, 2 * Math.PI);
		offscreenCtx.fill();
		offscreenCtx.stroke();
	});
}
drawItems();

window.addEventListener('mousemove', (e) => {
		if (!shouldMoveCanvas) return;
		ctx.translate(e.movementX , e.movementY);
		ctx.drawImage(offscreenCanvas, 0, 0);
	}, false);

дополнительно можно использовать OffscreenCanvas API, для отрисовки в отдельном потоке, но это API пока плохо поддерживается в браузерах.