raphael.js - 自定义属性

Question

是否可以为raphael元素定义自定义属性？

e.g。

r.circle(25,50,10).attr({fill:'#b71e16', stroke:'#71140f', 'my_custom_attribute':'a value'});

我需要这个的原因是我想在一整套元素上做一些非常复杂的动画，我想在某处存储每个元素的原始y坐标。

Answer 1

是您想要的自定义属性：

1. 用于记录和检索的任意数据的简单商店？
2. 更改后需要自定义操作的属性（如使用Raphael的.attr()和.animate()控制的属性）？
3. 您想强制进入页面/ DOM上输出SVG / VML标记的属性？ （通常不推荐，但有时需要）

1。自定义数据存储和检索

我99％确定在Raphael中存储任意数据的官方方法是使用.data()函数，例如

var circle = r.circle(25,50,10).attr({fill:'#b71e16', stroke:'#71140f'});
// set it
circle.data('custom-attribute', 'value');

// get it
data = circle.data('custom-attribute');
alert(data);

请注意，从Raphael 2.1开始，这适用于元素 not sets 。当我需要将数据分配给集合时，我倾向于使用for循环对其进行设置，并使用someSet[0].data()获取它 - 有点像cludge，但它可以正常工作。

令人恼火的是documentation for .data并没有说明它的用途（在撰写本文时）......但是jQuery中的.data()，HTML5中的data-*等等所有人都有这个目的，使用它像这样工作，others on SO talk about it being intended to be used it like this，所以我非常有信心这是将任意数据附加到Raphael对象的预期方法。

---

2。由attr()或animate()

触发的自定义功能

如果你需要一个行为类似Raphael属性的自定义属性 - 使用attr或animate（有点像Raphael钩子）更改时触发函数或转换 - 那就是paper.customAttributes是为了。它定义了一个函数，该函数在为paper对象中的任何元素设置命名的自定义attr时执行。返回对象应用于元素的标准属性。

官方文档有一些非常有用的例子，这是一个改编的：

// A custom attribute with multiple parameters:
paper.customAttributes.hsb = function (h, s, b) {
    return {fill: "hsb(" + [h, s, b].join(",") + ")"};
};
var c = paper.circle(10, 10, 10);
// If you want to animate a custom attribute, always set it first - null isNaN
c.attr({hsb: "0.5 .8 1"});
c.animate({hsb: [1, 0, 0.5]}, 1e3);

请注意，每个customAttribute执行中的this是为其设置attr的Raphael对象。这意味着......

---

3。强制自定义属性进入浏览器中的SVG或VML标记

拉斐尔并不真正支持这一点，所以只有你确实需要这样做才能做到这一点。但是如果你真的在拉斐尔不支持的标记中需要某些东西，你可以使用attr和animate创建一个基本的控制来操纵它。 1}}和paper.customAttributes（请注意，element.node的文档几乎只是非常无用的“Don't mess with it” - 你不应该惹它的原因是，它给你的直接使用SVG或VML元素，这意味着Raphael不知道你对它做出的任何改变，这可能会使你的Raphael对象与它控制的元素不同步，可能会破坏东西。除非你小心，否则使用像这样的技术......）。

这是一个示例（假设jQuery也在使用，jQuery不是必需的，但更方便）设置SVG属性element.node，它允许您控制Raphael文本的行间距（注意 - 示例代码尚未在VML / IE中测试过。如果它在VML模式下不起作用，将会更新）：

Live jsfiddle example

dy

Answer 2

我认为你可以做到：

var circle = r.circle(25,50,10).attr({fill:'#b71e16', stroke:'#71140f'});

然后

circle["custom-attribute"] = value;

希望这有帮助。

Answer 3

是的，您应该能够执行以下操作：

.attr({title: value});

当然title是您要设置或创建的属性的名称，value应该是值。当然，所讨论的raphael元素将是attr的接收者。