반지름을 표시하는 FabricJS 원

Question

내 프로젝트에서 fabricjs를 사용하고 있지만 원단에 원의 반지름을 표시하려고합니다. 어떻게해야하는지 물어봐도 될까요? 이 정보를 필요로하는 서클이 최대 20 개까지있을 수 있으며 서클에 제어 기능이 있으므로 반경 텍스트를 보정하여 확장 할 수 있습니다. 이것이 가능하지 않다면

http://jsfiddle.net/wayneker/a3q5c40r/

var canvas = new fabric.Canvas('canvas'); 

var circle = new fabric.Circle({ 
    left: 50, 
    top: 50, 
    fill: "", 
    radius: 40, 
    hasControls: false, 
    hasRoatatingPoint: false, 
    stroke: 'red', 
    strokeWidth: 1 

}); 

canvas.add(circle);　 

, 사용자 입력을 통해 반경을 설정할 수 있는가?

Answer 1

나는 당신이 무엇을하려고하는지 잘 모르겠습니다. 아래 예제에서는 원과 텍스트 상자의 캔버스에 그룹으로 광고하는 버튼이 있습니다. 해당 그룹 중 하나를 선택하면 반경을 변경할 수있는 범위 입력이 나타납니다. 변화에 따라 우리는 그룹에 접근하여 원의 텍스트와 반경을 업데이트합니다.

window.canvas = new fabric.Canvas('canvas'); 
 

 
function getCircleGroup(radius = 40) { 
 
    var text = new fabric.Text(radius.toString(), { 
 
     left: 50, 
 
     top: 50, 
 
    }); 
 
    var circle = new fabric.Circle({ 
 
     left: 50, 
 
     top: 50, 
 
     fill: "", 
 
     radius: radius, 
 
     hasControls: false, 
 
     hasRoatatingPoint: false, 
 
     stroke: 'red', 
 
     strokeWidth: 1 
 

 
    }); 
 
    
 
    return new fabric.Group([ circle, text ], { 
 
    \t  lockScalingX: true, 
 
    \t  lockScalingY: true, 
 
    }); 
 

 
} 
 

 
var button = document.querySelector('button'); 
 
button.addEventListener('click',() => { 
 
    var group = getCircleGroup(); 
 
    canvas.add(group); 
 
    canvas.setActiveObject(group); 
 
    canvas.renderAll(); 
 
}); 
 

 
canvas.on('object:selected', (o) => { 
 
    var r = document.querySelector('.radiusChange'); 
 
    r.style.display = 'block'; 
 
    r.querySelector('input').value = o.radius; 
 
}) 
 

 
canvas.on('selection:cleared',() => { 
 
\t var r = document.querySelector('.radiusChange'); 
 
\t r.style.display = 'none'; 
 
}); 
 

 
var radiusChanger = document.querySelector('.radiusChange input') 
 
radiusChanger.addEventListener('change', (e) => { 
 
    var group = canvas.getActiveObject(); 
 
    var top = group.top; 
 
    var left = group.left; 
 
    group.item(0).setRadius(parseInt(e.target.value)); 
 
    group.item(1).text = e.target.value; 
 
    group._calcBounds(); 
 
    group._updateObjectsCoords(); 
 
    group.top = top; 
 
    group.left = left; 
 
    canvas.renderAll(); 
 
})

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.6/fabric.min.js"></script> 
 
<button>add circle</button> 
 
<div class="radiusChange" style="display:none;"> 
 
<br />change radius: <input type="range" max=100 min=10 step=1 /></div> 
 
<canvas id="canvas" width="300" height="300" style="border:1px solid;"></canvas>