Любые опции, доступные для установки объектов относительно центральной точки холста вместо верхней и левой в FabricJS - PullRequest
Новая
       11

Любые опции, доступные для установки объектов относительно центральной точки холста вместо верхней и левой в FabricJS

0 голосов
/ 20 сентября 2019

У меня проблема с изменением ориентации мобильного телефона.Когда ориентация изменяет размер холста, настройте его соответствующим образом.И объекты на холсте существуют в том же положении после ориентации, где они были до ориентации относительно холста слева и сверху.

Это будет более четким на изображении.enter image description here

Я хочу изменить положение объектов в окне: изменить размер относительно центра холста вместо левого и верхнего.Пожалуйста помоги!

1 Ответ

0 голосов
/ 25 сентября 2019

Вы можете центрировать объект на холсте с помощью canvas.centerObject(object);. 

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

var dia1 = new fabric.Circle({
  radius: 12,
  left: 0,
  top: 0,
  originX: 'center',
  originY: 'center',
  fill: 'transparent',
  strokeWidth: 5,
  stroke: "red",
  width: 50,
  height: 50,
});
var dia2 = new fabric.Circle({
  radius: 5,
  left: 0,
  top: 0,
  originX: 'center',
  originY: 'center',
  fill: 'red',
  width: 50,
  height: 50,
});
var targetEl = new fabric.Group([dia1, dia2], {
  originX: 'center',
  originY: 'center',
});

//center object on canvas
canvas.centerObject(targetEl);
canvas.add(targetEl);
canvas.renderAll();

//center on window resize
$(window).resize(function() {
  canvas.centerObject(targetEl);
  canvas.renderAll();
});
canvas {
  border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>

<canvas id="c" width="600" height="300"></canvas>
...