在fabric.js中，用圆圈在端点上移动的线条。

Question

我想用 fabric 创建一条有两个圆圈端点的线。我可以移动端点上的圆圈，线条就会更新。但是如果我移动线条，圆圈就不会移动。有什么建议吗？

JSFiddle在这里 http:/jsfiddle.netgfk0r2pf10

var self = this;

var canvas = new fabric.Canvas('c', {
    selection: true
});

var line = new fabric.Line([50, 50, 100, 100], {
    fill: 'red',
    stroke: 'red',
    strokeWidth: 2,
    selectable: true,
    hasControls: false,
    hasBorders: false,
    centeredRotation: false,
    centeredScaling: false,
    //originX: 'center',
    //originY: 'center'
});

var circle1 = new fabric.Circle({
    radius: 5,
    fill: 'green',
    left: 45,
    top: 45,
    hasControls: false,
    hasBorders: false,
    name: 'circle1'
});

var circle2 = new fabric.Circle({
    radius: 5,
    fill: 'green',
    left: 95,
    top: 95,
    hasControls: false,
    hasBorders: false,
    name: 'circle2'
});

canvas.on('object:moving', function (options) {

    var objType = options.target.get('type');
    var p = options.target;

    if (objType == 'line') {        
        circle1.set({ x1: line.x1, y1: line.y1 });
        circle2.set({ left: line.x2, top: line.y2 });        
    } 
    if (objType == 'circle') {
        if (p.name == 'circle1') {
            line.set({
                x1: circle1.getCenterPoint().x, y1: circle1.getCenterPoint().y, selectable: true
            });
        } else {
            if (p.name == 'circle2') {
                line.set({
                    x2: circle2.getCenterPoint().x, y2: circle2.getCenterPoint().y, selectable: true
                });
            }
        }
    }
    line.setCoords();
    circle1.setCoords();
    circle2.setCoords();
    canvas.renderAll();

});

canvas.add(line);
canvas.add(circle1);
canvas.add(circle2);
 canvas.renderAll();

Answer 1

我已经通过你的fiddle和固定的问题，请检查它。现在它似乎工作......检查它这个 http:/jsfiddle.netAhammadalipkgfk0r2pf14

Change your code as below..

var self = this;

var canvas = new fabric.Canvas('c', {
    selection: true
});

var line = new fabric.Line([50, 50, 100, 100], {
    fill: 'red',
    stroke: 'red',
    strokeWidth: 2,
    selectable: true,
    hasControls: false,
    hasBorders: false,
    centeredRotation: false,
    centeredScaling: false,
    //originX: 'center',
    //originY: 'center'
});

var circle1 = new fabric.Circle({
    radius: 5,
    fill: 'green',
    left: 45,
    top: 45,
    hasControls: false,
    hasBorders: false,
    name: 'circle1'
});

var circle2 = new fabric.Circle({
    radius: 5,
    fill: 'green',
    left: 95,
    top: 95,
    hasControls: false,
    hasBorders: false,
    name: 'circle2'
});

canvas.on('object:moving', function (options) {

    var objType = options.target.get('type');
    var p = options.target;

    if (objType == 'line') {  
                    var _l = line.left;
                    var _t = line.top;

                    circle1.set({
                        'left': (line.calcLinePoints().x1 + _l),
                        'top': (line.calcLinePoints().y1 + _t)
                    });

                    circle1.line.set({
                        'x1': circle1.left,
                        'y1': circle1.top
                    });

                    circle1.line.setCoords();

                    circle2.set({
                        'left': (line.calcLinePoints().x2 + _l),
                        'top': (line.calcLinePoints().y2 + _t)
                    });

                    circle2.line.set({
                        'x2': circle2.left,
                        'y2': circle2.top
                    });

                    circle2.line.setCoords();
                    canvas.renderAll();

    } 
    if (objType == 'circle') {
        if (p.name == 'circle1') {
            line.set({
                x1: circle1.getCenterPoint().x, y1: circle1.getCenterPoint().y, selectable: true
            });
        } else {
            if (p.name == 'circle2') {
                line.set({
                    x2: circle2.getCenterPoint().x, y2: circle2.getCenterPoint().y, selectable: true
                });
            }
        }
    }
    line.setCoords();
    circle1.setCoords();
    circle2.setCoords();
    canvas.renderAll();

});

canvas.add(line);
circle1.line=line;
circle2.line=line;
canvas.add(circle1);
canvas.add(circle2);
 canvas.renderAll();

Answer 2

你根据圆周线的初始位置进行计算.需要计算它们在每个场景下的每个位置。

请看fiddle。https:/jsfiddle.net251a9pog。

我把圆圈1的颜色改成了蓝色，可见两个圆圈的位置不同。

var self = this;

var canvas = new fabric.Canvas('c', {
    selection: true
});

var line = new fabric.Line([50, 50, 100, 100], {
    fill: 'red',
    stroke: 'red',
    strokeWidth: 2,
    selectable: true,
    hasControls: false,
    hasBorders: false,
    centeredRotation: false,
    centeredScaling: false
});

var circle1 = new fabric.Circle({
    radius: 5,
    fill: 'blue',
    left: 45,
    top: 45,
    hasControls: false,
    hasBorders: false,
    name: 'circle1'
});

var circle2 = new fabric.Circle({
    radius: 5,
    fill: 'green',
    left: 95,
    top: 95,
    hasControls: false,
    hasBorders: false,
    name: 'circle2'
});

canvas.on('object:moving', function (options) {

  var objType = options.target.get('type');
  var p = options.target;

  if (objType == 'line') {
     var c1Left, c1Top, c2Left, c2Top;
     // CALCULATE THE circle1 AND circle2 POINTS FOR EACH SCENARIO
     if (circle1.top < circle2.top) {
        if (circle1.left < circle2.left) {
           c1Left = p.left - circle1.radius;
           c1Top = p.top - circle1.radius;
           c2Left = p.left + p.width - circle2.radius;
           c2Top = p.top + p.height - circle2.radius;
        }
        else {
           c1Left = p.left + p.width - circle1.radius;
           c1Top = p.top - circle1.radius;
           c2Left = p.left - circle1.radius;
           c2Top = p.top + p.height - circle1.radius;
        }
     }
     else {
        if (circle1.left < circle2.left) {
           c1Left = p.left - circle1.radius;
           c1Top = p.top + p.height - circle1.radius;
           c2Left = p.left + p.width - circle1.radius;
           c2Top = p.top - circle1.radius;
        }
        else {
           c1Left = p.left + p.width - circle1.radius;
           c1Top = p.top + p.height - circle1.radius;
           c2Left = p.left - circle1.radius;
           c2Top = p.top - circle1.radius;
        }
     }
     circle1.set({ left: c1Left, top: c1Top });
     circle2.set({ left: c2Left, top: c2Top });
  }
  if (objType == 'circle') {
     if (p.name == 'circle1') {
        line.set({
           // moving circle left + radius
           x1: p.left + p.radius,
           // moving circle top + radius
           y1: p.top + p.radius,
           // other circle left + radius
           x2: circle2.left + circle2.radius,
           // other circle top + radius
           y2: circle2.top + circle2.radius,
           selectable: true
        });
     } else if (p.name == 'circle2') {
        line.set({
           // moving circle left + radius
           x1: p.left + p.radius,
           // moving circle top + radius
           y1: p.top + p.radius,
           // other circle left + radius
           x2: circle1.left + circle1.radius,
            // other circle top + radius
           y2: circle1.top + circle1.radius,
           selectable: true
        });
     }
  }
  line.setCoords();
  circle1.setCoords();
  circle2.setCoords();
  canvas.renderAll();
});

canvas.add(line);
canvas.add(circle1);
canvas.add(circle2);
canvas.renderAll();