Fabric JS从布料对象

Question

我想在帆布帆布元素中创建一个类似草图画板的画板 像这样：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是在这个演示中，＆＃34;画板＆＃34;由fabric rect对象创建。  当我更改其他对象时，例如＆＃39; sendToBack（）＆＃39;，我将重置＆＃34;画板＆＃34;对象sendToBack（） 我想添加带有shadowCanvas.setBackgroundImage（...）的阴影的rect 怎么做？

jsfiddle.net demo

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（）和所有。这是您更新的fiddle。