Наконец-то я узнал, как оживить рисование кривой Безье. Я видел другие решения, которые используют квадратные кривые для этого, но мне нужно было 4 балла за то, что я делал, и b-сплайн был слишком сложным, чтобы найти случайные сюжеты, плюс это именно то, как я хочу это сделать; с Безье Кувес.Как сохранить гладкие линии при вытягивании анимированных кривых Безье в холсте html5
Моя проблема: я не могу найти хорошую, быструю скорость, не видя точек или линий. Я должен что-то упустить. Может ли кто-нибудь указать мою ошибку или более эффективный способ добиться этого в любое время и в любой момент? Мне это нужно, чтобы быть устойчивым и быстрее, чем в примере ниже, но если я больше пробелов получить больше и больше ...
скрипку с кодом: https://jsfiddle.net/qzsy8aL7/
//B(t) = (1 - t)^3P0 + 3t(1 - t)^2 P1 + 3t^2(1 - t)P2 + t^3P3
function animatedBSpline(context, points, t) {
// Draw curve segment
context.beginPath();
context.moveTo(
Math.pow(1 - t, 3) * points[0].x +
3 * t * Math.pow(1 - t, 2) * points[1].x +
3 * Math.pow(t, 2) * (1 - t) * points[2].x +
Math.pow(t, 3) * points[3].x,
Math.pow(1 - t, 3) * points[0].y +
3 * t * Math.pow(1 - t, 2) * points[1].y +
3 * Math.pow(t, 2) * (1 - t) * points[2].y +
Math.pow(t, 3) * points[3].y
);
// Draw spline segemnts
context.lineTo(
Math.pow((1 - t) + 0.001, 3) * points[0].x +
3 * (t + 0.001) * Math.pow((1 - t) + 0.001, 2) * points[1].x +
3 * Math.pow(t + 0.001, 2) * (1 - (t + 0.001)) * points[2].x +
Math.pow(t + 0.001, 3) * points[3].x,
Math.pow((1 - t) + 0.001, 3) * points[0].y +
3 * (t + 0.001) * Math.pow((1 - t) + 0.001, 2) * points[1].y +
3 * Math.pow(t + 0.001, 2) * (1 - (t + 0.001)) * points[2].y +
Math.pow(t + 0.001, 3) * points[3].y
);
//33d4ff
context.strokeStyle="#35bb23";
context.lineJoin="round";
context.lineWidth=2;
context.fillStyle = "black";
context.stroke();
context.fill();
// Keep going until t = 1
if (t < 1) requestAnimationFrame(function() {
animatedBSpline(context, points, t + 0.01);
});
else
context.closePath();
}
Если требуется больше информации пожалуйста, дай мне знать. Я был здесь весь день.
Чтобы добавить: Если я просто прямо рисую это с этими участками, и не анимируем его, это выглядит отлично, очевидно, но просто хотел указать на это. Его что-то с тем, как я оживляю, я просто не знаю.
Ну, я заметил, что на каждом сегменте вы вызываете 'context.beginPath()' и 'context.moveTo (...)', что приведет к тому, что сегменты станут непересекающимися. Вы должны называть эти два метода только в начале кривой, а не в каждой точке. –
где еще я бы это сказал? Если я помещу его где-нибудь еще, это будет либо черным, либо несколькими небольшими строками (я думаю), либо ничего не сделаю. – Grant
https://jsfiddle.net/qzsy8aL7/1/ Я не уверен, что это то, что вы собираетесь делать, но я сделал линию непрерывной и удалил этот противный 'eval', превратив« точки »в массив. –