граница выбора неверна, в то время как значение масштабирования холста не 1 - PullRequest
Новая
       8

граница выбора неверна, в то время как значение масштабирования холста не 1

0 голосов
/ 31 августа 2018

версия 2.3.6

Шаги для воспроизведения:

  1. нажмите «выбрать все», выбор в порядке.
  2. следующий щелчок «установить масштаб 1,5»,
  3. затем нажмите «выбрать все»,

Результат: Граница выделения теперь неверна. 

$(document).ready(function() {
  var canvas = new fabric.Canvas('canvas');
  canvas.add(new fabric.Rect({
    left: 50,
    top: 50,
    width: 75,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
  }));

  canvas.add(new fabric.Circle({
    left: 120,
    top: 120,
    radius: 30,
    fill: 'gray',
    stroke: 'black',
    strokeWidth: 3
  }));


  $("#select-all").click(function() {
    canvas.discardActiveObject();
    var elements = canvas.getObjects();
    var selection = new fabric.ActiveSelection(elements);
    canvas.setActiveObject(selection);
    canvas.requestRenderAll();
  });

  $("#set-zoom-15").click(function() {
    canvas.setZoom(1.2);
  });
  $("#set-zoom-10").click(function() {
    canvas.setZoom(1.0);
  });
  canvas.renderAll();
});
canvas {
  border: 1px solid #ccc;
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>


<input id="select-all" type="button" value="select all" />
<input id="set-zoom-15" type="button" value="set zoom as 1.5" />
<input id="set-zoom-10" type="button" value="set zoom as 1" />
<canvas id="canvas" width="400" height="400" style="border:1px solid red" />

Ожидаемое поведение:
Выбор работает отлично (например, масштаб равен 1), когда масштаб 1,5.

Фактическое поведение:
Неправильный выбор при увеличении 1,5.

1 Ответ

0 голосов
/ 31 августа 2018

Когда вы создаете ActiveSelection, вам нужно передать объект canvas. 

var selection = new fabric.ActiveSelection(elements, {
   canvas: canvas,
});

См. http://fabricjs.com/manage-selection для документации. 

$(document).ready(function() {
  var canvas = new fabric.Canvas('canvas');
  canvas.add(new fabric.Rect({
    left: 50,
    top: 50,
    width: 75,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
  }));

  canvas.add(new fabric.Circle({
    left: 120,
    top: 120,
    radius: 30,
    fill: 'gray',
    stroke: 'black',
    strokeWidth: 3
  }));


  $("#select-all").click(function() {
    canvas.discardActiveObject();
    var elements = canvas.getObjects();
    var selection = new fabric.ActiveSelection(elements, {
      canvas: canvas,
    });
    canvas.setActiveObject(selection);
    canvas.requestRenderAll();
  });

  $("#set-zoom-15").click(function() {
    canvas.setZoom(1.2);
  });
  $("#set-zoom-10").click(function() {
    canvas.setZoom(1.0);
  });
  canvas.renderAll();
});
canvas {
  border: 1px solid #ccc;
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>


<input id="select-all" type="button" value="select all" />
<input id="set-zoom-15" type="button" value="set zoom as 1.5" />
<input id="set-zoom-10" type="button" value="set zoom as 1" />
<canvas id="canvas" width="400" height="400" style="border:1px solid red" />
...