ファブリックJSは、私は生地のキャンバスにスケッチのアートボードのようなアートボードを作成したいファブリックオブジェクト

Question

からbackgroundImageの設定は、このような をelemet：

let app = new Vue({ 
 
    el: '#app', 
 
    computed: { 
 
    \t 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（）」のような他のオブジェクトを変更すると、「アートボード」オブジェクトがリセットされますsendToBack（） fabricCanvas.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>

あなたは今、これがイメージとして動作し、あなたがsendToBack（）とすべてを使用することができ、背景canvas.setBackgroundImage(obj)などのオブジェクトを追加することができます。ここであなたの更新はfiddleです。