Это пользовательский атрибут, который вы хотите:
- A Простое хранилище для произвольных данных, подлежащих записи и извлечению?
- Атрибут, в котором пользовательское действие должно быть выполнено при его изменении (например, атрибуты, контролируемые с помощью
.attr() и .animate() Рафаэля)?
- Что-то, что вы хотите ввести в атрибуты выходной разметки SVG / VML на странице / DOM? (обычно не рекомендуется, но иногда необходимо)
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 вообще ничего не говорит о том, для чего она (на момент написания) ... но .data() в jQuery, data-* в HTML5, и т. д. и т. д. все имеют эту цель, используя это, как это работает, и другие на SO говорят о намерении использовать его вот так , так что я довольно уверен, что это предполагаемый метод для присоединения произвольных данные к объектам Рафаэля.
2. Пользовательские функции, вызванные attr() или animate()
Если вам нужен пользовательский атрибут, который ведет себя как атрибуты Рафаэля - запуск функции или преобразования при изменении с помощью 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);
Обратите внимание, что this в каждом выполнении customAttribute - это объект Raphael, для которого устанавливается атрибут. Это значит ...
3. Форсирование пользовательского атрибута в разметку SVG или VML в браузере
Рафаэль на самом деле не поддерживает это, так что делайте это, только если вам действительно нужно. Но если вам действительно нужно нужное что-то в разметке, которое Рафаэль просто не поддерживает, вы можете создать элементарный элемент управления для манипулирования им, используя attr и animate, используя paper.customAttributes и element.node (обратите внимание, что документация для element.node в значительной степени просто очень бесполезна: " Не связывайтесь с ней " - причина, по которой вам не следует связываться с этим, заключается в том, что она дает вам элемент SVG или VML напрямую, что означает, что Raphael не знает ни о каких изменениях, которые вы вносите в него, что может привести к тому, что ваш объект Raphael не синхронизируется с элементом, которым он управляет, что может привести к поломке. Если вы не осторожны, и используйте такую технику, как эта ...).
Вот пример (при условии, что jQuery также используется, jQuery не обязателен, но более удобен), который устанавливает свойство SVG dy, которое позволяет вам контролировать межстрочный интервал текста Рафаэля (примечание - пример кода еще нет протестировано в 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);