raphael.js - 自定义属性 [英] raphael.js - custom attributes

问题描述

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

Is it possible to define a custom attribute for a raphael element?

例如

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

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

Reason I need this is I want to do some quite complex animation on a whole set of elements and I want somewhere to store the original y coordinate for each one.

推荐答案

是你想要的自定义属性:

Is the custom attribute you want:

1. 一个简单的存储，用于记录和检索任意数据?
2. 在更改时需要采取自定义操作的属性(例如使用 Raphael 的 .attr() 和 .animate() 控制的属性 )?
3. 您想将某些内容强加到页面/DOM 上输出 SVG/VML 标记 的属性中?(通常不推荐，但有时需要)

1. A simple store for arbitrary data, to be recorded and retrieved?
2. An attribute where a custom action needs to be taken when it is changed (like the attributes controlled with Raphael's .attr() and .animate() )?
3. Something you want to force into the attributes of the output SVG / VML markup on the page / DOM? (not normally recommended, but sometimes needed)

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() 获取它 - 有点麻烦，但它有效.

Note that as of Raphael 2.1 this works for elements, not sets. When I need to assign data to a set I tend to set it with a for loop and get it with someSet[0].data() - a bit of a cludge, but it works.

令人讨厌的是，.data 的文档没有'完全不说它的用途(在撰写本文时)...但是 .data() 在 jQuery 中，data-* 在 HTML5 中，等等有这个目的，像这样使用它，其他人谈论它是打算像这样使用它，所以我非常有信心这是将任意数据附加到 Raphael 对象的预期方法.

Annoyingly the documentation for .data doesn't say anything at all about what it is for (at time of writing)... but .data() in jQuery, data-* in HTML5, etc etc all have this purpose, using it like this works, and others on SO talk about it being intended to be used it like this, so I'm pretty confident that this is the intended method for attaching arbitrary data to Raphael objects.

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

If you need a custom attribute that behaves like Raphael attributes - triggering a function or transformation when changed using attr or animate (kind of like a Raphael hook) - that's what paper.customAttributes is for. It defines a function that is executed any time the named custom attr is set for any element in that paper object. The return object is applied to the element's standard attributes.

官方文档为此提供了一些非常有用的示例，这是一个改编的示例:

The offical docs have some pretty useful examples for this one, here's an adapted one:

// 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 对象.这意味着...

Note that this within each customAttribute execution is the Raphael object for which the attr is being set. This means...

Raphael 并不真正支持这一点，所以只有在您真的、真的需要时才这样做.但是，如果您确实需要标记中的某些 Raphael 不支持的内容，您可以创建一个基本的控件来使用 attr 和 animate 通过使用 paper.customAttributes 和 element.node(请注意，element.node 的文档几乎只是非常无用的不要惹它" - 你不应该惹它的原因是，它直接为您提供 SVG 或 VML 元素，这意味着 Raphael 不知道您对其所做的任何更改，这可能会使您的 Raphael 对象与其控制的元素不同步，从而可能会破坏某些内容.除非您是小心，并使用这样的技术......).

Raphael doesn't really support this, so only do this if you really, really need to. But if you really do need something in the markup that Raphael just doesn't support, you can create a rudimentary control for manipulating it using attr and animate by using paper.customAttributes and element.node (note that the documentation for element.node is pretty much just the highly unhelpful "Don't mess with it" - the reason you shouldn't mess with it is, it gives you the SVG or VML element directly, which means Raphael doesn't know about any of the changes you make to it, which may put your Raphael object out of sync with the element it controls, potentially breaking stuff. Unless you're careful, and use a technique like this...).

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

Here's an example (assuming jQuery is also being used, jQuery isn't essential but is more convenient) that sets the SVG property dy, which allows you to control line spacing of Raphael text (note - example code not yet tested in VML/IE. will update if it doesn't work in VML mode):

实时 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 
 multi-line 
 text");
    // If you want to animate a custom attribute, always set it first - null isNaN
    text.attr({lineHeight: 0});
    text.animate({lineHeight: 100},500);

这篇关于raphael.js - 自定义属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！