Преместване на позицията на триъгълник във векторна графика на Raphael

Използвам 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

Трябва да разделите пътя, за да коригирате позицията на триъгълника. Успях да направя това на око, като избрах къде е второто "M" в пътя:

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");

За да запазите свойствата и анимацията непокътнати, добавете и двете към набор Raphael:

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

Тогава се нуждаете само от една малка промяна: Променете "this" в командите с мишката на "playBP". Това може да изглежда излишно, но "това" се отнася до единичния елемент, върху който е поставен курсорът на мишката, а не до набора.

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
Какво е, моля, triangle.matrix?? пример? - 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