Question

我正在尝试引用一些用矩形组合的文本的阴影offsetX值，但是我在该组的mousedown事件中不断获得'无法读取属性'offsetX'的null。

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

代码段：

... //在随机X，Y CO-ORDINATES添加一些文本到CANVAS 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>

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

1 个答案: