Canvas fabric voir les scale dans les div

Fermé
franky1992 Messages postés 18 Date d'inscription lundi 18 janvier 2021 Statut Membre Dernière intervention 20 décembre 2021 - Modifié le 19 déc. 2021 à 20:30
Bonjour,

Bonjour, je cherche à afficher les scale des 6 cercles dans chaque Div approprié ! Quelqu'un aurait une solution ! Je ne connais pas vraiment les canevas !

Je cherche à savoir les positions top et left de chaque cercle pour l'enregistré dans une base de données !

Je ne trouve pas comment trouver le nom de l'objet sélectionné dans canvas pour lui donner un nom dans
document.getElementById('????').innerHTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.min.js"></script>
<canvas id="canvas" style= "border: 1px solid black" height= 400 width = 360></canvas>
<script type='text/javascript'>


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

var circle1 = new fabric.Circle({ opacity : 0.6, radius: 20, fill: '#ff0000', scaleY: 1.0, originX: 'center', originY: 'center'});
var text1 = new fabric.Text('1', { fontSize: 14, fill: '#ffffff', originX: 'center', originY: 'center', fontWeight: 'bold'});
var group1 = new fabric.Group([ circle1, text1 ], { left: 0, top: -0, angle: -0});
canvas.add(group1);

var circle2 = new fabric.Circle({ opacity : 0.6, radius: 20, fill: '#ff0000', scaleY: 1.0, originX: 'center', originY: 'center'});
var text2 = new fabric.Text('2', { fontSize: 14, fill: '#ffffff', originX: 'center', originY: 'center', fontWeight: 'bold'});
var group2 = new fabric.Group([ circle2, text2 ], { left: 50, top: -0, angle: -0});
canvas.add(group2);

var circle3 = new fabric.Circle({ opacity : 0.6, radius: 20, fill: '#ff0000', scaleY: 1.0, originX: 'center', originY: 'center'});
var text3 = new fabric.Text('3', { fontSize: 14, fill: '#ffffff', originX: 'center', originY: 'center', fontWeight: 'bold'});
var group3 = new fabric.Group([ circle3, text3 ], { left: 100, top: -0, angle: -0});
canvas.add(group3);

var circle4 = new fabric.Circle({ opacity : 0.6, radius: 20, fill: '#ff0000', scaleY: 1.0, originX: 'center', originY: 'center'});
var text4 = new fabric.Text('4', { fontSize: 14, fill: '#ffffff', originX: 'center', originY: 'center', fontWeight: 'bold'});
var group4 = new fabric.Group([ circle4, text4 ], { left: 150, top: -0, angle: -0});
canvas.add(group4);

var circle5 = new fabric.Circle({ opacity : 0.6, radius: 20, fill: '#ff0000', scaleY: 1.0, originX: 'center', originY: 'center'});
var text5 = new fabric.Text('5', { fontSize: 14, fill: '#ffffff', originX: 'center', originY: 'center', fontWeight: 'bold'});
var group5 = new fabric.Group([ circle5, text5 ], { left: 200, top: -0, angle: -0});
canvas.add(group5);

var circle6 = new fabric.Circle({ opacity : 0.6, radius: 20, fill: '#ff0000', scaleY: 1.0, originX: 'center', originY: 'center'});
var text6 = new fabric.Text('6', { fontSize: 14, fill: '#ffffff', originX: 'center', originY: 'center', fontWeight: 'bold'});
var group6 = new fabric.Group([ circle6, text6 ], { left: 250, top: -0, angle: -0});
canvas.add(group6);

canvas.forEachObject(function(o){ o.hasBorders = o.hasControls = false; });
canvas.renderAll();
canvas.on('object:moving', function (e) {
 var obj = e.target;
 // if object is too big ignore
 if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
  return;
 }        
 obj.setCoords();    
 // top-left  corner
 if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
  obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
  obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
 }
 // bot-right corner
 if(obj.getBoundingRect().top+obj.getBoundingRect().height  > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width  > obj.canvas.width){
  obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
  obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
 }
 document.getElementById('top1').innerHTML = obj.getBoundingRect().top;
 document.getElementById('left1').innerHTML = obj.getBoundingRect().left;

});

</script>
</body>
<div id="top1">Top</div>
<div id="left1">Left</div>-
<div id="top2">Top</div>
<div id="left2">Left</div>-
<div id="top3">Top</div>
<div id="left3">Left</div>-
<div id="top4">Top</div>
<div id="left4">Left</div>-
<div id="top5">Top</div>
<div id="left5">Left</div>-
<div id="top6">Top</div>
<div id="left6">Left</div>



Merci :)