Fabric JS从fabric对象设置backgroundImage

Question

我想在织物帆布上创建一个像素描的图板一样的图板，如下所示：

​

let app = new Vue({
  el: '#app',
  computed: {
  	canvasSize() {
      let VM = this
      let  el, width, height
      el = VM.$refs.canvasBoxWrap
      width = el.clientWidth
      height  = el.clientHeight
      return  { width, height }
    }
  },
  data: {
    dSize: ''
  },
  mounted() {
    let VM = this
    
    VM.dSize = VM.canvasSize


    let fabricCanvasInit = () => {
      let canvas = new fabric.Canvas(VM.$refs.facanvas , {
        enableRetinaScaling: true
      })
      canvas.set({
        'enableRetinaScaling': true,
        'backgroundColor': '#dddddd'
      })
      canvas.setWidth( VM.canvasSize.width)
      canvas.setHeight(VM.canvasSize.width / 16 * 9)
      // canvas.set('enableRetinaScaling', true)
      // canvas.set('backgroundColor' , '#dddddd')

      let artBoard = new fabric.Rect({
        stroke: '#000',
        strokeWidth:1,
        fill: 'rgba(255,255,255,1)',
        width: VM.canvasSize.width  - 80,
        height: VM.canvasSize.width  / 16 * 9 - 80
        ,
        shadow : {
          color: 'rgba(0,0,0,0.5)',
          blur: 20,
          offsetX: 0,
          offsetY: 10,
          opacity: 0.6,
          fillShadow: true
        }
      })

      canvas.add(artBoard)
      canvas.artBoard = artBoard
      canvas.artBoard.center()
      canvas.artBoard.set({
        'selectable' : false
      })
      canvas.renderAll()
      console.log( canvas );
    }

    fabricCanvasInit()
  }
})

​

但是在这个演示中，“图板”是由一个面料rect对象创建的。当我更改其他对象(如' sendToBack()‘)时，我将重置"artboard“对象sendToBack()，我想要添加fabricCanvas.setBackgroundImage(.)这样的阴影。怎么做？

jsfiddle.net演示

Answer 1

​

(function() {
    var canvas = this.__canvas = new fabric.Canvas('canvas');
  
    // create a rectangle with a fill and a different color stroke
    var artBoard = new fabric.Rect({
        stroke: '#000',
        strokeWidth:1,
        fill: 'rgba(255,255,255,1)',
        width: canvas.width  - 40,
        height: canvas.height  - 40,
        selectable:false,
        shadow : {
          color: 'rgba(0,0,0,0.5)',
          blur: 20,
          offsetX: 0,
          offsetY: 10,
          opacity: 0.6,
          fillShadow: true,
          
        }
      })

    canvas.centerObject(artBoard);
    canvas.setBackgroundImage(artBoard);//add object as background
    canvas.renderAll();
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

​

您可以添加对象作为背景canvas.setBackgroundImage(obj)，现在可以作为图像使用，可以使用sendToBack()和all。这是您更新的小提琴。