四角形を描く

このエントリーをはてなブックマークに追加

 今回はCorona SDK で四角形(正方形や長方形)を表示する方法です。

 

1.関数の説明

 リファレンスを見ると関数と引数は以下の通りです。

display.newRect( [parentGroup,] x, y, width, height )
注:大かっこ([と])で囲まれている引数は省略可能を意味しています。

引数名 説明
parentGroup [省略可能]
登録するグループを指定
x 四角形の中心のx座標
y 四角形の中心のy座標
width 四角形の横幅
height 四角形の高さ

 戻り値は「shape Object」(シェイプ・オブジェクト)になります。

 

1.1 使用方法

 座標(100, 100)に横幅が100、高さが60の四角形を表示するには以下のように記述します。白い線は「x=100」と「y=100」の線です。newRect関数で指定するxとyの座標は、出力する四角形の中心座標になります。

display.newRect(100, 100, 100, 60)

 

2.シェイプ・オブジェクトのプロパティ

 シェイプ・オブジェクトのプロパティについて説明します。

 

2.1 外枠の線の太さ:object.strokeWidth

 シェイプ・オブジェクトが持つ「strokeWidth」を変更すると四角形の外枠の線の太さを変更することができます。

— 初期の色
local rect1 = display.newRect(display.contentCenterX, 100, 100, 50)

— 外枠の太さを設定(わかりやすくするため、中を黒くしてます)
local rect2 = display.newRect(display.contentCenterX, 200, 100, 50)
rect2.strokeWidth = 1
rect2:setFillColor(0, 0, 0)

 

 

2.1 外枠の線の色:object.stroke

 シェイプ・オブジェクトが持つ「stroke」を変更すると四角形の外枠の線の太さを変更することができます。

— 初期の色
local rect1 = display.newRect(display.contentCenterX, 100, 100, 50)

— 外枠の線を赤色に設定(線をわかりやすくするため、中を黒くしてます)
local rect2 = display.newRect(display.contentCenterX, 200, 100, 50)
rect2.strokeWidth = 3
rect2.stroke = {1, 0, 0}
rect2:setFillColor(0, 0, 0)

 

 

2.3 角の座標:object.path

 シェイプ・オブジェクトが持つ「path」を変更すると四角形の四隅の座標を変更することができます。四隅の座標は以下のようになっています。

local rect1 = display.newRect(display.contentCenterX, 100, 100, 50)

local rect2 = display.newRect(display.contentCenterX, 200, 100, 50)
rect2.path.x4 = -20

local rect3 = display.newRect(display.contentCenterX, 300, 100, 50)
rect3.path.x2 = 20
rect3.path.x4 = -20

local rect4 = display.newRect(display.contentCenterX, 400, 100, 50)
rect4.path.x2 = 20
rect4.path.y2 = -20
rect4.path.x4 = -20
rect4.path.y4 = 20

 

 

2.4 塗りつぶす、絵をはる:object.fill

 シェイプ・オブジェクトが持つ「fill」を変更すると四角形の色を変えたり、絵をはることができます。

local rect = display.newRect(display.contentCenterX, display.contentCenterY, 200, 150)
local paint = {
type = “image”,
filename = “test.jpg”,
}
rect.fill = paint

 


 2枚の絵を重ね合わせるなんてこともできます。サンプルの画像を2枚重ねています。
local rect = display.newRect(display.contentCenterX, display.contentCenterY, 200, 150)
local paint = {
type = “composite”,
paint1 = {type = “image”, filename = “test.jpg”},
paint2 = {type = “image”, filename = “test2.png”},
}
rect.fill = paint
rect.fill.effect = “composite.average”

 


 「fill」プロパティには他にも機能があるので、色々と試してみてください。

 

3.シェイプ・オブジェクトの関数

 シェイプ・オブジェクトの関数について説明します。

 

3.1 色を変更:object:setFillColor()

 シェイプ・オブジェクトが持つ「setFillColor」関数を呼び出すと、色を変更することが可能です。
object:setFillColor( gray )
object:setFillColor( gray, alpha )
object:setFillColor( red, green, blue )
object:setFillColor( red, green, blue, alpha )
object:setFillColor( gradient )

※ 色の設定方法に関しては「ペイントテーブル」を参照してください。

local rect = display.newRect(display.contentCenterX, display.contentCenterY, 200, 150)
rect:setFillColor(1, 1, 0, 1)

 

 

3.2 枠の色の変更:object:setStrokeColor()

 シェイプ・オブジェクトが持つ「setStrokeColor」関数を呼び出すと、枠の色を変更することが可能です。
object:setStrokeColor( gray )
object:setStrokeColor( gray, alpha )
object:setStrokeColor( red, green, blue )
object:setStrokeColor( red, green, blue, alpha )

※ 色の設定方法に関しては「ペイントテーブル」を参照してください。

local rect = display.newRect(display.contentCenterX, display.contentCenterY, 200, 150)
rect.strokeWidth = 10
rect:setStrokeColor(1, 1, 0, 1)

 

 

       

<更新履歴>

更新日 Corona SDKのバージョン
新規作成 2015年7月9日 v2015.2646

 

 

前へ          メニューへ          次へ

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)