如何获取组内某些文本的 shadow.offsetX 值？

Question

我正在尝试引用与矩形分组的某些文本的阴影 offsetX 值，但在该组的 mousedown 事件中不断收到“无法读取属性 'offsetX' of null”。

请问如何获取组内某些文本的 shadow.offsetX 值？

代码sn-p：

... //在随机 X,Y 坐标处向画布添加一些文本 var X = Math.floor((Math.random() * 350) + 30); var Y = Math.floor((Math.random() * 350) + 30);

var text = new fabric.IText("This is some\ntest text", {
fontFamily: 'Courier New',
left: X+5,
top: Y+5,
    cursorColor: 'black',
    cursorDelay: 50,
    cursorDuration: 250,
    cursorWidth: 2,
    editingBorderColor: '#F30D0D',
    lineHeight: 1,
    fontSize: 15,
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontFamily: 'Arial',
    textAlign: 'left',
    textDecoration: '',
    fontSize: 15,
    fill: '#ffffff',
    id: 2,
    fill: '#000000'
});

//APPLY SHADOW TO TEXT
var shadow = {
    color: 'rgb(50,50,50)',
    blur: 3,    
    offsetX: 1,
    offsetY: 1
}
text.setShadow(shadow);

//ADD A RECTANGLE
var rect = new fabric.Rect({
    left: X,
    top: Y,
    width: 100,
    height: 100,
    fill: '#ffcc12',
    id: 2,
    opacity: 1
});

//canvas.add(rect);
//canvas.add(text);
var group = new fabric.Group([rect, text]);
canvas.add(group);
canvas.renderAll();

canvas.setActiveObject(text);
var activeObject = canvas.getActiveObject();
console.log(activeObject.id);

...

如果我不对对象进行分组，一切正常。

谢谢

Answer 1

分组后，所有对象都成为该组的子对象，您需要对单击的组使用.getObjects() 调用来获取子对象。下面的代码将正确地控制台记录shadow.offsetX

var canvas = new fabric.Canvas('c', { selection: false, preserveObjectStacking:true });
window.canvas = canvas;
var text = new fabric.IText("This is some\ntest text", {
fontFamily: 'Courier New',
left: 5,
top: 5,
    cursorColor: 'black',
    cursorDelay: 50,
    cursorDuration: 250,
    cursorWidth: 2,
    editingBorderColor: '#F30D0D',
    lineHeight: 1,
    fontSize: 15,
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontFamily: 'Arial',
    textAlign: 'left',
    textDecoration: '',
    fontSize: 15,
    fill: '#ffffff',
    id: 2,
    fill: '#000000'
});

//APPLY SHADOW TO TEXT
var shadow = {
    color: 'rgb(50,50,50)',
    blur: 3,    
    offsetX: 1,
    offsetY: 1
}
text.setShadow(shadow);

//ADD A RECTANGLE
var rect = new fabric.Rect({
    left: 0,
    top: 0,
    width: 100,
    height: 100,
    fill: '#ffcc12',
    id: 2,
    opacity: 1
});

//canvas.add(rect);
//canvas.add(text);
var group = new fabric.Group([rect, text]);


group.on('mousedown', function(e) {
  var  clickedGroup = e.target;
  var groupedObjects = clickedGroup.getObjects();
  var groupedText = groupedObjects[1];
  var shadowOffsetX = groupedText.shadow.offsetX;
  console.log(shadowOffsetX)
});

canvas.add(group);
canvas.renderAll();

canvas.setActiveObject(text);
var activeObject = canvas.getActiveObject();
console.log(activeObject.id);

canvas {
    border: 1px solid #ccc;
}

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