初めはHTMLでゴリゴリと思っていたんですけど、
四角を書いてそれを線で結びたかったのでCanvasを使って絵を書こうと思いました。
JavaScript部分にはjQueryを使います。
まずはHTML上にCanvasを宣言します。
<body id="body">
<canvas id="canvas"></canvas>
</body>
Canvasを一杯使いたいのでCanvasの要素を取得してきて
それをbodyタグと同じ大きさにします。
var $cvm = $('#canvas');
var width = $(document.body).width();
var height = $(document.body).height();
$cvm.attr("width", width);
$cvm.attr("height", height);
ウィンドウのサイズ変更されたら、、、って考えなきゃだめですね。
TODOにしとこう！
でキャンバスの基本設定
var ctx = $cvm[0].getContext('2d');
ctx.lineWidth = 1;
ctx.globalAlpha = 0.7;
ctx.globalCompositeOperation = "source-over";
getElementById() から取得してgetContext("2d")でもできるのですが
せっかくjQueryを使用しているのでjQueryのオブジェクトから取得。
lineWidthは線の太さ、globalAlhaは透明度ですね。
globalAlhaを設定した場合、globalCompositeOperationを設定します。
このglobalCompositeOperationってのは
ココが分かりやすいです。
文章よりサンプルがわかりやすいかも。
さて四角を書くのですが、それに対してテキストを入れてみます。
ctx.font =textHeight + 'px "ヒラギノ角ゴ Ｐｒｏ"';
// 表示するテキストの幅を取得する
var textWidth = ctx.measureText(item.text).width;
//Itemの幅を設定する
item.width = textWidth;
// テキストの背景を描画
ctx.fillStyle = "white";
ctx.fillRect(item.x, item.y, item.width,textHeight);
//テキストを描画
ctx.textBaseline = "bottom";
ctx.fillStyle = "black";
ctx.fillText(item.text, item.x, item.y + textHeight);
まずContextのfontに対して文字列の大きさ(高さの数値で変数化してます)を設定しています。
その後、テキストの横幅を測っています。ContextのmeasureTextで測ってます。
item.widthというものに残していますがitemはテキストのオブジェクト(描画位置とか持ってる)を
再描画用に持っているので、それに残してるってだけです。(矩形描画時に使ってます)
色をfillStyleで設定してfillRect()で矩形を描画します。
その後、textBaselineでテキストの位置を設定してfillStyleで文字の色を設定して
fillText()で描画を行います。これで矩形内に文字列を埋め込みます。
で要素間を結合したいので、その座標に関して線を引きます。
今回は「ベジエ曲線」という線を使って要素を結合したいと思います。
ctx.beginPath();
var point = new bezierPoint(preItem,item);
ctx.moveTo(point.x1,point.y1);
ctx.bezierCurveTo(point.x2,point.y1,point.x1,point.y2,point.x2,point.y2);
ctx.strokeStyle="#440000";
ctx.stroke();
まずbeginPath()を呼びます。
これは線を描画する際に「さぁ始めるぞ！」っていう事を意味します。
その後、bezirePoint()を呼んでいますが、これは独自処理で線を引くための座標を算出しています。
それで取得してきたpoint(独自のオブジェクト)を元にmoveTo()によって開始点を設定します。
そこからbezierCurveTo()を利用して、終点を設定します。
６個引数がありますが、４つ目までは曲線の付加情報ですね。(もうちょっと凝る予定ですけど)
で５，６の引数が曲線の終点になります。
でstorokeStyleで色を決定し、stroke()で線を描画します。
これをやると
こんな感じになります。
ひとまず少し前に記述していたEvernoteの要素をそのまま出してみました！
0 件のコメント:
コメントを投稿