Невозможно переместить FabricJS SVG или групповые объекты в верхний левый угол холста - PullRequest
Новая
       18

Невозможно переместить FabricJS SVG или групповые объекты в верхний левый угол холста

0 голосов
/ 05 ноября 2018

Я работаю над приложением FabricJS, в котором я хочу, чтобы пользователь перемещал объекты в начало холста простым щелчком мыши, даже после поворота или масштабирования объектов или группы объектов. Для этого при нажатии я выполняю приведенный ниже код, когда пользователь нажимает: 

obj.left= obj.getBoundingRect().width/2;
obj.top=obj.getBoundingRect().height/2;

Отлично работает с прямоугольниками или текстами, но совершенно не работает при использовании shape, svg или даже группы объектов. Понятия не имею почему!

Ниже приведен полный код.

ВАЖНО: Пожалуйста, включите кросс-источник доступа в вашем браузере для загрузки svg. 

    this.__canvas = new fabric.Canvas('meCanvas', {
        preserveObjectStacking: true,
        height: 400,
        width: 400,
        backgroundColor: '#1F1F1F',
        canvasKey:'azpoazpoaz'
    });
   let rect = new fabric.Rect({
        fill: 'red',
        width: 200,
        height: 100,
        left: 100,
        top: 100,
        originX: 'center',
        originY: 'center',
        fontWeight: 'normal'
    });

    let text = new fabric.IText('Text', {
        fontFamily: 'Times',
        fontSize: 18,
        fill: 'white',
        left: 100,
        top: 100,
        originX: 'center',
        originY: 'center',
        fontWeight: 'normal'
    });

    let url = 'https://svgshare.com/i/9DX.svg';
    fabric.loadSVGFromURL(url,(objects,options)=> {

        let loadedObjects = fabric.util.groupSVGElements(objects, options);
        loadedObjects.left=50;
        loadedObjects.top=150;
        this.__canvas.add(loadedObjects);
    });

    let url2 = 'https://svgshare.com/i/9Cp.svg';
    fabric.loadSVGFromURL(url2,(objects,options)=> {

        let loadedObjects = fabric.util.groupSVGElements(objects, options);
        loadedObjects.left=100;
        loadedObjects.top=200;
        loadedObjects.angle=20;
        this.__canvas.add(loadedObjects);
    });

    this.__canvas.add(rect);
    this.__canvas.add(text);
    this.__canvas.renderAll();

    $('#pushorigin').click((e)=>{
        let obj = this.__canvas.getActiveObject();
        obj.left= obj.getBoundingRect().width/2;
        obj.top=obj.getBoundingRect().height/2;
        this.__canvas.requestRenderAll();
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <div style='display: inline-block'>
        <div>
            <canvas id='meCanvas' ref='meFabric'/>
        </div>
        <div>
            <button id='pushorigin'>Push to origin</button>
        </div>
    </div>

Если вы выделите текст или прямоугольник и нажмете кнопку «Push to origin», они перейдут к началу координат (верхний левый угол). Но то же действие не работает с svg (треугольником и многоугольником), и это даже хуже, если мы растянем эти svg или даже повернем их, они не пойдут в начало координат. То же самое при использовании группы объектов!

Я не знаю, что делать, я заблудился. Я гуглил несколько дней и ничего не нашел.

Пожалуйста, помогите!

1 Ответ

0 голосов
/ 05 ноября 2018

Установите originX: 'center',originY: 'center' для всего объекта, тогда ваше решение будет работать. 

this.__canvas = new fabric.Canvas('meCanvas', {
  preserveObjectStacking: true,
  height: 400,
  width: 400,
  backgroundColor: '#1F1F1F',
  canvasKey: 'azpoazpoaz'
});
let rect = new fabric.Rect({
  fill: 'red',
  width: 200,
  height: 100,
  left: 100,
  top: 100,
  originX: 'center',
  originY: 'center',
  fontWeight: 'normal'
});

let text = new fabric.IText('Text', {
  fontFamily: 'Times',
  fontSize: 18,
  fill: 'white',
  left: 100,
  top: 100,
  originX: 'center',
  originY: 'center',
  fontWeight: 'normal'
});

let url = 'https://svgshare.com/i/9DX.svg';
fabric.loadSVGFromURL(url, (objects, options) => {

  let loadedObjects = fabric.util.groupSVGElements(objects, options);
  loadedObjects.set({
    left: 50,
    top: 150,
    originX: 'center',
    originY: 'center'
  })

  this.__canvas.add(loadedObjects);
});

let url2 = 'https://svgshare.com/i/9Cp.svg';
fabric.loadSVGFromURL(url2, (objects, options) => {
  let loadedObjects = fabric.util.groupSVGElements(objects, options);
  loadedObjects.set({
    left: 100,
    top: 200,
    angle: 20,
    originX: 'center',
    originY: 'center'
  })
  this.__canvas.add(loadedObjects);
});

this.__canvas.add(rect);
this.__canvas.add(text);
this.__canvas.renderAll();

$('#pushorigin').click((e) => {
  let obj = this.__canvas.getActiveObject();
  obj.set({
    left: obj.getBoundingRect().width / 2,
    top: obj.getBoundingRect().height / 2
  }).setCoords()
  this.__canvas.requestRenderAll();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div style='display: inline-block'>
    <div>
        <canvas id='meCanvas' ref='meFabric'/>
    </div>
    <div>
        <button id='pushorigin'>Push to origin</button>
    </div>
</div>
...