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 的文档完全没有说任何关于它的用途是什么(在撰写本文时)...但是jQuery中的.data()，HTML5中的data-*等均具有此目的，可以像这样使用它，并且

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钩子)-这就是

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的文档几乎只是非常无用的"请不要乱糟糟-您不应该弄乱它的原因是，它直接为您提供了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...).

这是一个示例(假设也使用jQuery，jQuery不是必需的，但是更方便)设置了SVG属性dy，该属性允许您控制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 \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);

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