Fabric.js 一直无法操作新加载的背景图片

Question

我使用vue和Fabric.js开发了缩放和拖动图片的function。 当我从服务器界面获取不同的图片参数时，canvas 仍然可以刷新，但是当我拖动和缩放时，图片会跳转到第一个请求的图片

这是我的代码

//template
<canvas id="canvas" width="500px" ref="can" height="480px" style="border: 1px solid #333"></canvas>

 //script 
initCanvas (url) {


      var canvas = new Fabric.Canvas('canvas')

      canvas.setBackgroundImage(
        url,
        canvas.renderAll.bind(canvas),
        {
          scaleX: canvas.width / 1654,
          scaleY: canvas.height / 2338
        }
      )


      canvas.on('mouse:down', function (e) {
        this.panning = true
        canvas.selection = false
      })

      canvas.on('mouse:up', function (e) {
        this.panning = false
        canvas.selection = true
      })

      canvas.on('mouse:move', function (e) {
        if (this.panning && e && e.e) {
          var delta = new Fabric.Point(e.e.movementX, e.e.movementY)
          canvas.relativePan(delta)
        }
      })

      canvas.on('mouse:wheel', function (e) {
        var zoom = (event.deltaY > 0 ? -0.1 : 0.1) + canvas.getZoom()
        zoom = Math.max(0.1, zoom) 
        zoom = Math.min(3, zoom) 
        var zoomPoint = new Fabric.Point(event.pageX, event.pageY)
        canvas.zoomToPoint(zoomPoint, zoom)
      })
    },

Answer 1

您可以尝试使用fabric.Image.fromURL以获得更多参考，您可以从下面的官方链接查看源代码。

http://fabricjs.com/docs/fabric.js.html#line20735 http://fabricjs.com/docs/fabric.Image.html#.fromURL

fabric.Image.fromURL(url, function (img) {
    canvas.setBackgroundImage(img);
    canvas.setHeight(img.height);
    canvas.setWidth(img.width);
});