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