raphael.js - 自定义属性

Question

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

例如，

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 开始，这适用于元素，不适用于集合。当我需要将数据分配给一个集合时，我倾向于使用 for 循环来设置它，并使用 someSet[0].data() 来获取它 - 有点麻烦，但它有效。

令人烦恼的是 .data 的文档没有说什么根本不知道它的用途（在撰写本文时）...但是 jQuery 中的 .data()、HTML5 中的 data-* 等等都有这个目的，像这样使用它是有效的，并且 SO 上的其他人谈论它打算像这样使用，所以我非常有信心这是将任意数据附加到 Raphael 对象的预期方法。

---

2. 由 attr() 或 animate() 触发的自定义函数

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

官方文档对此有一些非常有用的示例，这里是一个改编的示例：

// 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 标记中

Raphael 并不真正支持此操作，因此仅在您确实非常需要时才执行此操作。但是，如果您确实需要标记中的某些 Raphael 不支持的内容，您可以使用 attr 和 animate 通过使用 paper.customAttributes 和 element.node （请注意，element.node 的文档几乎只是非常无用的“<一个href="http://raphaeljs.com/reference.html#Element.node" rel="nofollow noreferrer">不要弄乱它" - 你不应该弄乱它的原因是，它直接为您提供 SVG 或 VML 元素，这意味着 Raphael 不知道您对其所做的任何更改，这可能会使您的 Raphael 对象与其控制的元素不同步，除非您很小心，否则可能会破坏内容。 ，并使用类似的技术 这...）。

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

Live jsfiddle 示例

paper.customAttributes.lineHeight = function( value ) {
    // Sets the SVG dy attribute, which Raphael doesn't control
    var selector = Raphael.svg ? 'tspan' : 'v:textpath';
    var $node = $(this.node);
    var $tspans = $node.find(selector);
    $tspans.each(function(){
        // use $(this).attr in jquery v1.6+, fails for SVG in <= v1.5
        // probably won't work in IE
        this.setAttribute('dy', value );
    });
    // change no default Raphael attributes
    return {};
}
    // Then to use it...
    var text = paper.text(50,50,"This is \n multi-line \n text");
    // If you want to animate a custom attribute, always set it first - null isNaN
    text.attr({lineHeight: 0});
    text.animate({lineHeight: 100},500);

Answer 2

我认为你可以这样做：

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

那么

circle["custom-attribute"] = value;

希望这会有所帮助。

Answer 3

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

.attr({title: value});

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