Используя Raphael JS, заполните элемент SVG фоновым изображением со смещением. - PullRequest
Новая
       34

Используя Raphael JS, заполните элемент SVG фоновым изображением со смещением.

8 голосов
/ 21 марта 2011

Я хочу это Заполнить элемент SVG фоновым изображением со смещением , но с использованием Raphael JS.

Отображение прямоугольника с фоновым изображением без смещение легко. 

canvas.rect(
    positionx, positiony, width, height
).attr(
    {fill: "url('/content/image_set.gif')"}
);

Приведенный выше код будет отображать только верхний левый угол изображения.Я хочу переместить это и показать другую часть этого.Как я могу это сделать?

Ответы [ 2 ]

14 голосов
/ 22 марта 2011

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

Изображение рисуется с отсечкой, чтобы вырезать нужную часть, и вы можете управлять смещением изображения либо с помощью img.translate(x,y), либо с помощью параметров paper.image: 

var img = paper.image("foo.png", 10, 10, 80, 80);
img.attr({ "clip-rect": "20,20,30,30" });

Это выше работает только для прямоугольного отсечения (сам svg поддерживает произвольное отсечение через свойство clip-path * ). Если вы хотите заполнить шаблон, то в настоящее время вы должны выйти за рамки того, что предлагает Raphaël. Проще всего, возможно, просто расширить Raphaël, чтобы сделать это, и предоставить какой-то другой запасной вариант для браузеров, которые не поддерживают svg.

SVG Web , по-видимому, имеет хотя бы частичную поддержку шаблонов svg, если вы ищете что-то, чтобы работать в качестве запасного варианта для старых браузеров.

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

Вышеуказанное с clip-rect работает только для прямоугольников - если вам нужно установить смещение положения фона для path, есть относительно простой способ:

  1. Сделатьзаполнить позицию относительно фигуры (иначе все запутается)
  2. Добавьте дополнительный сегмент M с двумя координатами в начале строки пути.Это меняет точку, которая считается началом пути, и, следовательно, меняет положение, с которого начинается изображение.

Итак, представьте, что у вас был путь треугольника, определенный как M0,0 50,0 25,35Z.Если вы хотите сместить фоновое изображение влево на 20 пикселей и выше на 5 пикселей, добавьте M-20,-5 к началу строки, получив M-20,-5 M0,0 50,0 25,35Z.

Вот демонстрация именно этого:

http://jsbin.com/oxuyeq/14/edit

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

Если вы думаете о , определяющем функцию или пользовательский атрибут, который применяет положение фона на лету - например, используя element.getBBox () чтобы противостоять вышеупомянутой проблеме - имейте в виду, что в режиме VML есть ошибка, которая означает, что в IE8 любые дополнительные M сегменты удаляются из пути, если вы обновляете путь, используя .attr('path').

Кроме того, в режиме SVG вам необходимо обновить заливку, что может означать, что вам необходимо повторно исправить относительное положение .

Вот демонстрация пользовательского атрибутаработая для вышеупомянутого во всем, кроме IE8 - щелкните форму, чтобы обновить положение фона - с некоторыми неудачными попытками заставить его работать в IE8 ... http://jsbin.com/oxuyeq/13/edit

...