2

I'm adding objects to a canvas and keeping track of their type and count number. When I add them to the canvas everything works great but when I'm modifying them I'm struggling with which object was modified in my fabric.js canvas but only if it's a cardtype. I want to get it's coordinates the cardtype and the cardcount. I made a fiddle that shows everything working except that I get the info for all objects even when I only modify one object. How do I only get the actual activeObject and it's info?

Here's the js in the fiddle that I've been trying to work out.

        //**********When card is moved************  

    canvas.on('object:modified', onObjectModified);

          function onObjectModified(e) {    

          var activeObject = e.target;

          alert(activeObject.get('left')+' '+ activeObject.get('top')+' '+cardtype+' '+cardcount);                  

       };
kangax
  • 38,898
  • 13
  • 99
  • 135
Progrower
  • 363
  • 5
  • 18
  • What do you think of attaching an ID property to the object you are saving on canvas so you can check which object do you want to get? – Allan Chua Jan 18 '14 at 15:39
  • I'm doing that when I add it to the canvas so I can do an ajax call to save it to a database. The id is equal to the cardcount at the time it's added. So yes if I can grab the id then I would know which object was modified. Just not sure how to make sure that's what I'm getting. – Progrower Jan 18 '14 at 15:54
  • Did you see my [fiddle](http://jsfiddle.net/progrower/a4PrY/44/) – Progrower Jan 18 '14 at 16:00

1 Answers1

4

To get selected canvas object with fabric.js you need to use methood getActiveObject() it returns exactly what you need. Like:

alert('Modified object x,y: ' + this.getActiveObject().get('left') + 
  ' ' + this.getActiveObject().get('left') + 
  ' it\'s id is: ' + this.getActiveObject()._objects[0].id);

Here's fiddle.

And remember to check your brackets. Now you add onObiectModified as an eventhandler for each yellowcard, and I'll be called for each. Just move canvas.on('object:modified', onObjectModified); elsewhere, for example after var declarations.

Oh and if you use test enviroments like jsFiddle with fabric.js, please use as link https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js instead of https://raw.github.com/kangax/fabric.js/master/dist/fabric.js, (note removing of dot!) or else it won't work on Chrome (see this question)

Hope it helps.

Community
  • 1
  • 1
Konrad 'Zegis'
  • 15,101
  • 1
  • 16
  • 18
  • I see what you did but if I add 4 cards to the canvas in your [fiddle](http://jsfiddle.net/Zegis/rVgsu/1/) it seems to feed the alert 4 times when I move one card. This is similar to the problem I was having. I was getting the proper info back but it would provide the info for every object on the canvas after only moving one. – Progrower Jan 19 '14 at 03:39
  • Oh, I'm sorry. I added link to wrong fiddle. Here's [working one](http://jsfiddle.net/Zegis/rVgsu/). (I'll edit answer too!) – Konrad 'Zegis' Jan 19 '14 at 13:59
  • Thank You! I will try to implement this into my complete script. – Progrower Jan 19 '14 at 16:27
  • I made another fiddle where I add another type of card to it and a shape. I'm getting similar results as before where the alert pops for the amount objects on the canvas and it's looking at the shape. I'm thinking a couple of if statements might be the answer. Here's the fiddle. http://jsfiddle.net/progrower/ZfxcL/9/ – Progrower Jan 19 '14 at 20:29
  • Problem lies inside jQuery logic with event handlers. When you add an event handler jQuery don't overwrite it, but queues them for most cases (onclick overwrites). See [this answer](http://stackoverflow.com/a/12684878/1892091).Basically you need to call `canvas.on('object:modified', onObjectModified);` only once not inside every click function. Problem with shape lies within this.getActiveObject()._objects[0].id shape have no id, so function crashes. – Konrad 'Zegis' Jan 20 '14 at 14:56
  • Moreover shape don't have _objects element, because it's single object, not a group. – Konrad 'Zegis' Jan 20 '14 at 15:02
  • I solved the problem with the shape being grabbed with an if statement looking for the id value greater then 0. fiddle http://jsfiddle.net/progrower/ZfxcL/ function onObjectModified(e) { console.log(e); if(this.getActiveObject().id > "0"){ alert('the card type is ' +cardtype +' '+this.getActiveObject().get('left') + ' ' + this.getActiveObject().get('top') + ' it\'s id is: ' + this.getActiveObject().id); } }; – Progrower Jan 20 '14 at 15:16
  • I think I have it now. Thanks for the hints. http://jsfiddle.net/progrower/ZfxcL/ – Progrower Jan 20 '14 at 17:47
  • I now have this working in my full script. I just wanted to thank everyone for their patients and time. I appreciate the helpful hints and now I will browse away with a better understanding of how scripts interact. Thank you very much!8) – Progrower Jan 20 '14 at 21:31