左、中央、右をfabricjsと整列する

Question

私のキャンバスにテキストがあり、ボタンを使ってテキストを左、中央、右に整列しようとしています。私はthis exampleを見ましたが、選択ボックスにボタンを使用する方が好きです。私は束を試して、かなり失われた気分です。

var $ = function(id){return document.getElementById(id)}; 
 

 
var canvas = this.__canvas = new fabric.Canvas('c'); 
 
canvas.setHeight(300); 
 
canvas.setWidth(300); 
 

 
document.getElementById('text-align').onclick = function() { 
 
      canvas.getActiveObject().setTextAlign(this.value); 
 
      canvas.renderAll(); 
 
     }; 
 
     
 
     var text = new fabric.IText('Some demo\nText', { 
 
    left: 10, 
 
    top: 10, 
 
    fontSize: 22, 
 
    hasBorders: true, 
 
    hasControls: true, 
 
    cornerStyle: 'circle', 
 
    lockRotation: true, 
 
    hasControls: true, 
 
    lockUniScaling: true, 
 
    hasRotatingPoint: false, 
 
}) 
 
canvas.add(text);

canvas { 
 
    border: 1px solid #dddddd; 
 
    margin-top: 10px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script> 
 
<button id="text-align" value="left">Left</button> 
 
<button id="text-align" value="center">Center</button> 
 
<button id="text-align" value="right">Right</button> 
 
<canvas id="c"></canvas>

Answer 1

問題は、ファブリックのコードではありません。あなたがすべてのボタンに同じIDを使用していたためです。 document.getElementByIdリターンは最初のインスタンスのみ、したがって、あなたのクリックリスナーが「左」ボタンのみ

var $ = function(id) { 
 
    return document.getElementById(id) 
 
}; 
 

 
var canvas = this.__canvas = new fabric.Canvas('c'); 
 
canvas.setHeight(300); 
 
canvas.setWidth(300); 
 

 
document.querySelectorAll('.text-align').forEach(function(btn) { 
 
    btn.onclick = function() { 
 
    canvas.getActiveObject().setTextAlign(this.value); 
 
    canvas.renderAll(); 
 
    }; 
 
}) 
 

 
var text = new fabric.IText('Some demo\nText', { 
 
    left: 10, 
 
    top: 10, 
 
    fontSize: 22, 
 
    hasBorders: true, 
 
    hasControls: true, 
 
    cornerStyle: 'circle', 
 
    lockRotation: true, 
 
    hasControls: true, 
 
    lockUniScaling: true, 
 
    hasRotatingPoint: false, 
 
}) 
 
canvas.add(text);

canvas { 
 
    border: 1px solid #dddddd; 
 
    margin-top: 10px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script> 
 
<button class="text-align" value="left">Left</button> 
 
<button class="text-align" value="center">Center</button> 
 
<button class="text-align" value="right">Right</button> 
 
<canvas id="c"></canvas>

に追加なっていました