Как нарисовать такой значок с помощью fabric.js

#svg #canvas #fabricjs #svg_animation #inkscape

Вот такое надо нарисовать: 



Интересно, как нарисовать полукруги с помощью кривых Безье? Потому что простые полукруги
не совсем подходят, так как надо рисовать стрелочки.
    

Ответы

Ответ 1

Лучше всего рисовать такие вещи в векторном редакторе. 

Взял вашу картинку за образец и загрузил её в Inkscape  с помощью небольшого файла
SVG.   



Для чего так делается?  

Чтобы точно нарисовать path, привязанный к картинке-образцу.   

width="125" и  height="137" и  viewBox="0 0 125 137" выставляются в соответствии
с габаритным размерам картинки. 






  

Работа с векторным редактором

Весь контур обводить не надо. Будем рисовать среднюю линию, а её ширину выставим
потом вручную stroke-width="5"     


С помощью инструмента - Рисовать кривые Безье наносите узловые точки 
Инструментом - Редактировать узлы контура или рычаги узлов делаете точки активными
(цветными) 
Далее выбираете - Сделать узлы автоматически сглаженными и перемещая рычаги узловых
точек добиваемся нужной формы кривой.  


   


Сохраняем файл в формате SVG   


При сохранении выбирайте Сохранить как / выбирайте во второй строчке inkscape SVG
и в выпадающем списке - Оптимизированный svg 

В принципе всё готово  








Ответ 2

Это без fabric.js просто canvas 



var ctx = document.getElementById("canvas").getContext("2d");

ctx.save();
ctx.transform(0.881373, 0.000000, 0.000000, 0.882991, 14.472024, 30.008880);

ctx.save();
ctx.beginPath();
ctx.transform(-0.698524, 0.715587, 0.925711, 0.378231, 0.000000, 0.000000);
ctx.globalAlpha = 1.0;
ctx.lineJoin = 'bevel';
ctx.strokeStyle = 'rgba(0, 0, 182, 1.0)';
ctx.lineCap = 'square';
ctx.miterLimit = 4;
ctx.lineWidth = 1.454460;
ctx.moveTo(96.909194, 181.195010);
ctx.translate(44.493169, 125.426997);
ctx.rotate(0.000000);
ctx.scale(0.857649, 1.000000);
ctx.arc(0.000000, 0.000000, 82.735886, 0.739676, 1.97531687, 0);
ctx.scale(1.165978, 1.000000);
ctx.rotate(-0.000000);
ctx.translate(-44.493169, -125.426997);
ctx.translate(44.493169, 125.426997);
ctx.rotate(0.000000);
ctx.scale(0.857649, 1.000000);
ctx.arc(0.000000, 0.000000, 82.735886, 1.975317, 3.21095758, 0);
ctx.scale(1.165978, 1.000000);
ctx.rotate(-0.000000);
ctx.translate(-44.493169, -125.426997);
ctx.translate(44.493168, 125.427002);
ctx.rotate(0.000000);
ctx.scale(0.857649, 1.000000);
ctx.arc(0.000000, 0.000000, 82.735886, -3.072228, -1.83658681, 0);
ctx.scale(1.165978, 1.000000);
ctx.rotate(-0.000000);
ctx.translate(-44.493168, -125.427002);
ctx.stroke();
ctx.restore();

ctx.save();
ctx.beginPath();
ctx.transform(0.698524, 0.715587, -0.925711, 0.378231, 0.000000, 0.000000);
ctx.globalAlpha = 1.0;
ctx.lineJoin = 'bevel';
ctx.strokeStyle = 'rgba(0, 0, 182, 1.0)';
ctx.lineCap = 'square';
ctx.miterLimit = 4;
ctx.lineWidth = 1.454460;
ctx.moveTo(314.174770, 46.726323);
ctx.translate(243.974979, 58.791809);
ctx.rotate(0.000000);
ctx.scale(0.857649, 1.000000);
ctx.arc(0.000000, 0.000000, 82.735886, -0.146353, 1.08248298, 0);
ctx.scale(1.165978, 1.000000);
ctx.rotate(-0.000000);
ctx.translate(-243.974979, -58.791809);
ctx.translate(243.974972, 58.791813);
ctx.rotate(0.000000);
ctx.scale(0.857649, 1.000000);
ctx.arc(0.000000, 0.000000, 82.735886, 1.082483, 2.31131912, 0);
ctx.scale(1.165978, 1.000000);
ctx.rotate(-0.000000);
ctx.translate(-243.974972, -58.791813);
ctx.translate(243.974971, 58.791812);
ctx.rotate(0.000000);
ctx.scale(0.857649, 1.000000);
ctx.arc(0.000000, 0.000000, 82.735886, 2.311319, 3.54015529, 0);
ctx.scale(1.165978, 1.000000);
ctx.rotate(-0.000000);
ctx.translate(-243.974971, -58.791812);
ctx.stroke();
ctx.restore();

ctx.save();
ctx.beginPath();
ctx.transform(-0.583905, -0.811822, 0.811822, -0.583905, -136.964043, -136.374478);
ctx.globalAlpha = 1.0;
ctx.lineJoin = 'bevel';
ctx.strokeStyle = 'rgba(0, 0, 0, 1.0)';
ctx.lineCap = 'square';
ctx.miterLimit = 4;
ctx.lineWidth = 0.280017;
ctx.fillStyle = 'rgb(0, 0, 205)';
ctx.moveTo(-222.249990, 28.636906);
ctx.lineTo(-244.496310, 29.385587);
ctx.lineTo(-234.021530, 9.745368);
ctx.fill();
ctx.stroke();
ctx.restore();

ctx.save();
ctx.beginPath();
ctx.transform(0.591390, 0.806386, -0.806386, 0.591390, 338.164508, 412.730352);
ctx.globalAlpha = 1.0;
ctx.lineJoin = 'bevel';
ctx.strokeStyle = 'rgba(0, 0, 0, 1.0)';
ctx.lineCap = 'square';
ctx.miterLimit = 4;
ctx.lineWidth = 0.280017;
ctx.fillStyle = 'rgb(0, 0, 205)';
ctx.moveTo(-222.249990, 28.636906);
ctx.lineTo(-244.496310, 29.385587);
ctx.lineTo(-234.021530, 9.745368);
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();



Ответ 3

Примеры анимации лого

Для анимации линий необходимо точно узнать их максимальные длины. 

Для этого у меня есть простенькая утилита расчета длины любого патча:   

Ниже код: 




 

  

 

 
 
  
 
   




Кривая линия id="curve" -182px 

Каждый треугольник id="top_Tri" -78px 

Каждая прямая линия - id=right_Line - 35px   

Анимировать будем с помощью изменения атрибутов stroke-dasharray и stroke-dashoffset  

1. Одновременная анимация всех линий  

Реализуется условием одновременного запуска begin="svg1.click"   










2. Последовательная анимация линий  

Реализуется последовательной цепочкой команд запуска анимаций 

begin="svg1.click"  - запуск рисования кривой 

begin="an_curve.end" - запуск рисования треугольников.
 Другими словами можно сказать, что запуск анимации треугольников начнется после
окончания рисования кривой.      

Начало анимации в снипете после клика