Динамический холст, "движущаяся линия" Css и / или SVG
Я делаю пользовательский интерфейс в 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 верхнего и нижнего углов соответствующих div, затем перерисовать холст на каждом прокрутке и выбрать вызов, но это звучит очень плохо с точки зрения производительности и с высокой вероятностью мигает (перерисовывает) пока прокручиваю.
не говоря уже о том, что все это звучит неуклюже и плохо исполнено,
Кроме того, я совершенно уверен, что любое изменение размера окна или любой другой простой тест разрушит иллюзию.
Разве нет более нового подхода "CSS3-SASS-SVG-Angular6"?
спасибо @RaymondNijland, эта ссылка ведет к множеству других интересных ссылок и jsfiddles, но я не могу избавиться от этого нытья, чувствуя, что подход холста будет уступать подходу svg. Я запустил код, посмотрите: codepen.io/tatsujb/pen/OomWzW
ну, я точно знаю, что элемент холста в некоторых браузерах может (в некоторых браузерах требуется, чтобы пользователь выбрал этот параметр) быть ускоренным с помощью графического процессора, а элементы SVG не являются
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
«затем перерисуйте холст на каждом свитке и выберите вызов, но это звучит очень плохо с точки зрения производительности и с высокой вероятностью мигания (перерисовки) во время прокрутки». попытка поиска "двойная буферизация холста javscript" в Stackoverflow или Google, эта в Stackoverflow (stackoverflow.com/questions/2795269/…) может вам помочь