在 fabric.js 中修改了哪个对象答案

【问题标题】：Which object was modified in fabric.js在 fabric.js 中修改了哪个对象
【发布时间】：2014-02-07 23:33:12
【问题描述】：

我正在向画布添加对象并跟踪它们的类型和计数。当我将它们添加到画布时，一切都很好，但是当我修改它们时，我正在努力解决在我的 fabric.js 画布中修改了哪个对象，但前提是它是一个卡片类型。我想得到它的坐标卡类型和卡数。我做了一个fiddle，它显示了一切正常，除了我得到所有对象的信息，即使我只修改一个对象。如何只获取实际的 activeObject 及其信息？

这是我一直在尝试解决的小提琴中的 js。

        //**********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);                  

       };

【问题讨论】：

您如何看待将 ID 属性附加到您保存在画布上的对象以便检查您想要获取的对象？
当我将它添加到画布时，我正在这样做，这样我就可以进行 ajax 调用以将其保存到数据库中。 id 等于添加时的卡数。所以是的，如果我能抓住 id，那么我就会知道哪个对象被修改了。只是不确定如何确保这就是我得到的。
你看到我的fiddle

标签： javascript jquery canvas fabricjs

【解决方案1】：

要使用fabric.js 获取选定的画布对象，您需要使用methood getActiveObject() 它会返回您需要的内容。喜欢：

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

这里是fiddle。

记得检查你的括号。现在，您将onObiectModified 添加为每张黄牌的事件处理程序，我将为每张黄牌打电话。只需将canvas.on('object:modified', onObjectModified); 移至其他位置，例如在var 声明之后。

哦，如果您将 jsFiddle 之类的测试环境与 fabric.js 一起使用，请使用链接 https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js 而不是https://raw.github.com/kangax/fabric.js/master/dist/fabric.js，（注意删除点！）否则它将无法在Chrome上运行（请参阅this question）

希望对你有帮助。

【讨论】：

我知道你做了什么，但是如果我在你的 fiddle 的画布上添加 4 张卡片，当我移动一张卡片时，它似乎会发出 4 次警报。这与我遇到的问题相似。我得到了正确的信息，但它会在只移动一个对象后为画布上的每个对象提供信息。
哦，对不起。我添加了指向错误小提琴的链接。这是working one。（我也会编辑答案！）
谢谢！我将尝试将其实现到我的完整脚本中。
我制作了另一个小提琴，在其中添加了另一种类型的卡片和形状。我得到与以前相似的结果，在画布上弹出数量对象的警报并且它正在查看形状。我在想几个 if 语句可能是答案。这是小提琴。 jsfiddle.net/progrower/ZfxcL/9
问题在于带有事件处理程序的 jQuery 逻辑。当您添加事件处理程序时，jQuery 不会覆盖它，而是在大多数情况下将它们排入队列（onclick 覆盖）。请参阅this answer。基本上你只需要调用一次canvas.on('object:modified', onObjectModified);，而不是在每个点击函数中。形状的问题在于 this.getActiveObject()._objects[0].id 形状没有 id，所以函数崩溃。