用fabric.js绘制具有二次曲线的双线

Question

I'm trying to find out if is possibile to draw a double line (like the attached image) with the quadratic curve function included into fabric.js ( http://fabricjs.com/quadratic-curve ). Anybody know if this is possible or already did it? Thanks

Here is the example image:

Answer 1

If you are interested in a visual effect only, check this double render solution.

 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>