javascript - FabricJS 帮助缩放？

Question

我写了一段代码。结合屏幕上的点击点。

HTML

 <button id="end">End</button>
        <button id="zoomIn">Zoom-In</button>
        <button id="zoomOut">Zoom-Out</button>
        <canvas id="c" width="500" height="500" ></canvas>

JavaScript

    var canvas = new fabric.Canvas('c');

var point1;
var line=null;
var canvasScale = 1;
var SCALE_FACTOR = 1.2;

    var bool = true;

    canvas.on('mouse:down', function (options) {

    var x = options.e.clientX - canvas._offset.left;
    var y = options.e.clientY - canvas._offset.top;


    var circle = new fabric.Circle({
        left: x,
        top: y,
        fill: 'red',
        originX: 'center',
        originY: 'center',
        hasControls: false,
        hasBorders: false,
        lockMovementX: false,
        lockMovementY: false,
        radius: 5,
        hoverCursor: 'default'
    });

    if(bool)
        canvas.add(circle);

    point1 = new fabric.Point(x, y);
    if(line){
        line = new fabric.Line([line.get('x2'), line.get('y2'), x, y], {
            stroke: 'black',
            hasControls: false,
            hasBorders: false,
            lockMovementX: false,
            lockMovementY: false,
            hoverCursor: 'default'
        });
    }else{
        line = new fabric.Line([x, y, x, y], {
            stroke: 'black',
            hasControls: false,
            hasBorders: false,
            lockMovementX: false,
            lockMovementY: false,
            hoverCursor: 'default'
        });
    }
    if(bool)
        canvas.add(line);
    $("#end").click(function(){
        var lines = canvas.getObjects('line');
        var firstLine = lines[1];
        var lastLine = lines[lines.length - 1];
        line = new fabric.Line([firstLine.get('x2'), firstLine.get('y2'), lastLine.get('x2'), lastLine.get('y2')], {
            stroke: 'red',
            hasControls: false,
            hasBorders: false,
            lockMovementX: false,
            lockMovementY: false,
            hoverCursor: 'default'
        });
        canvas.add(line);
        bool = false;
    });

    });

$("#zoomIn").click(function() {

    canvasScale = canvasScale * SCALE_FACTOR;

    canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
    canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

    var objects = canvas.getObjects();
    for (var i in objects) {
        var scaleX = objects[i].scaleX;
        var scaleY = objects[i].scaleY;
        var left = objects[i].left;
        var top = objects[i].top;

        var tempScaleX = scaleX * SCALE_FACTOR;
        var tempScaleY = scaleY * SCALE_FACTOR;
        var tempLeft = left * SCALE_FACTOR;
        var tempTop = top * SCALE_FACTOR;

        objects[i].scaleX = tempScaleX;
        objects[i].scaleY = tempScaleY;
        objects[i].left = tempLeft;
        objects[i].top = tempTop;

        objects[i].setCoords();
    }

    canvas.renderAll();
});

$("#zoomOut").click(function() {

    canvasScale = canvasScale / SCALE_FACTOR;

    canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
    canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));

    var objects = canvas.getObjects();
    for (var i in objects) {
        var scaleX = objects[i].scaleX;
        var scaleY = objects[i].scaleY;
        var left = objects[i].left;
        var top = objects[i].top;

        var tempScaleX = scaleX * (1 / SCALE_FACTOR);
        var tempScaleY = scaleY * (1 / SCALE_FACTOR);
        var tempLeft = left * (1 / SCALE_FACTOR);
        var tempTop = top * (1 / SCALE_FACTOR);

        objects[i].scaleX = tempScaleX;
        objects[i].scaleY = tempScaleY;
        objects[i].left = tempLeft;
        objects[i].top = tempTop;

        objects[i].setCoords();
    }

    canvas.renderAll();        
});

但是这里是常量点。

我想在这里成为这样的人:

HTML

        <canvas id="c" width="500" height="500" ></canvas>

JavaScript

    (function() {
  var canvas = this.__canvas = new fabric.Canvas('c', { selection: false });
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

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

    c.line1 = line1;
    c.line2 = line2;
    c.line3 = line3;
    c.line4 = line4;

    return c;
  }

  function makeLine(coords) {
    return new fabric.Line(coords, {
      fill: 'red',
      stroke: 'red',
      strokeWidth: 5,
      selectable: false
    });
  }

  var line = makeLine([ 250, 125, 250, 175 ]),
      line2 = makeLine([ 250, 175, 250, 250 ]),
      line3 = makeLine([ 250, 250, 300, 350]),
      line4 = makeLine([ 250, 250, 200, 350]),
      line5 = makeLine([ 250, 175, 175, 225 ]),
      line6 = makeLine([ 250, 175, 325, 225 ]);

  canvas.add(line, line2, line3, line4, line5, line6);

  canvas.add(
    makeCircle(line.get('x1'), line.get('y1'), null, line),
    makeCircle(line.get('x2'), line.get('y2'), line, line2, line5, line6),
    makeCircle(line2.get('x2'), line2.get('y2'), line2, line3, line4),
    makeCircle(line3.get('x2'), line3.get('y2'), line3),
    makeCircle(line4.get('x2'), line4.get('y2'), line4),
    makeCircle(line5.get('x2'), line5.get('y2'), line5),
    makeCircle(line6.get('x2'), line6.get('y2'), line6)
  );

  canvas.on('object:moving', function(e) {
    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 });
        canvas.renderAll();
      });
    })();

我应该移动的点可以加分。所以，我加点必须和线一起作用。

如何将它集成到代码之上？

缩放问题 jsFiddle 示例 如果 zoomIn 或 zoomOut 变为，我的行添加损坏

Answer 1

缩放时需要调整保存线的坐标。

放大时

if (line) {
    line.x2 = line.x2 * SCALE_FACTOR;
    line.y2 = line.y2 * SCALE_FACTOR;
}

缩小时

if (line) {
    line.x2 = line.x2 / SCALE_FACTOR;
    line.y2 = line.y2 / SCALE_FACTOR;
}

---

fiddle - https://jsfiddle.net/65c3dxvv/