使用fabric.js繪製帶有二次曲線的雙線

Question

我試圖找出是否可能繪製包含在fabric.js（http://fabricjs.com/quadratic-curve）中的二次曲線函數的雙線（如附加圖像）。有人知道這是可能的或已經做到了嗎？ 感謝

下面是示例圖像：

Answer 1

如果你有興趣的視覺效果而已，檢查此雙重渲染解決方案。

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>