RaphaelJS: нарисуйте путь над другим элементом SVG - PullRequest
Новая
       1

RaphaelJS: нарисуйте путь над другим элементом SVG

1 голос
/ 11 февраля 2012

У меня есть контейнер 500x400px, где я работаю с RaphaelJS, чтобы управлять некоторыми вкусностями SVG. Я загрузил изображение с этим кодом: 

var img = paper.image("images/image.jpg", 50, 200, 90, 110);

Теперь я хочу нарисовать путь относительно этого элемента. Как мне быть? Если я напишу что-то вроде: 

var c = paper.path("M 18.00,79.75 C 18.00,79.50 52.50,79.75 52.50,79.75...");

Путь создается относительно родительского контейнера и не занимает правильную позицию над моим изображением. Спасибо за вашу поддержку

--- редактировать ----

Это моя панель с ее стилем: 

#canvas {
        float: left;
        width: 500px;
        height: 400px;
        border: 1px solid #333;
}

<div id="canvas"></div>

И это часть кода javascript: 

// Creates canvas 500 × 400 inside canvas div
var paper = Raphael(document.getElementById('canvas'), 500, 400);
// Load an image at 50, 200
var img = paper.image("images/image.jpg", 50, 200, 90, 110);

После этого я хотел бы заполнить путь SVG, расположив его над моим изображением. Если я напишу что-то вроде: 

var c = paper.path("M 18.00,79.75 C 18.00,79.50 52.50,79.75 52.50,79.75...");

Этот путь создается на контейнере #canvas, начиная с 0,0 координат. Как мне это сделать?

Ответы [ 2 ]

0 голосов
/ 14 февраля 2012

Звучит так, как будто вы думаете, что Рафаэль сохраняет ссылку на текущую позицию пера между созданием фигур и т. Д. Я не думаю, что это правда ... Я считаю, что когда вы добавляете путь, начальная позицияэтот путь относительно холста 0,0.(Обратите внимание, что команда path 'M' разрешает относительный moveTo 'm', но я думаю, что это работает только после начального в строке пути ... в начале, это кажется абсолютным, независимо от регистра)

Итак, если вы хотите начать путь с левого верхнего угла изображения, начните строку пути с "M50,200" - для нижнего правого, начните ее с "M140,310".

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

0 голосов
/ 14 февраля 2012

Пожалуйста, посмотрите на эту скрипку http://jsfiddle.net/XRBRz/. В этой скрипке представьте черный прямоугольник как ваше изображение. Лестничный путь рисуется относительно черного прямоугольника путем перевода пути в начало этого прямоугольника. Также пути (лестнице) дается клип-путь, имеющий тот же размер черного прямоугольника, чтобы обрезать путь за пределами черного прямоугольника.

...