圖層canvas.js

Question

我可以在canvas中創建圖層嗎？我需要在對象和其他結構層之上的圖層與在該圖層內移動的對象。可能嗎？ 我使用fabric.js

編輯： 該組不爲我服務。我需要在畫布內創建可以移動對象的區域，而不是其他區域。並且要知道那個地區的那個位置。 https://github.com/kangax/fabric.js/wiki/How-fabric-canvas-layering-works

Answer 1

至少織物可以組形狀，並且將圍繞移動爲一體：

var canvas = new fabric.Canvas('c'); 
 

 
var rect1 = new fabric.Rect({ width: 100, height: 100, fill: '#0bda51' }); 
 
var circle = new fabric.Circle({ radius: 100, fill: '#4d5d53' }); 
 
var group1 = new fabric.Group([ circle, rect1 ], { left: 100, top: 100 }); 
 
canvas.add(group1); 
 

 
var circle1 = new fabric.Circle({ radius: 100, fill: '#a2add0' }); 
 
var circle2 = new fabric.Circle({ radius: 75, fill: '#0038a8' }); 
 
var circle3 = new fabric.Circle({ radius: 50, fill: ' \t #bf94e4' }); 
 

 
var group2 = new fabric.Group([ circle1, circle2, circle3 ], { left: 200, top: 200 }); 
 
canvas.add(group2); 
 

 
var shadow = { color: 'rgba(0,0,0,0.6)', blur: 20, offsetX: 10, offsetY: 10, opacity: 0.6, fillShadow: true, strokeShadow: true } 
 
var rect = new fabric.Rect({ left: 100, top: 100, fill: "#8ccd7b", stroke: "#000", width: 100,  height: 100, strokeWidth: 10, opacity: .8 }); 
 
rect.setShadow(shadow); 
 
canvas.add(rect);

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