Question

我正在用可拖动点进行划线。类似于this，但具有可拖动的点。然后我将点直接放在画布上而没有重新加载页面并且没有从json加载就可以了。问题是我试图通过 fromObject 方法从json加载它并将任何工作点拖到错误的位置。

let c = new fabric.Canvas('canvas', {
  width: 1024,
  height: 600
});

c.on('object:moving',objectMoving);

function objectMoving(e) {
let target = e.target,
    diff = 8,
    line1 = target.line1,
    line2 = target.line2;
  target.line1.set({'x1': target.left + diff, 'y1': target.top + diff}).setCoords();
  target.line2.set({'x2': target.left + diff, 'y2': target.top + diff}).setCoords();
}


function drawLineByPointsInit(canvas,objects) {
  let lines = [];
  objects.map((object) => {
    switch (object.type) {
      case 'line':
        fabric['Line'].fromObject(object, (l) => {
          canvas.add(l);
        });
        break;
    }
  });

  objects.map((object) => {
    switch (object.type) {
      case 'circle':
        lines.push({line1: canvas._objects[object.line1], line2: canvas._objects[object.line2], circle: object});
        break;
    }
  });

  lines.map((line) => {
    fabric['Circle'].fromObject(line.circle, (circle) => {
      circle.line1 = line.line1;
      circle.line2 = line.line2;

      circle.selectable = true;
      canvas.add(circle);
    });

  });
}

drawLineByPointsInit(c,[
  {
    "type": "line",
    "version": "2.4.3",
    "originX": "left",
    "originY": "top",
    "left": 78,
    "top": 174,
    "width": 181,
    "height": 167,
    "fill": "red",
    "stroke": "red",
    "strokeWidth": 5,
    "strokeDashArray": null,
    "strokeLineCap": "butt",
    "strokeLineJoin": "miter",
    "strokeMiterLimit": 4,
    "scaleX": 1,
    "scaleY": 1,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "shadow": null,
    "visible": true,
    "clipTo": null,
    "backgroundColor": "",
    "fillRule": "nonzero",
    "paintFirst": "fill",
    "globalCompositeOperation": "source-over",
    "transformMatrix": null,
    "skewX": 0,
    "skewY": 0,
    "x1": -90.5,
    "x2": 90.5,
    "y1": 83.5,
    "y2": -83.5,
    "selectable": false,
    "evented": false,
    "hasControls": false,
    "hasBorders": false
  },
  {
    "type": "line",
    "version": "2.4.3",
    "originX": "left",
    "originY": "top",
    "left": 259,
    "top": 126,
    "width": 144,
    "height": 48,
    "fill": "red",
    "stroke": "red",
    "strokeWidth": 5,
    "strokeDashArray": null,
    "strokeLineCap": "butt",
    "strokeLineJoin": "miter",
    "strokeMiterLimit": 4,
    "scaleX": 1,
    "scaleY": 1,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "shadow": null,
    "visible": true,
    "clipTo": null,
    "backgroundColor": "",
    "fillRule": "nonzero",
    "paintFirst": "fill",
    "globalCompositeOperation": "source-over",
    "transformMatrix": null,
    "skewX": 0,
    "skewY": 0,
    "x1": -72,
    "x2": 72,
    "y1": 24,
    "y2": -24,
    "selectable": false,
    "evented": false,
    "hasControls": false,
    "hasBorders": false
  },
  {
    "type": "circle",
    "version": "2.4.3",
    "originX": "left",
    "originY": "top",
    "left": 251,
    "top": 166,
    "width": 24,
    "height": 24,
    "fill": "#fff",
    "stroke": "#666",
    "strokeWidth": 5,
    "strokeDashArray": null,
    "strokeLineCap": "butt",
    "strokeLineJoin": "miter",
    "strokeMiterLimit": 4,
    "scaleX": 1,
    "scaleY": 1,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "shadow": null,
    "visible": true,
    "clipTo": null,
    "backgroundColor": "",
    "fillRule": "nonzero",
    "paintFirst": "fill",
    "globalCompositeOperation": "source-over",
    "transformMatrix": null,
    "skewX": 0,
    "skewY": 0,
    "radius": 12,
    "startAngle": 0,
    "endAngle": 6.283185307179586,
    "line1": 0,
    "line2": 1,
    "selectable": false,
    "hasControls": false,
    "hasBorders": false
  }
]);

点与可拖动点逐行排列。计算错误。 | Fabric.js

0 个答案: