Raphael.js - пользовательские атрибуты

Ответ 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):

Пример 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);

Ответ 2

Я думаю, вы можете сделать:

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

затем

circle["custom-attribute"] = value;

Надеюсь, что это поможет.

Ответ 3

Да, вы должны быть в состоянии сделать следующее:

.attr({title: value});

Конечно, название - это имя атрибута, который вы хотите установить или создать, и значение должно быть значением. Разумеется, рассматриваемый элемент raphael был бы приемником для attr.