텍스트를 왼쪽, 가운데 및 오른쪽으로 fabricjs로 정렬

Question

내 캔버스에 텍스트가 있습니다. 버튼을 사용하여 텍스트를 왼쪽, 가운데 및 오른쪽으로 정렬하려면 fabricjs 캔버스를 사용하려고합니다. 나는 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>

에 추가하기 한