Есть ли способ обрезать изображение с помощью Raphael.js?

Question

Я пытаюсь поместить часть изображения в объект raphael. Масштабирование изображения работает отлично, но когда я пытаюсь его перевести, он возвращает неверную часть изображения. Я обманываю изображение, используя «S1.5,1.5,0,0», то есть я не расчесываю его вокруг средней точки, так что он красиво работает. Но, когда я пытаюсь компенсировать изображение, результирующий фрагмент изображения смещается.

Возможно, есть еще один способ сделать это в Рафаэле. То, что я пытаюсь сделать, это использовать фрагмент изображения в качестве объекта изображения в Рафаэле, и мне нужно скопировать прямоугольник из внешнего изображения в него. Что-то вроде:

копировать фрагмент оригинала изображения (x0 = 100, y0 = 120, width = 300, height = 250) в объект изображения, который имеет размеры (ширина = 150 и 125).

Я искал ответ в течение некоторого времени, но ничего, что действительно помогает.

Редактировать:

скрипка является

/w9XSf/12/

В приведенном выше примере, я захватывая 100 х 60px область от исходного изображения (которое 612 х 325px) , и пытается отобразить его на выходном изображении, которое составляет 500 x 300 пикселей.

Масштаб работает, но область, которую он захватывает, не та, которая мне нужна. Это делает работу, если я хватаю от 0, 0. Но, как я двигаюсь от верхнего левого угла originsl изображения, фактическая площадь это дает мне дальше от того, что я на самом деле нужно :(.

Любые идеи? (я уже попробовал поменять местами порядок Т и S в преобразовании строки).

Спасибо.

Answer 1

Используя Рафаэль, следующий код создает контейнер, который будет использоваться для отображения изображения , переведенный и масштабированный. Живая версия решения также доступна по адресу http://jsfiddle.net/s6DHf/. Это разветвленная версия актуальной проблемы.

var outputW = 525, 
    outputH = 300; 
    sourceX = 100, 
    sourceY = 100, 
    scaleX = 1.5, 
    scaleY = 1.5, 
    paper = new Raphael("image", outputW, outputH), 
    bgImg = paper.image("http://cdn3.whatculture.com/wp-content/uploads/2013/04/MAN-OF-STEEL-e1365755036183.jpg", 0, 0, 350, 200) 
     .transform("t" + sourceX + "," + sourceY + "s" + scaleX +","+ scaleY + ",0,0"); 

Проверить использование «S» и «T» (в нижнем регистре ), который обозначает относительное масштабирование и относительное перемещение, соответственно. Проблема заключалась в использовании «S» и «T» (в в верхнем регистре), что касается абсолютного масштабирования и перевода соответственно.

Рафаэль ссылка: http://raphaeljs.com/reference.html#Element.transform

Надеется, что это помогает.