Я пытаюсь выяснить, возможно ли рисовать двойную линию (например, прикрепленное изображение) с функцией квадратичной кривой, включенной в fabric.js (http://fabricjs.com/quadratic-curve). Кто-нибудь знает, возможно ли это или уже сделал это? БлагодаряНарисуйте двойную линию с квадратичной кривой с помощью fabric.js
Вот пример изображения: 
Если вы заинтересованы в визуальный эффект только проверить это двойное решение вынести.
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
canvas.on({
'object:selected': onObjectSelected,
'object:moving': onObjectMoving,
'before:selection:cleared': onBeforeSelectionCleared,
'after:render': rerender
});
(function drawQuadratic() {
var line = new fabric.Path('M 65 0 Q 100, 100, 200, 0', { fill: '', stroke: 'black', strokeWidth: 6 });
line.path[0][1] = 100;
line.path[0][2] = 100;
line.path[1][1] = 200;
line.path[1][2] = 200;
line.path[1][3] = 300;
line.path[1][4] = 100;
line.selectable = false;
canvas.add(line);
var p1 = makeCurvePoint(200, 200, null, line, null)
p1.name = "p1";
canvas.add(p1);
var p0 = makeCurveCircle(100, 100, line, p1, null);
p0.name = "p0";
canvas.add(p0);
var p2 = makeCurveCircle(300, 100, null, p1, line);
p2.name = "p2";
canvas.add(p2);
})();
function makeCurveCircle(left, top, line1, line2, line3) {
var c = new fabric.Circle({
left: left,
top: top,
strokeWidth: 5,
radius: 12,
fill: '#fff',
stroke: '#666'
});
c.hasBorders = c.hasControls = false;
c.line1 = line1;
c.line2 = line2;
c.line3 = line3;
return c;
}
function makeCurvePoint(left, top, line1, line2, line3) {
var c = new fabric.Circle({
left: left,
top: top,
strokeWidth: 8,
radius: 14,
fill: '#fff',
stroke: '#666'
});
c.hasBorders = c.hasControls = false;
c.line1 = line1;
c.line2 = line2;
c.line3 = line3;
return c;
}
function onObjectSelected(e) {
var activeObject = e.target;
if (activeObject.name == "p0" || activeObject.name == "p2") {
activeObject.line2.animate('opacity', '1', {
duration: 200,
onChange: canvas.renderAll.bind(canvas),
});
activeObject.line2.selectable = true;
}
}
function onBeforeSelectionCleared(e) {
var activeObject = e.target;
if (activeObject.name == "p0" || activeObject.name == "p2") {
activeObject.line2.animate('opacity', '0', {
duration: 200,
onChange: canvas.renderAll.bind(canvas),
});
activeObject.line2.selectable = false;
}
else if (activeObject.name == "p1") {
activeObject.animate('opacity', '0', {
duration: 200,
onChange: canvas.renderAll.bind(canvas),
});
activeObject.selectable = false;
}
}
function rerender() {
var line = canvas.getObjects()[0];
line.stroke = 'white';
line.strokeWidth = 4;
line.render(canvas.contextContainer);
line.stroke = 'black';
line.strokeWidth = 6;
}
function onObjectMoving(e) {
if (e.target.name == "p0" || e.target.name == "p2") {
var p = e.target;
if (p.line1) {
p.line1.path[0][1] = p.left;
p.line1.path[0][2] = p.top;
}
else if (p.line3) {
p.line3.path[1][3] = p.left;
p.line3.path[1][4] = p.top;
}
}
else if (e.target.name == "p1") {
var p = e.target;
if (p.line2) {
p.line2.path[1][1] = p.left;
p.line2.path[1][2] = p.top;
}
}
else if (e.target.name == "p0" || e.target.name == "p2") {
var p = e.target;
p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top });
p.line2 && p.line2.set({ 'x1': p.left, 'y1': p.top });
p.line3 && p.line3.set({ 'x1': p.left, 'y1': p.top });
p.line4 && p.line4.set({ 'x1': p.left, 'y1': p.top });
}
}<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='c' width='500' height='500' ></canvas>
Конечно. Найдите линию, соединяющую центральные точки двух кругов. Затем найдите перпендикулярную линию в конце этой линии. Идите наружу по перпендикуляру к точке на расстояние n (вы выбираете значение n). Этот момент является конечной точкой Q1. Идите наружу в другую сторону на перпендикулярной линии на расстояние n. Этот момент является конечной точкой Q2. Сделайте то же самое для другой конечной точки соединительной линии, чтобы получить другие конечные точки Q1 и Q2. Найдите перпендикуляр в любом месте соединительной линии. Выйдите на расстояние m (вы выбираете m). Это Qt ctrl pt. Продолжайте еще одно n на перпендикуляре. Это Q2's ctrl pt – markE
Вы уже это сделали? Можете ли вы показать мне пример? – user3572384