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 示例：如果进行缩放，我的线条会变得不完整。

- alperenAsa

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/

- potatopeelings

Answer 2

这段文本的英译中为：

解决这个项目 --->

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

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) {
        circle.line1 = null;
        circle.line2 = null;
        canvas.add(circle);
    }   

    point1 = new fabric.Point(x, y);
    if(line){
        line = new fabric.Line([line.get('x2'), line.get('y2'), x, y], {
            fill: 'grey',
            stroke: 'grey',
            hasControls: false,
            hasBorders: false,
            lockMovementX: true,
            lockMovementY: true,
            selectable: false,
            hoverCursor: 'default'
        });
    }else{
        line = new fabric.Line([x, y, x, y], {
            fill: 'grey',
            stroke: 'grey',
            hasControls: false,
            hasBorders: false,
            lockMovementX: true,
            lockMovementY: true,
            selectable: 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([lastLine.get('x2'), lastLine.get('y2'),firstLine.get('x1'), firstLine.get('y1')], {
            fill: 'grey',
            stroke: 'grey',
            hasControls: false,
            hasBorders: false,
            lockMovementX: false,
            lockMovementY: false,
            selectable: false,
            hoverCursor: 'default'
        });
        canvas.add(line);
        var lines = canvas.getObjects('line');
        var circles = canvas.getObjects('circle');

        for(i = 1; i < circles.length - 1; i++) {
            for(j = 0; j < lines.length; j++) {
                if(circles[i].getLeft() == lines[j].get('x1') && circles[i].getTop() == lines[j].get('y1')) {
                    circles[i].line2 = lines[j];
                    circles[i].line1 = lines[j - 1];
                }
            }
        }
        circles[0].line1 = lines[lines.length - 1];
        circles[0].line2 = lines[1];
        circles[circles.length - 1].line2 = lines[lines.length - 1];
        circles[circles.length - 1].line1 = lines[0];

        bool = false;
    });

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

    canvasScale = canvasScale * SCALE_FACTOR;

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

    var circles = canvas.getObjects('circle');

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

        circles[i].scaleX = scaleX * SCALE_FACTOR;
        circles[i].scaleY = scaleY * SCALE_FACTOR;
        circles[i].left = left * SCALE_FACTOR;
        circles[i].top = top * SCALE_FACTOR;
        circles[i].setCoords();

        var coord = circles[i].getCenterPoint();
        circles[i].line1.set({
        'x2': coord.x,
        'y2': coord.y
        });
        circles[i].line2.set({
        'x1': coord.x,
        'y1': coord.y
        });

    }

    canvas.renderAll();
    canvas.calcOffset(); 
});

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

    canvasScale = canvasScale / SCALE_FACTOR;

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

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

        circles[i].scaleX = scaleX * (1 / SCALE_FACTOR);
        circles[i].scaleY = scaleY * (1 / SCALE_FACTOR);
        circles[i].left = left * (1 / SCALE_FACTOR);
        circles[i].top = top * (1 / SCALE_FACTOR);

        circles[i].setCoords();
        var coord = circles[i].getCenterPoint();
        circles[i].line1.set({
        'x2': coord.x,
        'y2': coord.y
        });
        circles[i].line2.set({
        'x1': coord.x,
        'y1': coord.y
        });

    }

    canvas.renderAll();
    canvas.calcOffset();    
});

canvas.on('object:moving', function(e) {
    var p = e.target;
    var coord = p.getCenterPoint();

    p.line1.set({ 'x2': coord.x, 'y2': coord.y });
    p.line2.set({ 'x1': coord.x, 'y1': coord.y });
    canvas.renderAll();
  });

- alperenAsa