</div> </body> </html> The JavaScript is rather long so here is the"> </div> </body> </html> The JavaScript is rather long so here is the"> </div> </body> </html> The JavaScript is rather long so here is the" />

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

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

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

The JavaScript is rather long so here is the jsfiddle

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

2
nl ja de

3 ответы

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

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

Затем вам нужно только одно небольшое изменение: измените «это» в командах mouseover на «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));
2
добавлено
Что такое triangle.matrix? пример?
добавлено автор whiteletters in blankpapers, источник

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

1
добавлено
Это не будет работать, потому что треугольник и круг являются частью одного и того же пути.
добавлено автор Chris Wilson, источник

Я сделал легкий выход и изменил ваш путь в 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");

Voila.

0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)