HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第10回 ドラッグの軌跡を滑らかな曲線で描く

この記事を読むのに必要な時間:およそ 7 分

本当に滑らかな曲線が描けているのか

これでは腑に落ちない読者がおられよう。前掲コード1を試しても,第9回コード2との違いが感じられない。本当に滑らかな曲線が描けているのか確かめるには,コードにつぎのような手を加えればよい。まず,フレームレートが高いと座標が細かくつなげられるため,曲線に近く見える。Ticker.setFPS()メソッドを使えば,フレームレートが下げられる。つぎに,描く線が太く,また角や端は丸められている。これを細く,シャープにすれば角が目立つ。さらに,線が見やすいように,アルファは1(デフォルト)にしよう。

function draw(eventObject) {

  createjs.Ticker.addEventListener("tick", wipe);
  createjs.Ticker.setFPS(4);
}

function startWipe(eventObject) {

  wipingShape.graphics
  // .setStrokeStyle(radius * 2, "round", "round");
  .setStrokeStyle(2);
}
function wipe(eventObject) {

  wipingShape.graphics
  // .beginStroke(createjs.Graphics.getRGB(0x0, 0.15))
  .beginStroke(createjs.Graphics.getRGB(0x0))
  .moveTo(oldMidPoint.x, oldMidPoint.y)
  .quadraticCurveTo(oldX, oldY, midX, midY);

}

前掲jsdo.itのコードでも,これらのステートメントはコメントアウトして加えてある。興味がある読者は,ぜひお試しいただきたい。マウスをジクザグに動かしても,軌跡は曲線で描かれるはずだ。

しかし,逆にいえば,そこまでしなければ差はわからない。このお題についていえば,第9回コード2ででき上がりとしても差し支えなかったということになる。それでも,滑らかな軌跡の描き方は,覚えておいて損はない。ということで,今回あえてご紹介した次第だ※3)⁠

もうひとつ謎が残っていた。お題の「ALPHAMASK FILTER」「重大な問題」だ。このコードも前掲コード1と同じく,マウスポインタと中点の座標を変数(oldPtとoldMidPt)にとっている。問題は,マウスボタンを押したときのリスナー関数(handleMouseDown())で,変数にPointオブジェクトを代入するステートメントだ。

JavaScriptも含めて多くのプログラミング言語は,変数にはオブジェクトの参照を代入する。つまり,ふたつの変数(oldPtとoldMidPt)は,同じオブジェクトを参照している。そのため,Graphics.curveTo()メソッドに渡したコントロールポイントとアンカーポイントの座標は同じになる。その場合,このメソッドは座標を直線で結ぶことになる。

線を描いた後,新たな座標値を変数に与えるステートメントでも,Pointオブジェクトはつくり直していないので,ふたつの変数は同じオブジェクトの参照をもったままということになる。

var oldPt;
var oldMidPt;

function handleMouseDown(event) {
  oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
  oldMidPt = oldPt;

}

function handleMouseMove(event) {

  drawingCanvas.graphics.setStrokeStyle(40, "round", "round")

  .curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
  oldPt.x = stage.mouseX;
  oldPt.y = stage.mouseY;
  oldMidPt.x = midPoint.x;
  oldMidPt.y = midPoint.y;

}

奇しくも,このお題では座標を直線で結んでも,わからないし差し支えないということを示している。まぁ,こういうこともあるだろう。次回は,また新たなお題に取り組みたい。

※3
連続する座標はコントロールポイントにして,中点を滑らかな曲線で結ぶシミュレーションのコードをjsdo.itに掲げた。クリックした座標の軌跡を滑らかな曲線で描く。

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書