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

Можно ли определить пользовательский атрибут для элемента Raphael?

например

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

Причина в том, что мне нужно это то, что я хочу сделать довольно сложную анимацию для целого набора элементов, и я хочу где-нибудь сохранить исходную координату y для каждого из них.

Источник

3 ответа

Решение

Является ли пользовательский атрибут, который вы хотите:

  1. Простое хранилище для произвольных данных, которые будут записаны и получены?
  2. Атрибут, в котором необходимо изменить пользовательское действие при его изменении (например, атрибуты, контролируемые с помощью Рафаэля .attr() а также .animate())?
  3. Что-то, что вы хотите использовать в атрибутах выходной разметки 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 говорят о том, что она предназначена для использования именно так, поэтому я вполне уверен, что это метод, предназначенный для присоединения произвольных данных к Raphael объекты.

2. Пользовательские функции, запускаемые attr() или же animate()

Если вам нужен пользовательский атрибут, который ведет себя как атрибуты Raphael - запуск функции или преобразования при изменении с помощью 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 не синхронизируется с элементом, которым он управляет, что может привести к поломке. Если вы не осторожны и не используете такую ​​технику...).

Вот пример (при условии, что jQuery также используется, jQuery не обязателен, но более удобен), который устанавливает свойство SVG dy, который позволяет вам контролировать межстрочный интервал текста Рафаэля (примечание - пример кода, еще не протестированный в VML/IE. обновится, если он не будет работать в режиме VML):

Живой пример 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);
Источник

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

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

затем

circle["custom-attribute"] = value;

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

Источник

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

.attr({title: value});

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

Источник
Другие вопросы по тегам