клип-путь в Raphaël.js - PullRequest
Новая
       22

клип-путь в Raphaël.js

4 голосов
/ 26 января 2012

Как я могу использовать clip-path с Raphaël.js следующим образом пример .Похоже, в Raphael.js есть только клип-прямоугольник.

Ответы [ 3 ]

2 голосов
/ 27 января 2012

Вы можете вырезать отверстие через нарисованную траекторию.Это техника, известная как дырки от бублика, и вы можете увидеть пример на моей странице указателя. Если это выглядит сложно, это не так. Смотрите информационную базу данных и технику, помеченную дырками от бублика. Индекс моего сайта http://www.irunmywebsite.com/.,Теперь вы можете найти путь к нескольким клипам (представьте, что вы видите вид через несколько отверстий} Карусель и держатель миниатюр - это всего лишь один путь ... См. Рафаэль Кроузель

Гораздо лучший примерЯ включаю ниже. В центральной синей области есть несколько отверстий, вырезанных в нем. Это многоцелевое использование. Это часть того, что я называю гибридным решением DOM / SVG.

Вырезать многоцелевые отверстия дляРазнообразие причин

1 голос
/ 26 января 2012

Я не думаю, что вы можете сделать это через Рафаэля.Вы можете сделать это, управляя DOM напрямую, но вы потеряете возможность вызывать методы Raphael для этого элемента.

Я считаю Raphael немного устаревшим, теперь, когда IE поддерживает SVG.Вы можете сделать гораздо больше с простым javascript и спецификацией SVG.

0 голосов
/ 04 июля 2013

Если, как и в примере с изображением, это растровое изображение (png, gif, jpg ... растровые пиксельные изображения), которое вы пытаетесь обрезать, это на самом деле очень просто. В Raphael 2 вы просто устанавливаете заливку так, чтобы она указывала на файл изображения. Он использует его как фоновое изображение.

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

somepath.attr({fill: 'someimage.png'});

Ограничения (AFAIK):

  • Только одно изображение на путь
  • Только один путь на изображение (используйте составные пути для сложных масок)
  • Такие вещи, как положение фона, не легки - см. Этот вопрос для более
  • Я думаю, что невозможно остановить повтор изображения
...