CODEWITHSUNDEEP
fabricjs
J Chen
J Chen

Reputation: 11

Fabric JS set backgroundImage from fabric object

I want to create an artboard like sketch's artboard in fabric canvas elemet like this:

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

but in this demo, the "artboard" was created by a fabric rect object. When I change other object , like 'sendToBack()', I will reset the "artboard" object sendToBack() I want add the rect with shadow like fabricCanvas.setBackgroundImage(...) how to do that?

jsfiddle.net demo

Upvotes: 0

Views: 1779

Answers (1)

Durga
Durga

Reputation: 15614

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

You can add object as background canvas.setBackgroundImage(obj), Now this works as image and you can use sendToBack() and all . Here is your updated fiddle.

Upvotes: 2

Related Questions