0

たとえば、スプライトが与えられた場合、StackOverflow スプライトと次のような CSS 属性があります。

background-position: 0px 0px;
width: 250px;
height: 61px;

Chunky PNG ライブラリを使用して、スプライトのロゴを切り取ることができます。ただし、一部のサイトでは、たとえばこのサイトのように、負の背景位置があります: ccs - どのスプライトがhttp://shop.ccs.com/ns/images/ccs-sprite-master-v4.pngで、次のロゴの CSS 属性:

   background-position: -300px -100px;
   width: 166px;
   height: 80x;

私のcropメソッドでは、開始（x、y）座標と終了（x、y）座標を渡す必要があるため、これらの負の値をメソッドcropが理解できるものに変換する方法がわかりません。どうやってやるの？

4

1 に答える 1

1

CSS では、負の background-position 座標を使用します。これは、画像が要素の四角形に対して左および上に移動し、予想される領域が要素の境界内に表示されるためです。

抽出する画像内の座標がライブラリに与えられることを期待している場合は、単に背景位置の座標を無効にします。したがって、この例では、幅と高さが (166, 80) の座標 (300, 100) で画像を抽出します。

今、私はあなたのライブラリの API を見ていません。あなたが議論しているクロップ方法が期待しているかもしれない他の2つのタイプの座標があります.

絶対座標 (x1、y1、x2、y2) を使用している場合は、幅と高さを左と上の座標に追加するだけです。それは (300, 100, 300+166, 100+80) になります。

ライブラリが「各境界線からのクロップ距離」を期待している場合、事態はもう少し複雑になります。この場合、画像の全幅と全高が必要です (name imageWidth と imageHeight を呼び出し、前の段落の x2/y2 値を画像の寸法から差し引きます。これは (300, 100, fullWidth-(300+) になります)。 166)、fullHeight-(100+80))。

それが役立つことを願っています。

于 2013-10-21T18:15:04.263 に答える