gtk2k · October 22, 2015 07:22
diff --git a/FabricCubicBezierEditorSample.js b/FabricCubicBezierEditorSample.js
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8" />
  <title>fabric Cubic Bezier</title>
  <script src="fabric.js"></script>
 </head>
 <body>
  <canvas id="c" width="600" height="500"></canvas>
  <script>
    (function () {
      var canvas = this.__canvas = new fabric.Canvas('c');
      fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

      canvas.on({ 'object:moving': onObjectMoving });

      var lien = null;
      (function drawQuadratic() {

        line = new fabric.Path('M 100,100 C 100,200 300,200 300,100');
        line.stroke = 'black';
        line.strokeWidth = 3;
        line.fill = null;
        line.selectable = false;
        canvas.add(line);


        var p0 = makeCurveCircle(100, 100);
        p0.name = "p0";
        canvas.add(p0);

        var c0 = makeCurveCircle(100, 200);
        c0.name = "c0";
        canvas.add(c0);

        var c1 = makeCurveCircle(300, 200);
        c1.name = "c1";
        canvas.add(c1);

        var p1 = makeCurveCircle(300, 100);
        p1.name = "p1";
        canvas.add(p1);

      })();

      function makeCurveCircle(left, top) {
        var c = new fabric.Circle({
          left: left,
          top: top,
          strokeWidth: 5,
          radius: 12,
          fill: '#fff',
          stroke: '#666'
        });
        c.hasBorders = c.hasControls = false;
        return c;
      }

      function onObjectMoving(e) {
        var p = e.target;
        if (e.target.name == "p0") {
          line.path[0][1] = p.left;
          line.path[0][2] = p.top;
        }
        if (e.target.name == "c0") {
          line.path[1][1] = p.left;
          line.path[1][2] = p.top;
        }
        if (e.target.name == "c1") {
          line.path[1][3] = p.left;
          line.path[1][4] = p.top;
        }
        if (e.target.name == "p1") {
          line.path[1][5] = p.left;
          line.path[1][6] = p.top;
        }
      }
    })();
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>fabric Cubic Bezier</title>
	<script src="fabric.js"></script>
	</head>
	<body>
	<canvas id="c" width="600" height="500"></canvas>
	<script>
	(function () {
	var canvas = this.__canvas = new fabric.Canvas('c');
	fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

	canvas.on({ 'object:moving': onObjectMoving });

	var lien = null;
	(function drawQuadratic() {

	line = new fabric.Path('M 100,100 C 100,200 300,200 300,100');
	line.stroke = 'black';
	line.strokeWidth = 3;
	line.fill = null;
	line.selectable = false;
	canvas.add(line);


	var p0 = makeCurveCircle(100, 100);
	p0.name = "p0";
	canvas.add(p0);

	var c0 = makeCurveCircle(100, 200);
	c0.name = "c0";
	canvas.add(c0);

	var c1 = makeCurveCircle(300, 200);
	c1.name = "c1";
	canvas.add(c1);

	var p1 = makeCurveCircle(300, 100);
	p1.name = "p1";
	canvas.add(p1);

	})();

	function makeCurveCircle(left, top) {
	var c = new fabric.Circle({
	left: left,
	top: top,
	strokeWidth: 5,
	radius: 12,
	fill: '#fff',
	stroke: '#666'
	});
	c.hasBorders = c.hasControls = false;
	return c;
	}

	function onObjectMoving(e) {
	var p = e.target;
	if (e.target.name == "p0") {
	line.path[0][1] = p.left;
	line.path[0][2] = p.top;
	}
	if (e.target.name == "c0") {
	line.path[1][1] = p.left;
	line.path[1][2] = p.top;
	}
	if (e.target.name == "c1") {
	line.path[1][3] = p.left;
	line.path[1][4] = p.top;
	}
	if (e.target.name == "p1") {
	line.path[1][5] = p.left;
	line.path[1][6] = p.top;
	}
	}
	})();
	</script>
	</body>
	</html>