Question

我有7个对象（SVG），这些对象必须在画布上水平分布，但是我不知道该怎么做。

下面的代码可以正常工作，除了在for循环中它不等待图像加载，因此结果是图像对齐，但顺序随机。构造方法loadSVGFromURL中的scale值始终为2。

我也尝试将fabric.loadSVGFromURL放在一个单独的函数中，但是后来我无法使用此方法计算对象的宽度。

like：

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

的链接

Answer 1

这是我的结果 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

映射位置

使用fabricJS在画布上水平分布对象

1 个答案: