グループ内の一部のテキストのshadow.offsetX値を取得するにはどうすればよいですか？

Question

私は、長方形でグループ化されたテキストのシャドウのoffsetX値を参照しようとしていますが、グループのmousedownイベントで 'offsetX'のnullプロパティを読み取れません。

グループ内の一部のテキストのshadow.offsetX値を取得するにはどうすればよいですか？

コードスニペット：

... // RANDOM 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); 

...

物事はOK働きます。グループ化されたすべてのオブジェクトは、グループの子になり、あなたは子オブジェクトを取得するためにクリックしたグループに.getObjects()呼び出しを使用する必要がある場合

はあなたに

Answer 1

ありがとうございます。以下のコードは、適切に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>