画布中的图层 - fabric.js

Question

我可以在canvas中创建图层吗？我需要一个位于对象上方的图层和另一个织物图层，其中包含在该图层内移动的对象。这可能吗？ 我使用fabric.js

编辑： 该组对我没有任何帮助。我需要在画布中创建区域，以便在其中移动对象，但不是其他区域。并知道相对于该区域的位置。 https://github.com/kangax/fabric.js/wiki/How-fabric-canvas-layering-works

- emmaO

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: ' #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>

- SilentTremor

---

这个群组不能满足我的需求。我需要在画布内创建区域，使得他能够在其中移动对象，但不能在其他区域内移动。同时需要知道对象在该区域内占据的位置。 - emmaO

我会尽力帮助你，给我一点时间。 - SilentTremor

谢谢。关于图层，他们在以下链接中提到了一些内容：https://github.com/kangax/fabric.js/wiki/How-fabric-canvas-layering-works 但我还不清楚如何得到我之前所问的东西。 - emmaO

kangax 在 Fabric Canvas 中解释了图层顺序是什么，我会尝试用类似你所需的东西构建一个小例子。 - SilentTremor