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 :)
Afficher la suite