image()

キャンバスに画像を描画します。

最初のパラメータimgは、描画する元の画像です。 imgは以下のオブジェクトのいずれかになります:

2番目と3番目のパラメータdxdyは、 描画先の画像の左上隅の座標を設定します。画像を配置する他の方法については、 imageMode()を参照してください。

image()のオプションパラメータの動作を説明する図は以下の通りです:

4番目と5番目のパラメータdwdhはオプションです。これらは 描画先の画像の幅と高さを設定します。デフォルトでは、image()は 元の画像の全体を元のサイズで描画します。

6番目と7番目のパラメータsxsyもオプションです。 これらの座標は、元の画像から描画するサブセクションの左上隅を定義します。

8番目と9番目のパラメータswshもオプションです。 これらは元の画像から描画するサブセクションの幅と高さを定義します。 デフォルトでは、image()(sx, sy)から始まり、 元の画像の端まで延びる全サブセクションを描画します。

9番目のパラメータfitもオプションです。これにより、元画像のサブセクションを アスペクト比に影響を与えずに描画することができます。CONTAINが渡された場合、 サブセクション全体が描画先の矩形内に表示されます。COVERが渡された場合、 サブセクションは描画先の矩形を完全に覆います。これにより、サブセクションが ズームインされたような効果が得られる場合があります。

10番目と11番目のパラメータxAlignyAlignもオプションです。 これらは、フィットしたサブセクションの配置方法を決定します。xAlignLEFTRIGHT、またはCENTERに設定できます。 yAlignTOPBOTTOM、またはCENTERに 設定できます。デフォルトでは、xAlignyAlignの両方が CENTERに設定されています。

実例

シンタックス

image(img, x, y, [width], [height])
image(img, dx, dy, dWidth, dHeight, sx, sy, [sWidth], [sHeight], [fit], [xAlign], [yAlign])

パラメーター

img
p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture:

表示する画像。

x
Number:

画像の左上隅のx座標。

y
Number:

画像の左上隅のy座標。

width
Number:

画像を描画する幅。

height
Number:

画像を描画する高さ。

dx
Number:

元の画像を描画する先の矩形の x座標

dy
Number:

元の画像を描画する先の矩形の y座標

dWidth
Number:

描画先の矩形の幅

dHeight
Number:

描画先の矩形の高さ

sx
Number:

描画先の矩形に描画する元の画像のサブセクションの x座標

sy
Number:

描画先の矩形に描画する元の画像のサブセクションの y座標

sWidth
Number:

描画先の矩形に描画する 元の画像のサブセクションの幅

sHeight
Number:

描画先の矩形に描画する 元の画像のサブセクションの高さ

fit
Constant:

CONTAINまたはCOVER

xAlign
Constant:

LEFT、RIGHT、またはCENTER。デフォルトはCENTER

yAlign
Constant:

TOP、BOTTOM、またはCENTER。デフォルトはCENTER

Notice any errors or typos? Please let us know. Please feel free to edit src/image/loading_displaying.js and open a pull request!

関連するリファレンス