Распределите объекты по холсту горизонтально с тканьюJS - PullRequest
Новая
       7

Распределите объекты по холсту горизонтально с тканьюJS

0 голосов
/ 07 октября 2018

У меня есть 7 объектов (SVG), которые должны быть распределены по горизонтали на холсте, но я не могу понять, как это сделать.

Приведенный ниже код любезно работает, за исключением того, что в цикле for он не работает.не ждите, пока изображение будет загружено, поэтому в результате изображения будут выровнены, но в случайном порядке.Более того, значение масштаба внутри метода ткани loadSVGFromURL всегда 2.

Я также пытался поместить fabric.loadSVGFromURL в отдельную функцию, но тогда я не могу использовать этот метод для подсчета ширины объектов.

вроде: 

function loadSVG(url, scale) {

}

Есть ли какой-нибудь более простой способ достичь моей цели?

Ниже моего кода: 

this.canvas = new fabric.Canvas(this.$refs.image, {
    backgroundColor: '#fff',
})

this.canvas.clear()


var width = this.canvas.getWidth(),
    imgsArr = [
        {url: "/storage/slot-images/image_162.svg", scale: 2},
        {url: "/images/storymachine/arrow.svg", scale: 0.5},
        {url: "/storage/slot-images/image_31.svg", scale: 2},
        {url: "/images/storymachine/arrow.svg", scale: 0.5},
        {url: "/storage/slot-images/image_149.svg", scale: 2},
        {url: "/images/storymachine/arrow.svg", scale: 0.5},
        {url: "/storage/slot-images/image_193.svg", scale: 2},
    ],
    cacheWidth = 0


for (var i = 0; i < imgsArr.length; i++) {
    var url = imgsArr[i].url,
        scale = imgsArr[i].scale

        fabric.loadSVGFromURL(url, (objs, opts) => {
            var obj = fabric.util.groupSVGElements(objs, opts)
            this.canvas.add(obj)
            obj.center()
            obj.set({
                selectable: false,
                centeredScaling: true,
                scaleX: scale,
                scaleY: scale,
                left: cacheWidth,
            })
            cacheWidth = cacheWidth + obj.getScaledWidth()
        })
        this.canvas.renderAll()
}

ссылка на JSfiddle

1 Ответ

0 голосов
/ 07 октября 2018

Вот мой результат https://jsfiddle.net/mariusturcu93/Lpjz2x38/31/

el = document.getElementById('canvas'),
  canvas = new fabric.Canvas(el, {
    backgroundColor: '#E8E0C8'
  }),
  imgsArr = [{
      url: "https://cdn.rawgit.com/simonepozzobon/shortology-new/slot-machine/public/images/storymachine/300icone_162.svg",
      scale: 2
    },
    {
      url: "https://cdn.rawgit.com/simonepozzobon/shortology-new/animazione-menu/public/images/storymachine/arrow.svg",
      scale: 0.5
    },
    {
      url: "https://cdn.rawgit.com/simonepozzobon/shortology-new/slot-machine/public/images/storymachine/300icone_31.svg",
      scale: 2
    },
    {
      url: "https://cdn.rawgit.com/simonepozzobon/shortology-new/animazione-menu/public/images/storymachine/arrow.svg",
      scale: 0.5
    },
    {
      url: "https://cdn.rawgit.com/simonepozzobon/shortology-new/slot-machine/public/images/storymachine/300icone_149.svg",
      scale: 2
    },
    {
      url: "https://cdn.rawgit.com/simonepozzobon/shortology-new/animazione-menu/public/images/storymachine/arrow.svg",
      scale: 0.5
    },
    {
      url: "https://cdn.rawgit.com/simonepozzobon/shortology-new/slot-machine/public/images/storymachine/300icone_193.svg",
      scale: 2
    },
  ]



let cacheWidth = 0
var total = 0;
var interval = setInterval(checkImages, 200);
for (var i = 0; i < imgsArr.length; i++) {
  var url = imgsArr[i].url
  let scale = imgsArr[i].scale

  fabric.loadSVGFromURL(url, (function(i) {
    return function(objs, opts) {
      var obj = fabric.util.groupSVGElements(objs, opts)
      canvas.add(obj).renderAll()
      obj.center()
      obj.set({
        selectable: false,
        centeredScaling: true,
        scaleX: scale,
        scaleY: scale,
        left: cacheWidth,
        id: 'object_' + i,
        visible: false
      })

      cacheWidth = cacheWidth + obj.getScaledWidth();
      total++;
    }

  })(i))
}
canvas.renderAll()

// make the canvas responsive
resize()
window.addEventListener('resize', resize)

// resize the canvas
function resize() {
  var el = document.getElementById('container'),
    size = el.offsetWidth,
    scaleFactor = canvas.getWidth() / 1000

  // resize canvas
  canvas.setWidth(size)
  canvas.setHeight(size)

  // scale using scale Factor and zoom
  canvas.setZoom(scaleFactor)
  canvas.calcOffset()
  canvas.renderAll()
}

function checkImages() {
  var cacheWidth = 0;
  if (total == imgsArr.length) {
    for (var i = 0; i < imgsArr.length; i++) {
      //   debugger
      obj = getObjectById('object_' + i);
      if (obj.length) {
        obj[0].set('left', cacheWidth);
        obj[0].set('visible', true);
        cacheWidth = cacheWidth + obj[0].getScaledWidth();
      }

    }
    canvas.renderAll();
    clearInterval(interval)
  }
}

function getObjectById(id) {
  return canvas.getObjects().filter(function(o) {
    return o.id === id;
  })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.js"></script>
<div class="container" id="container">
  <div class="row">
    <div class="col">
       <canvas id="canvas"></canvas>
    </div>
  </div>  
</div>

Первоначально я установил visible в значение false.Я использовал setInterval, чтобы проверить, когда изображения загружаются на холст.Когда все загружено, я повторяю процесс позиционирования.Я отображаю положение, используя object.id

...