2

画像の一部をラファエル オブジェクトに合わせようとしています。画像のスケーリングは完全に機能しますが、翻訳しようとすると、画像の間違った部分が返されます。「S1.5,1.5,0,0」を使用して画像をスケーリングしています。つまり、中間点の周りでスケーリングしていないため、スケーリングは美しく機能します。しかし、画像をオフセットしようとすると、結果の画像フラグメントがオフセットされます。

ラファエルでそれを行う別の方法があるかもしれません。私が達成しようとしているのは、画像のフラグメントを Raphael の画像オブジェクトとして使用することであり、外部画像から長方形をコピーする必要があります。何かのようなもの：

元の画像フラグメント (x0 = 100、y0 = 120、幅 = 300、高さ = 250) を、寸法 (幅 = 150 および 125) を持つ画像オブジェクトにコピーします。

私はしばらく答えを探していましたが、本当に役立つものは何もありません。

編集：

フィドルは

/w9XSf/12/

上記の例では、元の画像 (612 x 325 ピクセル) から 100 x 60 ピクセルの領域を取得し、それを出力画像 (500 x 300 ピクセル) に表示しようとしています。

スケールは機能しますが、それがつかんでいる領域は私が必要とするものではありません. 0, 0 から取得すると機能します。しかし、originsl 画像の左上隅から移動すると、実際の領域は実際に必要なものから遠くなります :(。

何か案は？(変換文字列で T と S の順序を入れ替えることは既に試みました)。

ありがとう。

4

1 に答える 1

1

Raphael を使用して、次のコードはコンテナを作成し、画像を表示するために使用され、適切に翻訳およびスケーリングされます。このソリューションのライブ バージョンは、 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

お役に立てれば。

于 2013-05-30T11:02:29.223 に答える