面料JS對象對齊方式不像預期的那樣工作

我試圖對齊組中的對象。當我將第一個對象對齊到左邊，中間或右邊時，它是成功的，然後我嘗試了第二個對象，第一個對象被移動了！面料JS對象對齊方式不像預期的那樣工作

請參考下面（GIF）圖像： Fabric JS Object Alignment

我使用HTML5畫布，布JS &的jQuery的開發。

這裏是代碼：

$(document).ready(function() { 

    var canvas = new fabric.Canvas("canvas", { preserveObjectStacking: true }); 

    // create rectangle 
    var rect = new fabric.Rect({ 
    left: 50, 
    top: 50, 
    width: 300, 
    height: 100, 
    fill: '#ff0000' 
    }); 

    // create circle 
    var text = new fabric.Text("Align Me next", { 
    left: 190, 
    top: 320, 
    fontSize: 20 
    }); 

    // create text 
    var text2 = new fabric.Text("Align me first", { 
    left: 100, 
    top: 200, 
    fontSize: 20 
    }); 

    canvas.add(rect, text, text2); 
    canvas.renderAll(); 

// GROUP ON SELECTION 
canvas.on("selection:created", function(e) { 
    var activeObj = canvas.getActiveGroup(); 
    if(activeObj.type === "group") { 
    console.log("Group created"); 

var groupWidth = e.target.getWidth(); 
var groupHeight = e.target.getHeight(); 


e.target.forEachObject(function(obj) { 
    var itemWidth = obj.getBoundingRect().width; 
    var itemHeight = obj.getBoundingRect().height; 

    // ================================ 
     // OBJECT ALIGNMENT: " H-LEFT " 
     // ================================ 
    $('#objAlignLeft').click(function() { 
     obj.set({ 
     left: -(groupWidth/2), 
     originX: 'left' 
     }); 
    obj.setCoords(); 
    canvas.renderAll(); 
    }); 
    // ================================ 
     // OBJECT ALIGNMENT: " H-CENTER " 
     // ================================ 
    $('#objAlignCenter').click(function() { 
     obj.set({ 
     left: (0 - itemWidth/2), 
     originX: 'left' 
     }); 
    obj.setCoords(); 
    canvas.renderAll(); 
    }); 
    // ================================ 
     // OBJECT ALIGNMENT: " H-RIGHT " 
     // ================================ 
    $('#objAlignRight').click(function() { 
     obj.set({ 
     left: (groupWidth/2 - itemWidth/2), 
     originX: 'center' 
     }); 
    obj.setCoords(); 
    canvas.renderAll(); 
    }); 

}); 

} 
}); // END OF " SELECTION:CREATED " 

});

任何幫助，將不勝感激。提前致謝。

來源

2017-05-03 Dian Agung

它不動我嘗試和我對齊下一個文本移動一點點前進第一個文本不移動檢查https://jsfiddle.net/Venkatachalam_Perisetla/mt0ccqq2/1/ – Venkatachalam

它仍然移動另一個對象，當你嘗試第二次對齊。 –

你可以檢查我的jsfiddle鏈接，否則請解釋我什麼是你的確切要求。 – Venkatachalam

我想這就是你要找的，對嗎？

這裏的融合到你的代碼...

canvas.on("selection:cleared", function(e) { 
    $('#objAlignLeft').off('click'); 
    $('#objAlignCenter').off('click'); 
    $('#objAlignRight').off('click'); 
});

而這裏的所有重要的jsfiddle，https://jsfiddle.net/rekrah/xxrqbhph/。

讓我知道你是否還有其他問題。樂於幫助！

來源

2017-05-04 19:58:27

很好，謝謝！ –

面料JS對象對齊方式不像預期的那樣工作

回答

相關問題