Два. js, могу ли я анимировать координаты линии и как?
Линия рисуется с:
line = two.makeLine(x1, y1, x2, y2);
... но 'линия' объект, похоже, не имеет легко настраиваемого свойства, которое напрямую относится к значениям x, y начальной и конечной точек.
Кажется, нет никакого способа обновить координаты. * Обходной путь - удалить и перерисовать линию с разными координатами в каждом кадре, но это кажется излишним?
var elem = document.getElementById('draw-shapes');
var params = {
width: '100%',
height: '100%'
};
var two = new Two(params).appendTo(elem);
var lw = 4;
var x2 = 50;
var y2 = 50;
var line = two.makeLine(1, 1, x2, y2);
line.linewidth = lw;
two.bind("update", function(frameCount) {
line.remove();
x2 += 2;
y2 += 2;
line = two.makeLine(1, 1, x2, y2);
line.linewidth = lw;
}).play();
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
#draw-shapes {
width: 100%;
height: 100%;
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.7.0/two.js"></script>
<body id="draw-shapes">
</body>