Как отобразить размер по форме после масштабирования с использованием js js?

Question

Я работаю на холсте, используя js library.i. Я не могу отображать размер масштабированной формы. я хочу, чтобы нарисовать форму, как:

я попробовать и показать ractangle с текстом, но у меня есть более чем один ractangle и я хочу, чтобы отобразить размер на все после того, как они масштабируются:

var rect1 = new fabric.Rect({ 
         left: 100, 
         top: 50, 
         width: 200, 
         height: 100, 
         fill: 'white', 
         stroke: '#ccc', 
         bringToFront: true 
        }); 

var t = new fabric.IText("200", { 
    top:110, 
    left: 100, 
    width: 50, 
    height:50, 
    backgroundColor: '#FFFFFF', 
    fill: '#000000', 
    fontSize: 12, 
    Scaling: false, 
    hasRotatingPoint: false, 
    transparentCorners: false, 
    selectable: false, 
    angle: 270, 
    cornerSize: 7 
}); 

var group1 = new fabric.Group([ rect1, t,h ]); canvas.add(group1);` 

Answer 1

function updateMeasures(evt) { 
 
    var obj = evt.target; 
 
    if (obj.type != 'group') { 
 
    return; 
 
    } 
 
    var width = obj.getWidth(); 
 
    var height = obj.getWidth(); 
 
    obj._objects[1].text = width.toFixed(2) + 'px'; 
 
    obj._objects[1].scaleX= 1/obj.scaleX; 
 
    obj._objects[1].scaleY= 1/obj.scaleY; 
 
    obj._objects[2].text = height.toFixed(2) + 'px'; 
 
    obj._objects[2].scaleX= 1/obj.scaleY; 
 
    obj._objects[2].scaleY= 1/obj.scaleX; 
 
} 
 
canvas = new fabric.Canvas('canvas'); 
 
var rect = new fabric.Rect({width: 100, height: 50, top:0, left: 0, fill:'blue', stroke: 'red'}); 
 
var text = new fabric.Text('W',{top: 4, left: 100, fontSize: 16, originX: 'right'}); 
 
var text2 = new fabric.Text('H',{top: 50, left: 0, fontSize: 16, originX: 'left', angle: -90}); 
 
var group = new fabric.Group([rect, text, text2], {strokeWidth:0}); 
 
canvas.add(group); 
 
canvas.on("object:scaling", updateMeasures);

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

идея заключается в основном для создания группы, прямых и текстовых объектов в качестве меток. Это базовая реализация, и вы должны использовать ее как подсказку для своего конкретного решения. Если вам нужно широко использовать его, вы должны подумать о создании своего собственного подкласса, чтобы справиться с этим. Эта конкретная реализация должна учитывать коэффициент масштабирования в группах, и то, что вы действительно измеряете, является размерность группы, которая в основном определяется масштабированным прямоугольником. Ширина и высота прямого пребывания при 100 и 50, но групповой масштабный коэффициент дает вам больший визуальный размер.

Наконец, мы используем событие «объект: масштабирование» холста для запуска нашего обновления и удаления текста при каждом масштабировании объекта на холсте.