html5 холст анимация конечной точки кривой Безье - PullRequest
Новая
       12

html5 холст анимация конечной точки кривой Безье

1 голос
/ 15 марта 2012

Я хочу анимировать конечную точку кривой Безье в координаты x, y на холсте html5 без перерисовки всего обводки. По сути, мне нужно, чтобы конечная точка выглядела как перетаскиваемая, а при перетаскивании влияет на длину линии.

Это мой текущий стандартный код штриха Безье: 

   var canvas = document.getElementById("myCanvas"),
       context = canvas.getContext("2d"),
       controlX1 = 140,
       controlY1 = 10,
       controlX2 = 388,
       controlY2 = 10,
       endX = 388,
       endY = 170;

   context.moveTo(188, 130);
   context.bezierCurveTo(controlX1, controlY1, controlX2, 
   controlY2, endX, endY);
   context.lineWidth = 10;
   context.strokeStyle = "black";
   context.stroke();

Есть ли у кого-нибудь идеи, как это можно сделать без использования такой библиотеки, как Рафаэль; однако я использую jQuery, так что это доступный ресурс.

1 Ответ

1 голос
/ 15 марта 2012

без перерисовки всего штриха.

Это невозможно. То, как вы анимируете вещи в HTML5 Canvas, заключается в их очистке и перерисовке.

библиотека типа Рафаэля

Для справки, Рафаэль использует SVG, а не HTML5 Canvas, а SVG значительно упрощает подобные вещи, потому что это сохраняемая поверхность для рисования.

Холст - это поверхность для непосредственного рисования. Как только вы рисуете что-то (например, кривую), холст не знает, что было нарисовано или где оно находится. Вы должны следить за всем самостоятельно. Я чувствую, что очень сильно попугаю, но я написал простое учебное пособие по обучению, чтобы сохранить необходимую информацию, чтобы холст казался постоянным, как SVG, который можно найти здесь .

При этом вам, возможно, будет лучше использовать SVG (а не Canvas), если ваше запланированное приложение / сайт не будет слишком сложным или интенсивным.

...