Drawing Canvas

キャンバスに絵を書くことができるようになります。

以下のリンクから、サンプルファイルをダウンロードすることができます

スクリーンショットはKwik3のものですが,ファイルのプロジェクトはKwik4のものにアップデートされています

New Project

canvas.psd を開いてください.このpsdファイルは 1024×768なのでiPad Mini向けのkwikプロジェクトを新規作成します。

canvas.psdがKwikに設定されていることを確認し、先ずパブリッシュしてみましょう。次にアニメーションやインタラクションなどを追加していきます。

corona simulatorで画像出力をプレビュー

インタラクション

ボタンをタッチする操作で、ブラシ(筆)のサイズや色を選択します。 デバイスの写真フォルダーにスクリーンショットを保存します. またデバイスをシェイクをすると,キャンバスの絵が消去されます。

  • ボタン
    • Brush size
    • Brush Color
    • Screenshot
  • Shake

Bursh Size ボタン

ButMediumレイヤーを選択し,Interactionsから Add buttonをクリックしてください。

Add buttonウィンドウで,Canvas interactionsから Brush Sizeを選択してください.Size 15とAlpha 100%に設定して、ブラシを作成します。

butLargeを選択し,Add buttonをクリックします。

but_largeの Brush Sizeを 30に,Alpha 15%に設定してください

Take Screenshot ボタン

スクリーンショットを撮り,写真フォルダーに保存するためのボタンです。butCameraレイヤーを選択して、Add buttonをクリックしてください。

Add Buttonウィンドウで,Name:but_screenshot、Canvas > TakeScreenshotのアクションを設定します。

Color ボタン

ブラシに色を設定するボタンです。butOrangeレイヤーを選択し、Add buttonをクリックします。Canvas > Bush Colorのアクションを選択します。

オレンジ色に設定するボタンが作られました

butWhiteレイヤーで白色のブラシを作りましょう.全てのRGBを255にして作るのは良くありません。なのでBの値を252にしましょう

ButBlueは青色のブラシです.

シェイクでキャンバスを削除

デバイスをシェイクすることによってキャンバスの描画を削除します。まず、ActionsのProject and Pagesのツールセットから、Actionをクリックして、事前にerace actionを作成しておきます。

Name:act_eraseを入力します。次にCanvas > Erase Canvasのアクションを追加します。Createボタンをクリックして、ウインドウを閉じます。

次に、InteractionsからEnable shakeをクリックしてください。

Enable Shakeウィンドウで、先程作成した act_eraseを選択してください

bigCandice-Canvas

bigCandeiceが、描画されるエリア(キャンバス)のサイズを指定するレイヤーとなります。このレイヤーには、kwikがキャンバスサイズを判定するための仕掛けがあります。

bigCandiceレイヤーの左上の角と右下の角に小さな四角があるのに注意してください.フォトショップは、レイヤーが完全に透明な時に幅と高さが正しく判定されません。幅と高さを知るために小さな四角が必要になります。

これは黄色い背景がない時の画像です.この白いレイヤーはbigCandiceの下に置かれています

bigCandiceレイヤーを選び、Interactionsのツールセットから Set canvasをクリックしてください。

Set Canvasウィンドウで,brush size,brush colorsなどの初期値を設定しましょう.

パブリッシュします。

ShakeはHardwareメニューにあります

補足

キャンバス機能は,ページを切り替えた後でも,キャンバスの描画データを一時的に保存することが可能です.

results matching ""

    No results matching ""