Я создаю пользовательский интерфейс в Angular6, где у меня есть список, который занимает левую треть экрана с выбираемыми записями, которые при выборе отображают дополнительные данные этой записи.
дополнительные данные не перемещаются, но выбранная строка в записях может, потому что список можно прокручивать, а также выбор его изменит, какая строка будет выделена явно.
Я хочу, чтобы визуально пользователю было понятно, что дополнительные данные, которые он видит, соответствуют записи, выбранной в списке.
вот что у меня сейчас:
Как вы можете видеть, я уже помог пользователю визуально, выделив запись в списке и весь дополнительный просмотр данных в том же голубом
и вот моя попытка заключить сделку с точки зрения ясности представления:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="180">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 20);
ctx.lineTo(400, 180);
ctx.lineTo(400, 40);
ctx.lineTo(0, 0);
ctx.fillStyle = '#9ec7e2';
ctx.fill();
</script>
<p><strong>Note:</strong> The canvas tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>
Но передо мной стоит задача, с которой я никогда не сталкивался: мне нужно, чтобы она была динамичной и плавной.
Я знаю, что мог бы JQuery-смотреть и выбирать, и прокручивать, а также JQuery получать координаты XY верхнего и нижнего углов соответствующих делений, а затем перерисовывать холст на каждой прокрутке и выбирать вызов, но это звучит очень плохо с точки зрения производительности, и с высокая вероятность мигания (перерисовки) во время прокрутки.
не говоря уже о том, что все это звучит очень неуклюже и плохо,
Кроме того, я вполне уверен, что любое изменение размера окна или любой другой простой тест разрушит иллюзию.
Нет ли более нового подхода "CSS3-SASS-SVG-Angular6"?