Изменение положения треугольника в векторной графике Рафаэля

Я использую Raphael.js для создания значка кнопки «Играть». Однако треугольник расположен слишком близко к краю круга. При наведении курсора мыши я увеличиваю ширину обводки - проблема в том, что треугольник фактически выходит за пределы круга, а это совсем не то, что мне нужно. HTML - это просто div с идентификатором:

<html>
 <head>
 </head>
 <body>
  <div id="playB"></div>
 </body>
</html>

JavaScript довольно длинный, поэтому вот jsfiddle

Как проще всего «переместить» путь SVG в этом случае? т.е. - начиная дальше справа и дальше сверху. Я пробовал разные вещи, но, помимо изменения размера значка - умножая каждое число пути на x, я вообще не могу манипулировать значками. В этом случае переместите определенный элемент значка.


javascript svg vector-graphics raphael
person lenny    schedule 09.01.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Вам нужно разделить путь, чтобы отрегулировать положение треугольника. Я смог сделать это на глаз, определив, где на пути была вторая буква «М»:

var playB = Raphael('playB', 200, 200);
var circle =          playB.path("M64,5.864C31.892,5.864,5.864,31.892,5.864,64c0,32.108,26.028,58.136,58.136,58.136c32.108,0,58.136-26.028,58.136-58.136C122.136,31.892,96.108,5.864,64,5.864z");
var triangle =  playB.path("M26.736,102.728L97.264,62L26.736,21.272V102.728z");

Затем вы можете переместить треугольник:

triangle.attr("transform", "T15,0");

Чтобы сохранить свойства и анимацию нетронутыми, добавьте их в набор Рафаэля:

var playBP = playB.set();
playBP.push(circle, triangle);
playBP.attr({
  'stroke-width': 5,
  'stroke': "#000",
  'fill': "#fff",
  'opacity': 1
});

Тогда вам нужно только одно небольшое изменение: измените «this» в командах наведения курсора на «playBP». Это может показаться излишним, но «this» относится к единственному элементу, на который был наведен курсор, а не к набору.

var speed = 5;

playBP.mouseover(function(){
  playBP.animate({
    'stroke-width': 10,
    'stroke': "#fff",
    'fill': "#000",
    'opacity': .9
  }, 1000, 'elastic');

});
playBP.mouseout(function(){
  playBP.stop().animate({
    'stroke-width': 5,
    'stroke': "#000",
    'fill': "#fff",
    'opacity': 1    
  }, speed*4, 'elastic');

});

jsFiddle обновлен

Если вы предпочитаете просто исправить путь, вы можете использовать функцию Raphael.mapPath (), чтобы получить скорректированные x / y для треугольника, например:

console.log(Raphael.mapPath(triangle.attr("path"), triangle.matrix));
person Chris Wilson    schedule 09.01.2013
comment
Что это за треугольник. Матрица ?? пример? - person Adib Aroui; 18.04.2014

arrow_upward
0
arrow_downward

Я выбрал легкий путь и изменил ваш путь в Inkscape. Сделать это довольно просто. Если вам интересно, вот что я сделал.

  • Создайте путь в inkscape и выберите его.
  • Ctrl-shift-x, чтобы открыть редактор xml. Ваш путь должен быть выбран.
  • Щелкните по атрибуту «d».
  • В поле ниже замените значение значением из вашей скрипки.
  • Нажмите "Установить".
  • Путь будет изменен, чтобы напоминать ваш путь в скрипке.

Затем я просто выделил узлы треугольника и переместил их. Вернитесь в редактор xml, выберите значение «d» и поместите его в свою скрипку.

var playBP =          playB.path("M 64,5.864 C 31.892,5.864 5.864,31.892 5.864,
64 5.864,96.108 31.892,122.136 64,122.136 96.108,122.136 122.136,96.108 122.136,
64 122.136,31.892 96.108,5.864 64,5.864 z M 38.640816,102.728 109.16882,
62 38.640816,21.272 z");

Вуаля.

person amadan    schedule 10.01.2013

arrow_upward
-1
arrow_downward

Используйте el.transform('t{x},{y}'), например el.transform('t1,1'), чтобы сдвинуть любой элемент вправо и вниз на 1 пиксель каждый. При необходимости вы можете заменять x и y другими значениями, включая отрицательные значения.

person Plynx    schedule 09.01.2013
comment
Это не сработает, потому что треугольник и круг являются частью одного пути. - person Chris Wilson; 09.01.2013