2013-04-12 8 views
0

Я пытаюсь нарисовать путь графа, чтобы путь был прозрачным, а остальная часть холста - нет. Таким образом, я могу использовать холст в качестве маски и заполнять путь разными цветами с помощью элементов html. Вроде как это:Как рисовать «прозрачный ход» с помощью Raphael.js

  enter image description here  

+0

Возможно, это сработает? http://stackoverflow.com/questions/6042550/svg-fill-color-transparency-alpha –

+0

Я не эксперт Raphaeljs, но вы можете проверить «непрозрачность штриха» на странице [документации] (http: // raphaeljs. ком/reference.html # Element.attr). – fernandosavio

+0

Да, проблема заключается в заполнении остальной части бумаги (минус путь) сплошным цветом. – Michael

ответ

1

Там нет никакого способа, чтобы достичь этого изначально через Рафаэль, но это может быть достигнуто путем некоторой селективной модификации SVG производства Рафаэля. Рассмотрим использование приложения mask. Этот метод используется для абсолютно восхитительного визуального эффекта here.

Не забывайте, что вы можете получить доступ к узлу DOM, связанному с бумажным объектом Рафаэля, через объект canvas этого бумажного объекта (я не знаю, почему Барановский выбрал такое вводящее в заблуждение имя!). Вы можете использовать это, чтобы напрямую взаимодействовать с SVG в DOM, хотя я не могу ручаться за взаимодействия между Raphael и настраиваемыми модификациями.)

+1

Спасибо за предложение, Кевин! В любом случае, я не делаю слишком много тяжелой работы с Рафаэлем, поэтому я могу, вероятно, придерживаться SVG. Не поддерживайте IE в этом приложении;) – Michael

0

Чтобы заполнить только внешнюю часть пути, вам нужно будет нарисовать то, что часто называемый «пончиком», состоящим из двух строк пути.

Вы найдете здесь хороший пример: How to achieve 'donut holes' with paths in Raphael.

Идея такова: * дать внешнюю строку пути как большой счетчик по часовой стрелке замкнутого прямоугольника, сообщая браузеру, что должен быть заполнен то, что находится внутри * CONCAT внутренней строки пути, как по часовой стрелке замкнутого пути, который вы хотите , сообщая браузеру, что нужно заполнить, это то, что снаружи.

Таким образом, получается заполненная форма с отверстием, которое является пересечением обеих заполненных форм.

 Смежные вопросы

  • Нет связанных вопросов^_^