Fabric JS从fabric对象设置backgroundImage答案

【问题标题】：Fabric JS set backgroundImage from fabric objectFabric JS从fabric对象设置backgroundImage
【发布时间】：2017-07-11 03:33:17
【问题描述】：

我想在织物画布元素中创建一个类似于素描画板的画板像这样：

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()
  }
})

但在这个演示中，“画板”是由一个织物矩形对象创建的。当我更改其他对象时，例如“sendToBack()”，我将重置“画板”对象 sendToBack() 我想添加带有阴影的矩形，如 fabricCanvas.setBackgroundImage(...) 该怎么做？

jsfiddle.net demo

【问题讨论】：

标签： fabricjs

【解决方案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 。这是您更新后的fiddle。

【讨论】：