デジタルエッチングを作成する

Sep 13, 2025
操作方法

このチュートリアルでは、機械的な描画玩具を取り込みます。 （アトリーと命名された）キャンバスを使用して、私たちは最初に本物のおもちゃに似ている錠剤に焦点を当てます。タッチイベントを利用してダイヤルを制御し、デバイスのモーションイベントを消去することができます。電話を出ません。また、WebSocketを使用して、コントロールと描画領域を分割して可能性を高める方法についても説明します。

01.資産を取得します

このチュートリアルではnode.jsを使用します。始める前に、に行きます ファイルイロ 、チュートリアルの横にある無料のものと無料のコンテンツを選択してください - ここであなたはチュートリアルに必要な資産をダウンロードすることができます。次に、以下のコマンドを実行し、それは依存関係をインストールしてサーバーを起動します。 Aを作成するためにノードを使用しています ローカルホスト そしてそれはまた後でWebSocketのために役立つでしょう。 

 NPMのインストール
ノードサーバー/ index.js

02. draw（）関数を使用してください

に main.js. 、 ドロー（） 関数は私たちのアプリケーションの中心点になります。キャンバスを使用して2点間に線を描きます。原点（X1、Y1）は、私たちが最後に私たちの図面を残し、目的地（x2、y2）、到達したい新しいポイントです。私たちは今や描画の形式を観察するためにこの機能を起動する必要があります。 

関数描画（X1、Y1、X2、Y2）{
  // init（）にグローバルにコンテキストが設定されています
  context.beginpath（）;
  context.moveto（x 1、y 1）;
  context.lineto（x2、y2）;
  context.stroke（）;

03.キーボードイベントを実装します

ダイヤルを実装する前に、描画関数をトリガーできるキーボードリスナーを素早く追加しましょう。あなたはすでに別の提供されています キーコード この例では、あなたはリスナーをわずかにトリガーするために少し修正する必要があるでしょう。 ドロー（） 先に定義された機能。ブラウザを更新して、矢印キーで描画できるものを確認してください。 

 Document.AdDeventListener（ 'keydown'、関数（e）{
  / * KeyCodeスイッチはここに行きます* /
  draw（math.floor（prev_horizo​​ ntal）、math.floor（prev_vertical）、math.floor（水平）、math.floor（virtical））;
  prev_vertical =垂直;
  PREV_HORIZONTAL =水平;
;）;

04.キャンバスのサイズを変更します

CANVAS要素にまだ割り当てられているサイズがないことに気づいた可能性があります。私たちの描画ボードのために、私たちは大きなスペースを望みます、たぶん全体のウィンドウでさえあります。以下のコードはサイズ変更イベントの面倒を見ていますが、電話を忘れないでください 調整フレーム（） に 初期化（） 同じように。 

関数AdjustFrame（）{
  // CANVASはinit（）でグローバルに定義されています
  canvas.width = window.innerwidth。
  canvas.height = window.innerHeight;
}
window.addeventListener（ 'sization'、調整フレーム）;

05.フレームを追加します

私達はアプリケーションがオリジナルのおもちゃのようになるように、できるだけ元のおもちゃのように見えますので、描画領域の周囲にフレームを追加します。そうするために、マージン値を定義し、CSSを修正することができます。 ＃スケッチ マージンへ：20px Auto。キャンバスを水平に中央揃え、ダイヤルの下部に大きなスペースを保ちます。 

 var frameMarginVertical = 122。
var frameMarginHorizo​​ntal = 62;
関数AdjustFrame（）{
  canvas.width = window.innerwidth  -  FrameMarginHorizo​​ ntal;
  canvas.height = window.innerHeight  -  FrameMarginVertical。

06.ダイヤルを作成します

私たちはすでにダイヤルのCSSを与えました public / css / styles.css. たくさんの外観をお過ごしください。次に2を追加します ＆lt; div＆gt; の下のタグ ＆lt;キャンバス＆gt。 後述のようにHTMLファイルで。慣例として、水平方向の描画に左ダイヤル、垂直方向の右側を使用します。また、新しい変数を追加しています 初期化（） タッチイベントの準備をする機能。 

 div id = "DialHorizo​​ ntal" class = "dial"＆gt; / div＆gt;

 var targetleft = document.getElementByID（ 'DialHorizo​​Ntal'）;
var regionleft = new ZingTouch.Region（TargetleFt）。
var targetright = document.getElementByID（ 'dialvertical'）;
VAR RegionRight = New ZingTouch.Region（TrategRight）

07. ZingTouchを使用してください

The canvas with added dials, tied to the draw() function

ダイヤルを追加したキャンバス（draw（）関数に接続されています

ZingTouchは、さまざまなタッチジェスチャを検出できるJavaScriptライブラリであり、マウスイベントも処理します。それはあなたのために提供されています / public / lib / フォルダは、ダイヤルを制御するために使用するように。以下は左制御の実装です。あなたは反対側のために複製し修正する必要があります。 

 RegionLeft.Bind（TargetleFt、Rotate '、機能（E）{
  if（e.detail.distancefromlast＆lt; 0）{
  --horizo​​Ntal;
  } そうしないと {
  ++水平;
  }
  AngleHorizo​​ntal + = E.Detail.DistanceFromLast;
  targetleft.style.transform = 'Rotate（' + AnglehOrizontal + 'deg）';
  draw（math.floor（prev_horizal）、math.floor（prev_vertical）、math.floor（水平）、math.floor（prev_vertical））;
  PREV_HORIZONTAL =水平;
;）;

08.ダイヤル境界を実装します

画面外の行をブロックするには、 カンドロー（） booleanを返す関数。私たちはその方向を「水平」または「垂直」のどちらか、そして水平変数または垂直変数の値を渡します。両ダイヤルの「Rotate」リスナーでこの機能を呼び出し、「true」の場合にのみ、角度を増やして呼び出してください。 ドロー（） 関数。 

関数candraw（方向、値）{
  var max =（方向=== 'Horizo​​r'）？（CANVAS.Width）:( Canvas.Height）;
  if（value＆lt; 2 || value＆gt; max  -  2）{
  falseを返します。
  }
  trueを返します。

09.ダイヤルの問題を避けます

私たちが実装したばかりの範囲で、値が小数点でさえ制限を超える場合、ダイヤルが一端に動かなくなる可能性があります。この状況を避けるために、私たちはケースを扱う必要があります カンドロー（） Horizo​​ ntal Controllerの場合は、ここに示すように、falseと、以前に有効なものに値をリセットします。 

 if（Candraw（ 'Horizo​​ ntal'、水平））{
  AngleHorizo​​ntal + = E.Detail.DistanceFromLast;
  targetleft.style.transform = 'Rotate（' + AnglehOrizontal + 'deg）';
  draw（math.floor（prev_horizal）、math.floor（prev_vertical）、math.floor（水平）、math.floor（prev_vertical））;
  PREV_HORIZONTAL =水平;
} そうしないと {
  水平= prev_horizo​​ ntal;

10.タブレットの描画ボードを入手してください

できるだけ早くターゲティングされたデバイスをテストすることを常にお勧めします。私たちのアプリケーションは現在良い形で、タッチイベントに対応できます。タブレットに描画ボードを入手するには、リモートでローカルホストにアクセスする手順に従ってください。

次に、SafariとDepod Menuを使ってiPad上のアプリケーションを調べます。 Androidデバイスの場合は使用してください Chrome：//検査者 。

11.加速度計をテストする

Testing the accelerometer in Safari [click the icon to enlarge]

Safariで加速度計をテストする[アイコンを拡大する]をクリックします]

タブレットをUSB経由でコンピュータに接続し、開発者ツールを使用してアプリケーションを調べます。

以下のコードを整って、デバイスを移動するときに、さまざまな加速度値を確認できるはずです。キャンバスをリセットするために、X軸上の加速度を5歳以上で考慮して、不透明度をゆっくりと減少させることにしました（ 消去します ）。 

 var eraserate = 1。 / *グローバル変数として定義します* /
Window.AdDeventListener（ 'devicemotion'、function（イベント）{
  console.log（ 'Acceleration ::'、Event.acceleration）;
  if（event.acceleration.x＆gt; 5）{
  Eraserate  -  = math.abs（event.acceleration.x/ / 100）。
  console.log（ 'erase ::'、消去）;
  }
;）;

12.削除するように振る

前のステップでは、動きと加速度を確認する方法を見ました。私たちは今呼ぶ必要があります FadeDrawing（） 私たちの状態が満たされるとき。この場合、さまざまな不透明度でキャンバスの正確なコピーを再描画します。

グローバルアルファを1インチにリセットします ドロー（） そしてを設定します GlobalCompositosepation ソースオーバーに戻る。 

関数fadeDrawing（）{
  if（消去＆lt; 0）{
  context.clycrect（0,0、canvas.width、canvas.height）;
  消去= 1。
  帰国;
  }
  context.globalalpha =消去;
  context.globalCompositeOperation = 'copy';
  Context.DrawImage（CANVAS、0,0）;

13.それを本当の契約のように見せる

Our application with shake-to-delete functionality

Shake-to-Delete機能を持つアプリケーション

これまでのところ、私たちのアプリケーションはかなり賢くて平らに見えます。深さを与えるために、フレームの色、フレーム内の影、ダイヤル上の音量の少し音量を追加します。ダイヤルシャドウのCSSはすでに提供されていますが、ボディの最後にそれらの2つの要素を追加する必要があります。

ここに示されている要素のためのCSSを完成させてください。 

 DIV ID =「DialShadowHorizo​​Ntal」class = "shadow"＆gt;＆lt; / div＆gt;
＆lt; div id = "DialShadowVertical" Class = "Shadow"＆Gt; / div＆gt; 
ボディ{
  背景：＃09cbf7;
}
#sketch {
  Box-Shadow：2px 2px 10px RGBA（0,0,0,,25）挿入;

14. WebSocketsを使用してください

このチュートリアルの冒頭で、私たちのノードサーバーを介してWebSocketsを使用して簡単に説明しました。タブレット用のスタンドアロンの描画パッドがありますので、お使いの携帯電話でも利用できるようになります。ただし、PHONESは小さすぎて画面とコントロールの両方を表示することがあります。したがって、ソケットを使用して電話とコンピュータの画面を通信します。

15.デバイスサイズを検出します

メインのHTMLファイルでは、置き換えます main.js. withう js. 。後者には、これまでに完了したすべてのものが含まれています。これは、次の手順で検査されるデバイスやソケットを処理するための変更です。見て detectdevice（） - このメソッドは今ではなく荷重で呼び出されます 初期化（） アプリケーションの処理を処理するための「モード」を決定します。

以下は検出されている電話の特定の場合です。 

（window.innerwidth＆lt; 768）{
  socket = io.connect（）;
  Document.QuerySelector（ '＃Sketch'）を削除（）;
  var dials = document.querySelectorすべて（ '。ダイヤル、.shadow'）;
  [] .foreach.call（ダイヤル、機能（項目）{
  item.classlist.add（ 'big'）;
  }）;）
  isControls = true;
  FrameMarginVertical = 62;
  socket.emit（ 'ready'、{'ready'： 'コントロール'}）;

16.電話からコンピュータへ

From phone to computer, remotely drawing through sockets

電話からコンピュータへ、リモートでソケットを描いてください

全体に js. などのコードのビットに気付くでしょう socket.emit（） または socket.on（） 。これらは私たちのコントロール（電話）とスクリーン（コンピュータ）インスタンスのエミッタとリスナーです。すべての放出されたイベントは、接続されているすべてのソケットに再配布されるサーバーを通過する必要があります。に server \ index.js 「接続」関数にもう少しリスナーを追加し、ノードサーバーを再起動します。 

ソケット。（「描画」、機能（データ）{
  io.Sockets.emit（ 'draw'、data）。
}）;）
Socket.on（ 'Erase'、関数（データ）{
  io.Sockets.Emit（ 'Erase'、Data）。
}）;）
Socket.on（ 'AdjustFrame'、関数（データ）{
  ScreenWidth = data.Screenwidth。
  ScreenHeight = data.ScreenHeight;
  io.Sockets.Emit（ 'AdjustFrame'、データ）。
;）;

17.電話の向きを修正しました

あなたの携帯電話でリモートでアクセスしながら、あなたのコンピュータのlocalhostにアクセスしてください（以前はタブレットから以前にしたように）。これで、携帯電話のダイヤルを回しながら、画面に描かれている行が表示されます。ただし、電話機が縦モードになっている場合は、ダイヤルが正しく適合しないことに気付くでしょう。

私たちはこれをいくつかのCSSで修正することができます。 

 @mediaスクリーンと（向き：肖像画）{
  .dial.big＃ダイヤルvertical、.shadow.big＃DialShadowVertical {
  右：Calc（50％ -  75px）。
  下：20px;
  上：オート;
  }
  .dial.big＃DialHorizo​​Ntal、.shadow.big＃DialShadowHorizo​​ntal {
  左：Calc（50％ -  75px）。
  トップ：20px;
  }

18.おもちゃをより現実的にする

Touching your tablet leaves some temporary fingerprints

タブレットに触れると一時的な指紋があります

タブレットのバージョンに戻りましょう。悲しいことに、振動APIはiOSでは使用できませんので、ダイヤルが回転すると触覚フィードバックを実装できません。あなたがそれを押したならば、元のおもちゃでは、あなたはそれを押したならば、あなたは画面に一時的な黒い指紋マークを残すことができます。この機能を複製するためにデバイスにタッチイベントを追加できます。

これらのリスナーをINに設定します 初期化（） そして彼らが呼び出す関数を探ります。 

（type === 'all'）{
  CANVAS.AdDeventListener（ 'touchstart'、関数（e）{
  E.PreventDefault（）;
  DrawFingerPrint（E.LayerX、E.Layery、True）;
  }）;）
  CANVAS.AdDeventListener（ 'touchend'、関数（e）{
  HideFingerPrint（E.LayerX、E.Layery）;
  }）;）

19.キャンバスのコピーを保存してください

の中に DrawFingerPrint（） メソッド、他に何もする前に、CANVASの現在の状態のコピーを、印刷をクリアするときに描画を復元するために使用する隠し要素に保存します。それは最初のタッチでのみ起こり、それ以降の呼び出しでは100msごとに印刷のサイズを大きくします。 

関数DrawFingerPrint（XPOS、YPOS、SaveCanvas）{
  / *部分関数は、extra.js *を参照してください。
  if（SaveCanvas）{
  Hiddencanvas = document.createelement（ 'canvas'）;
  VAR HiddEncontext = HiddenCanvas.getContext（ '2D'）;
  hiddencanvas.width = canvas.width;
  Hiddencanvas.height = canvas.height;
  HiddEncontext.DrawImage（キャンバス、0,0）。
  }

20.アプリケーションをオフラインで実行します

ホームスクリーンアプリとしてタブレットに保存することで、アプリケーションを真にスタンドアロンすることができました。サーバーへの接続が必要なので、電話機のために同じことをすることはできません。に /公衆 名前のファイルを見つけます Sketch.AppCache そして、IPアドレスによる 'localhost'のすべてのインスタンスを置き換えます。

さて、次のように読み取るHTMLを修正しました。

21.アプリケーションを保存します

タブレットで再度アプリケーションを参照して、[ホーム画面に追加]オプションを選択します。デスクトップに新しいアイコンが表示されます。まだローカルホストに接続されている間に1回開きます。以前に設定したキャッシュマニフェストは、バックグラウンドでオフラインで使用するために必要なすべてのファイルをダウンロードします。 Wi-Fiを回して再度アプリを開きます。 vooilà！

この記事は最初に登場しました Webデザイナーマガジン 問題263.それを購入します ここに 。

続きを読む：

  • 15のWeb APIが聞いたことがない
  • インターフェースアニメーションを設計するための初心者ガイド
  • より良いCSSを書くためのガイド

操作方法 - 最も人気のある記事

映画館4Dのコンセプトアートをモデル化する方法

操作方法 Sep 13, 2025

数年前、Lucid Gamesのアートディレクターは、PlayStation 4に公開される4 x 4の地上戦闘ゲームのため�..

見事なプリントプロモーション素材を作成するための3つのヒント

操作方法 Sep 13, 2025

ますますデジタル世界では、巧妙に細工されたプリントプロモーション資料は深刻な影響を与え..

3.jsを使用してWebGLを使い始める

操作方法 Sep 13, 2025

webgl. これは最新のブラウザ全てで広くサポートされており、ハードウェアアクセラレ�..

クリエイティブアセンブリのゲームキャラクターをレベルアップする

操作方法 Sep 13, 2025

Warhammerのミニチュアを総戦争のビデオゲームに翻訳するためのゲームワークショップを作成する..

あなた自身のキャンバスボードを作る方法

操作方法 Sep 13, 2025

あなた自身のキャンバスボードを作ることは楽しい、早く、あなたにお金を節約することができ..

オイルで光を捉える方法

操作方法 Sep 13, 2025

光は常に画家を刺激するものです - それが建物の石や花瓶の光線を捕まえる花の石に輝くかどう..

3Dプリントゴブリンを彫刻する方法

操作方法 Sep 13, 2025

このプロジェクトの概念、きのこゴブリンは、私の友人のアドリアン・スミスによる絵から来て..

角度のフルページのウェブサイトを構築する方法

操作方法 Sep 13, 2025

ページ1/4： ページ1 ページ1 2ページ ページ3. ..

カテゴリ