將對象添加到旋轉的組

Question

當我將對象添加到在FabricJS中旋轉的組時，它不考慮其他對象的角度。

重現步驟：

• 選擇對象
• 單擊添加到組
• 選擇組
• 單擊旋轉組
• 單擊添加到組

組現在包含具有不同角度的對象。

var canvas = new fabric.Canvas("canvas", { 
 
    width: 400, 
 
    height: 400 
 
}); 
 
canvas.add(new fabric.Triangle({ 
 
    top: 100, 
 
    left: 100, 
 
    width: 50, 
 
    height: 50, 
 
    fill: '#f55' 
 
})); 
 

 
$("#rotate").on("click", function() { 
 
    var currentObject = canvas.getActiveObject(); 
 
    var currentAngle = currentObject.angle; 
 
    var adjustedAngle = currentAngle + 90; 
 

 
    if (adjustedAngle >= 360) { 
 
    adjustedAngle = 0; 
 
    } 
 
    currentObject.setAngle(adjustedAngle); 
 
    canvas.renderAll(); 
 
}); 
 

 
$("#add").on('click', function() { 
 
    if (canvas.getActiveObject()) { 
 
    var activeObject = canvas.getActiveObject(); 
 
    var object; 
 

 
    console.log(activeObject.type); 
 

 
    if (activeObject.type == "triangle") { 
 

 
     object = fabric.util.object.clone(activeObject); 
 

 
     object.top = activeObject.top; 
 
     object.left = activeObject.left + 25; 
 
     object.fill = "#0000FF"; 
 

 
     var tempAngle = activeObject.angle; 
 

 
     activeObject.angle = 0; 
 
     object.angle = 0; 
 

 
     var group = new fabric.Group([activeObject, object], { 
 
     angle: tempAngle 
 
     }); 
 

 
     canvas.add(group); 
 
     canvas.setActiveObject(group); 
 
     canvas.remove(activeObject); 
 

 
    } else { 
 
     var activeGroup = activeObject; 
 
     var lastAddedObject = activeGroup.getObjects()[activeGroup.size() - 1]; 
 
     object = fabric.util.object.clone(lastAddedObject); 
 

 
     object.set('top', lastAddedObject.top + activeGroup.top + activeGroup.height/2); 
 
     object.set('left', lastAddedObject.left + activeGroup.left + activeGroup.width/2 + 25); 
 

 
     console.log(lastAddedObject.angle); 
 

 

 
     activeGroup.addWithUpdate(object); 
 
     canvas.renderAll(); 
 
    } 
 

 

 
    } 
 

 
});

canvas { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.0-rc.1/fabric.js"></script> 
 

 
<button id="rotate">Rotate</button> 
 
<button id="add">Add to Group</button> 
 
<canvas id="canvas" width=400 height=400></canvas>

Answer 1

我掛了最新的版本，其中加入項目組旋轉工作。

我真的不明白你試圖達到什麼樣的效果。 如果組的角度爲30，當您添加角度爲0的對象時，它將不會旋轉。

如果你想要一個對象在一個旋轉的組中跳轉並且像另一個那樣旋轉，你必須添加一些計算。在這些計算，你必須考慮你使用addWithUpdate組被破壞，再次創造和角度重置爲0

var canvas = new fabric.Canvas("canvas", { 
 
    width: 400, 
 
    height: 400 
 
}); 
 
canvas.add(new fabric.Triangle({ 
 
    top: 100, 
 
    left: 100, 
 
    width: 50, 
 
    height: 50, 
 
    fill: '#f55' 
 
})); 
 

 
$("#rotate").on("click", function() { 
 
    var currentObject = canvas.getActiveObject(); 
 
    var currentAngle = currentObject.angle; 
 
    var adjustedAngle = currentAngle + 90; 
 

 
    if (adjustedAngle >= 360) { 
 
    adjustedAngle = 0; 
 
    } 
 
    currentObject.setAngle(adjustedAngle); 
 
    canvas.renderAll(); 
 
}); 
 

 
$("#add").on('click', function() { 
 
    if (canvas.getActiveObject()) { 
 
    var activeObject = canvas.getActiveObject(); 
 
    var object; 
 

 
    console.log(activeObject.type); 
 

 
    if (activeObject.type == "triangle") { 
 

 
     object = fabric.util.object.clone(activeObject); 
 

 
     object.top = activeObject.top; 
 
     object.left = activeObject.left + 25; 
 
     object.fill = "#0000FF"; 
 

 
     var tempAngle = activeObject.angle; 
 

 
     activeObject.angle = 0; 
 
     object.angle = 0; 
 

 
     var group = new fabric.Group([activeObject, object], { 
 
     
 
     }); 
 

 
     canvas.add(group); 
 
     canvas.setActiveObject(group); 
 
     canvas.remove(activeObject); 
 

 
    } else { 
 
     var activeGroup = activeObject; 
 
     var lastAddedObject = activeGroup.getObjects()[activeGroup.size() - 1]; 
 
     object = fabric.util.object.clone(lastAddedObject); 
 

 
     object.set('top', lastAddedObject.top + activeGroup.top + activeGroup.height/2); 
 
     object.set('left', lastAddedObject.left + activeGroup.left + activeGroup.width/2 + 25); 
 
     //object.set('angle', activeObject.angle); 
 

 
     activeGroup.addWithUpdate(object); 
 
     canvas.renderAll(); 
 
    } 
 

 

 
    } 
 

 
});

canvas { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script> 
 

 
<button id="rotate">Rotate</button> 
 
<button id="add">Add to Group</button> 
 
<canvas id="canvas" width=400 height=400></canvas>