Вот такое надо нарисовать:
Интересно, как нарисовать полукруги с помощью кривых Безье? Потому что простые полукруги не совсем подходят, так как надо рисовать стрелочки.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВот такое надо нарисовать:
Интересно, как нарисовать полукруги с помощью кривых Безье? Потому что простые полукруги не совсем подходят, так как надо рисовать стрелочки.
Лучше всего рисовать такие вещи в векторном редакторе.
Взял вашу картинку за образец и загрузил её в Inkscape
с помощью небольшого файла SVG.
Для чего так делается?
Чтобы точно нарисовать path
, привязанный к картинке-образцу.
width="125"
и height="137"
и viewBox="0 0 125 137"
выставляются в соответствии с габаритным размерам картинки.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="125" height="137" viewBox="0 0 125 137" >
<image xlink:href="https://i.stack.imgur.com/XRq8G.png" width="125" height="137" />
</svg>
Весь контур обводить не надо. Будем рисовать среднюю линию, а её ширину выставим потом вручную stroke-width="5"
Рисовать кривые Безье
наносите узловые точки Редактировать узлы контура или рычаги узлов
делаете точки активными (цветными) Сделать узлы автоматически сглаженными
и перемещая рычаги узловых точек добиваемся нужной формы кривой. При сохранении выбирайте Сохранить как
/ выбирайте во второй строчке inkscape SVG
и в выпадающем списке - Оптимизированный svg
В принципе всё готово
<div class="container" >
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="20%" height="20%" viewBox="0 0 125 137">
<style>
.s0{
fill:none;
stroke:#365A9E;
}
</style>
<g stroke-width="4">
<path id="curve" d="m50.7 28.8c9.1-7.7 18.6-10.3 28.3-4.3 4.6 2.9 8.7 8.3 10.5 12.2 2.7 5.9 1.6 12.6-1.2 17.4-5.6 9.9-11.5 11.5-20.9 14.1-4.6 1.3-9.4 2-13.6 4.2-3.5 1.8-6.9 4.2-9.2 7.4-2.4 3.2-4.1 7.1-4.5 11.1-0.4 3.9 0.2 8 1.8 11.5 3.3 5.2 8.5 10.1 14 11.9 3.9 1.2 8.4 1.9 12.3 0.8 3.2-0.9 7.8-3.9 7.8-3.9" class="s0"/>
<path id="left_Line" d="M37.7 71.7 2.9 72" stroke-linecap="round" class="s0"/>
<path id="right_Line" d="M92.9 72H123.1" stroke-linecap="round" class="s0"/>
<path id="top_Tri" d="m42.7 19.4 6.7 8.2 6.7 4.9 6.1 3.2-24.9 8.8z" stroke-linejoin="round" class="s0"/>
<path id="bottom_Tri" d="m89.5 94-23.9 8.6 4 3.1 5.7 4.2 3.8 4.2 2.9 4.1 1.4 1.2z" stroke-linejoin="round" class="s0"/>
</g>
</svg>
</div>
Для анимации линий необходимо точно узнать их максимальные длины.
Для этого у меня есть простенькая утилита расчета длины любого патча:
Ниже код:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<div>
<input type="button" value="Total" onclick="TotalLength()"/>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width="500" height="500" viewBox="0 0 500 500" >
<!-- Скопируйте сюда значение атрибута "d" вашего path -->
<path id="check" fill= "none" stroke ="grey" stroke-width ="1"
d="m50.7 28.8c9.1-7.7 18.6-10.3 28.3-4.3 4.6 2.9 8.7 8.3 10.5 12.2 2.7 5.9 1.6 12.6-1.2 17.4-5.6 9.9-11.5 11.5-20.9 14.1-4.6 1.3-9.4 2-13.6 4.2-3.5 1.8-6.9 4.2-9.2 7.4-2.4 3.2-4.1 7.1-4.5 11.1-0.4 3.9 0.2 8 1.8 11.5 3.3 5.2 8.5 10.1 14 11.9 3.9 1.2 8.4 1.9 12.3 0.8 3.2-0.9 7.8-3.9 7.8-3.9" >
</path>
</svg>
<script>
function TotalLength(){
var path = document.querySelector('#check');
var len = Math.round(path.getTotalLength() );
alert("Длина пути - " + len);
};
</script>
Кривая линия id="curve"
-182px
Каждый треугольник id="top_Tri"
-78px
Каждая прямая линия - id=right_Line
- 35px
Анимировать будем с помощью изменения атрибутов stroke-dasharray
и stroke-dashoffset
1. Одновременная анимация всех линий
Реализуется условием одновременного запуска begin="svg1.click"
<div class="container" >
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40%" height="40%" viewBox="0 0 125 137">
<style>
.s0{
fill:none;
stroke:#365A9E;
}
</style>
<!-- Это серая трасса направления анимации. При необходимости её можно удалить. Для этого удаляется вся первая группа <g>... </g> -->
<g stroke-width="4" stroke="#dedede" fill="none">
<path id="curve" d="m50.7 28.8c9.1-7.7 18.6-10.3 28.3-4.3 4.6 2.9 8.7 8.3 10.5 12.2 2.7 5.9 1.6 12.6-1.2 17.4-5.6 9.9-11.5 11.5-20.9 14.1-4.6 1.3-9.4 2-13.6 4.2-3.5 1.8-6.9 4.2-9.2 7.4-2.4 3.2-4.1 7.1-4.5 11.1-0.4 3.9 0.2 8 1.8 11.5 3.3 5.2 8.5 10.1 14 11.9 3.9 1.2 8.4 1.9 12.3 0.8 3.2-0.9 7.8-3.9 7.8-3.9"/>
<path d="M37.7 71.7 2.9 72" stroke-linecap="round" />
<path d="M92.9 72H123.1" stroke-linecap="round" />
<path d="m42.7 19.4 6.7 8.2 6.7 4.9 6.1 3.2-24.9 8.8z" stroke-linejoin="round" />
<path d="m89.5 94-23.9 8.6 4 3.1 5.7 4.2 3.8 4.2 2.9 4.1 1.4 1.2z" stroke-linejoin="round"/>
</g>
<g stroke-width="4">
<path id="curve" class="s0" stroke-dasharray="0 91 0 91"
d="m50.7 28.8c9.1-7.7 18.6-10.3 28.3-4.3 4.6 2.9 8.7 8.3 10.5 12.2 2.7 5.9 1.6 12.6-1.2 17.4-5.6 9.9-11.5 11.5-20.9 14.1-4.6 1.3-9.4 2-13.6 4.2-3.5 1.8-6.9 4.2-9.2 7.4-2.4 3.2-4.1 7.1-4.5 11.1-0.4 3.9 0.2 8 1.8 11.5 3.3 5.2 8.5 10.1 14 11.9 3.9 1.2 8.4 1.9 12.3 0.8 3.2-0.9 7.8-3.9 7.8-3.9" >
<animate
id="an_curve"
attributeName="stroke-dasharray"
from="0 91 0 91"
to="0 0 182 0"
begin="svg1.click"
dur="2s"
fill="freeze" />
</path>
<path id="top_Tri" stroke-dasharray="0 78 0 78" stroke-dashoffset="26"
d="m42.7 19.4 6.7 8.2 6.7 4.9 6.1 3.2-24.9 8.8z" stroke-linejoin="round" class="s0">
<animate
id="an_top_Tri"
attributeName="stroke-dasharray"
from="0 39 0 39"
to="0 0 78 0"
begin="svg1.click"
dur="2s"
fill="freeze" />
</path>
<path id="bottom_Tri" stroke-dasharray="0 78 0 78" stroke-dashoffset="0"
d="m89.5 94-23.9 8.6 4 3.1 5.7 4.2 3.8 4.2 2.9 4.1 1.4 1.2z" stroke-linejoin="round" class="s0">
<animate
id="an_bottom_Tri"
attributeName="stroke-dasharray"
from="0 39 0 39"
to="0 0 78 0"
begin="svg1.click"
dur="2s"
fill="freeze" />
</path>
<path id="left_Line" stroke-dasharray="35" stroke-dashoffset="35"
d="M37.7 71.7 2.9 72" stroke-linecap="round" class="s0">
<animate
id="an_left_Line"
attributeName="stroke-dashoffset"
from="35"
to="0"
begin="svg1.click"
dur="2s"
fill="freeze" />
</path>
<path id="right_Line" stroke-dasharray="35" stroke-dashoffset="35"
d="M92.9 72H123.1" stroke-linecap="round" class="s0">
<animate
id="an_left_Line"
attributeName="stroke-dashoffset"
from="35"
to="0"
begin="svg1.click"
dur="2s"
fill="freeze" />
</g>
</svg>
</div>
2. Последовательная анимация линий
Реализуется последовательной цепочкой команд запуска анимаций
begin="svg1.click"
- запуск рисования кривой
begin="an_curve.end" - запуск рисования треугольников.
Другими словами можно сказать, что запуск анимации треугольников начнется после окончания рисования кривой.
Начало анимации в снипете после клика
<div class="container" >
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40%" height="40%" viewBox="0 0 125 137">
<style>
.s0{
fill:none;
stroke:#365A9E;
}
</style>
<g stroke-width="4" stroke="#dedede" fill="none">
<path id="curve" d="m50.7 28.8c9.1-7.7 18.6-10.3 28.3-4.3 4.6 2.9 8.7 8.3 10.5 12.2 2.7 5.9 1.6 12.6-1.2 17.4-5.6 9.9-11.5 11.5-20.9 14.1-4.6 1.3-9.4 2-13.6 4.2-3.5 1.8-6.9 4.2-9.2 7.4-2.4 3.2-4.1 7.1-4.5 11.1-0.4 3.9 0.2 8 1.8 11.5 3.3 5.2 8.5 10.1 14 11.9 3.9 1.2 8.4 1.9 12.3 0.8 3.2-0.9 7.8-3.9 7.8-3.9"/>
<path d="M37.7 71.7 2.9 72" stroke-linecap="round" />
<path d="M92.9 72H123.1" stroke-linecap="round" />
<path d="m42.7 19.4 6.7 8.2 6.7 4.9 6.1 3.2-24.9 8.8z" stroke-linejoin="round" />
<path d="m89.5 94-23.9 8.6 4 3.1 5.7 4.2 3.8 4.2 2.9 4.1 1.4 1.2z" stroke-linejoin="round"/>
</g>
<g stroke-width="4">
<path id="curve" class="s0" stroke-dasharray="0 91 0 91"
d="m50.7 28.8c9.1-7.7 18.6-10.3 28.3-4.3 4.6 2.9 8.7 8.3 10.5 12.2 2.7 5.9 1.6 12.6-1.2 17.4-5.6 9.9-11.5 11.5-20.9 14.1-4.6 1.3-9.4 2-13.6 4.2-3.5 1.8-6.9 4.2-9.2 7.4-2.4 3.2-4.1 7.1-4.5 11.1-0.4 3.9 0.2 8 1.8 11.5 3.3 5.2 8.5 10.1 14 11.9 3.9 1.2 8.4 1.9 12.3 0.8 3.2-0.9 7.8-3.9 7.8-3.9" >
<animate
id="an_curve"
attributeName="stroke-dasharray"
from="0 91 0 91"
to="0 0 182 0"
begin="svg1.click"
dur="1s"
fill="freeze" />
</path>
<path id="top_Tri" stroke-dasharray="0 78 0 78" stroke-dashoffset="26"
d="m42.7 19.4 6.7 8.2 6.7 4.9 6.1 3.2-24.9 8.8z" stroke-linejoin="round" class="s0">
<animate
id="an_top_Tri"
attributeName="stroke-dasharray"
from="0 39 0 39"
to="0 0 78 0"
begin="an_curve.end"
dur="0.8s"
fill="freeze" />
</path>
<path id="bottom_Tri" stroke-dasharray="0 78 0 78" stroke-dashoffset="0"
d="m89.5 94-23.9 8.6 4 3.1 5.7 4.2 3.8 4.2 2.9 4.1 1.4 1.2z" stroke-linejoin="round" class="s0">
<animate
id="an_bottom_Tri"
attributeName="stroke-dasharray"
from="0 39 0 39"
to="0 0 78 0"
begin="an_curve.end"
dur="0.8s"
fill="freeze" />
</path>
<path id="left_Line" stroke-dasharray="35" stroke-dashoffset="35"
d="M37.7 71.7 2.9 72" stroke-linecap="round" class="s0">
<animate
id="an_left_Line"
attributeName="stroke-dashoffset"
from="35"
to="0"
begin="an_bottom_Tri.end"
dur="0.5s"
fill="freeze" />
</path>
<path id="right_Line" stroke-dasharray="35" stroke-dashoffset="35"
d="M92.9 72H123.1" stroke-linecap="round" class="s0">
<animate
id="an_left_Line"
attributeName="stroke-dashoffset"
from="35"
to="0"
begin="an_bottom_Tri.end"
dur="0.5s"
fill="freeze" />
</g>
</svg>
</div>
Это без 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();
<canvas id='canvas' width='210' height='297'></canvas>