如何在 KineticJS Sprite 上使用我自己的自定义属性？答案

【问题标题】：How do I use my own custom properties on a KineticJS Sprite?如何在 KineticJS Sprite 上使用我自己的自定义属性？
【发布时间】：2013-09-09 23:29:25
【问题描述】：

我正在使用 KineticJS Sprite 对象来创建一个简单的 HTML5 2D 画布游戏。我需要每个精灵都具备一定的特性，比如“盾牌”、“火力”、“速度”等。所以我需要将自己的自定义属性添加到 Sprite 对象中。

理想情况下，我想要这样的东西：

mySpriteObj.setCustom('shield',50) // set a custom property to 50

...然后以后..

var shield = mySpriteObj.getCustom('shield') // returns 50

但似乎没有类似的东西。我确实尝试将 attr 属性（getAttr 和 setAttr）与我自己的自定义值一起使用，但这不起作用。

有没有一种简单的方法可以将您自己的变量与 Sprite 对象关联起来？

谢谢欧文

【问题讨论】：

标签： html sprite kineticjs

【解决方案1】：

即使getAttr() 和setAttr() 是最好的方法，只要您不尝试使用.toJSON() 保存画布然后重新创建节点，您可以简单地直接分配任何自定义值，例如这个：

mySpriteObj.shield = someValue;
mySpriteObj.speed = someOtherValue;
var myObjSpeed = mySpriteObj.speed;
var myObjShield = mySpriteObj.shield;

不过，您可能希望使用getAttr() 和setAttr() 共享您的代码并尝试修复其中的错误。

【讨论】：

另外值得注意的是，toJSON() 方法也不会保存这些属性
哦，我的错，实际上我想说 toJSON 并写了 toDataURL。谢谢指出！！！
是的，谢谢，它似乎实际上与上面的设置变量和 getAttr 来检索。 - 但是当我声明我的 Sprite 对象时，必须首先添加属性。
@Owen，您可以在初始化 Sprite 时设置属性。 new Kinetic.Sprite({ MyAttr1: attr1, MyAttr2: attr2, ...});

【解决方案2】：

要向Kinetic.Shape 添加方法，您可以使用addMethods 函数，请参阅docs

您可以查看Kinetic Source 了解如何使用此方法的示例。

例子：

Kinetic.Util.addMethods(Kinetic.Shape, {
  getCustom: function() {
    //getCustom attribute code here
  },
  getCustom2: function() {
    //getCustom attribute code here
  }
});

请注意，您可以通过在对象中为addMethod 函数的第二个参数添加更多属性（函数）来添加多个函数。

正如 Ani 所说，您应该使用 getAttr() 和 setAttr() 函数来获取和设置自定义属性。

【讨论】：

谢谢，但这是针对形状，而不是精灵。我也可以在 Sprite 对象上使用 addMethods 吗？
欧文，你当然可以。 kineticjs.com/docs/Kinetic.Util.html Kinetic.Sprite 是 Kinetic.Shape 的子类，因为 KineticJS 是 OOP。事实上，所有 Kinetic“形状”都是 Kinetic.Shape 的子类，这就是我使用它作为示例的原因。