ブログの説明

学校に通わないで学んだことを記しています。間違っているところが何かありましたらご指摘下さると幸いです。コメントに対する返信が遅れる可能性があります。その場合は申し訳ございません。

このブログでは広告を表示しています。このブログ内の投稿記事を検索するには右上の拡大鏡のアイコンを、アーカイブやラベル付けから投稿記事を閲覧するには左上の三重線のアイコンをクリックして下さい。

数式の表示にはMathJaxを利用させていただいています。数式の表示のためにJavaScriptが有効である必要があります。そうでない場合、訳の分からないLaTeXのコードが表示されます。幾何学図形やチャートの表示にはHTML5 CanvasやGoogle Chartを使用しています。その表示のためにもJavaScriptが有効である必要があります。

HTML5 Canvasで写像ダイアグラム（写像図）を描く

HTML5 CanvasとJavaScriptを用いてHTMLドキュメントに数学の写像ダイアグラム（写像図）を描いてみた。この投稿はその備忘録。

HTML5 CanvasかJavaScriptに未対応か無効になっています。

写像ダイアグラムを描きたいHTMLドキュメント内の場所にcanvas要素を埋め込む必要がある。そのcanvas要素は例えば次のように記す。その際にid属性を指定することを忘れずに。HTML5 Canvasはこのidを受け取る。

<canvas id="mapping" width="200" height="200">
HTML5 CanvasかJavaScriptに未対応か無効になっています。
</canvas>

canvas要素のwidthとheightという属性はキャンバスの幅と高さを指定するもの。このサイズを適切に指定しないと描かれたオブジェクトがはみ出して見えなくなってしまうことがある。

楕円オブジェクト

HTML5 CanvasかJavaScriptに未対応か無効になっています。

HTML5 Canvasを使って楕円を描くためにはellipse()というメソッドを用いることができる。このメソッドの引数は次の順番に指定する。オプションは省略することができる。

ellipse(1,2,3,4,5,6,7,8);
  1. 楕円の中心の水平座標を指定。
  2. 楕円の中心の垂直座標を指定。
  3. 楕円の水平軸半径を非負の値で指定。
  4. 楕円の垂直軸半径を非負の値で指定。
  5. 楕円の水平軸の傾きを弧度法で指定。
  6. パスの始点を弧度法で指定。
  7. パスの終点を弧度法で指定。
  8. 【オプション】楕円を描くパスの方向を反時計回りにしたい場合にtrueと指定。

ただしellipse()メソッドは古いウェブブラウザでは対応していない場合があるので要注意。

次のJavaScriptのコードではコンストラクタ函数によって楕円クラスのようなものを定義している。そしてそれをインスタンス化して各々の楕円オブジェクトを作成し、コンストラクタ函数の中で定義した描画メソッドを呼び出すことで楕円を描くようにしている。

<script>
// 楕円のコンストラクタ函数を定義
function ellipse(radiusX,radiusY,rotation,
   lineWidth,stColor,flColor){

    // プロパティを定義
   this.radiusX = radiusX; // 楕円の水平軸半径
   this.radiusY = radiusY; // 楕円の垂直軸半径
   this.rotation = rotation; // 楕円の水平軸の傾き
   this.startAngle = 0; // 線の始点
   this.endAngle = Math.PI / 180 * 360; // 線の終点
   this.lineWidth = lineWidth; // 線の太さ
   this.stColor = stColor; // 線の色
   this.flColor = flColor; // 塗りつぶす色

    // 楕円を描くメソッドを定義
   this.draw = function(canvasId,x,y){
      // HTML5 Canvasを利用する
      const Canvas = document.getElementById(canvasId)
      const Ctx = Canvas.getContext("2d");

      Ctx.beginPath(); // パスの初期化
      // ellipse()メソッドを利用
      Ctx.ellipse(x,y,this.radiusX,this.radiusY,
         this.rotation,this.startAngle,this.endAngle);
      Ctx.lineWidth = this.lineWidth; // 線の太さ
      Ctx.strokeStyle = this.stColor; // 線の色
      Ctx.stroke(); // 線を描く
      Ctx.fillStyle = this.flColor; // 塗りつぶす色
      Ctx.fill(); // 塗りつぶす
   }
}

// 各々のオブジェクトを作成（インスタンス化）
const Ellipse1 = new ellipse(50,80,0,2,'blue','skyblue');
const Ellipse2 = new ellipse(50,80,0,2,'red','pink');

// 定義したメソッドを呼び出して楕円を描画
Ellipse1.draw(mapping,60,110);
Ellipse2.draw(mapping,190,110);
</script>

コンストラクタ函数を利用してクラスのようなものを定義することができる。コンストラクタ函数が普通の函数と違うところは「this.変数名」によって変数を宣言しているところ。これによって「コンストラクタ函数名.変数名」という書式でコンストラクタ函数の外からアクセスできるようになる。これはすなわちオブジェクト指向言語のプロパティ（メンバ変数）のように機能する。プロパティに値を代入するには「コンストラクタ函数名.変数名 = リテラル;」という書式を使う。

コンストラクタ函数は擬似的なクラスとして働くので、インスタンス化によって複数のオブジェクトをこれに基づいて作成することができる。そのためにはnewというキーワードを使って変数に代入する。

コンストラクタ函数内では「this.メソッド名 = function(引数){...}」という書式を用いてメソッド（メンバ函数）のようなものを定義することができる。これも「コンストラクタ函数名.メソッド名();」という書式を用いてコンストラクタ函数の外から呼び出すことができる。

楕円を定義したコンストラクタ函数では、それがインスタンス化されて各々のオブジェクトが作られるときに、楕円の中心点の水平座標と垂直座標、楕円の水平軸の傾き（ラジアン）、線の太さ、線の色、そして塗りつぶす色を引数として受け取るように定義した。

楕円を定義したコンストラクタ函数の中で定義したdrawメソッドは、HTML5 Canvasによって楕円を描画するためのもの。このメソッドではそれが呼び出される際にcanvas要素のIDと楕円の中心点の座標を受け取るようにした。

楕円を定義したコンストラクタ函数の中で「線の終点」を示すプロパティに代入されている「Math.PI / 180 * 360」という計算は、度数法の値360を弧度法の値に変換するためのもの。HTML5 Canvasのほうのellipse()メソッドは角度をラジアンで受け取るため。

ラベル・オブジェクト

HTML5 CanvasかJavaScriptに未対応か無効になっています。

ラベルのオブジェクトを定義するコンストラクタ函数が次のコード。

<script>
// 楕円のコンストラクタ函数を省略

// ラベルのコンストラクタ函数を定義
function lavel(text,color){

   // プロパティを定義
   this.text = text; // 文字列
   this.color = color; // 文字列の色

   // ラベルを描くメソッドを定義
   this.draw = function(canvasId,x,y){
      // HTML5 Canvasを利用する
      const Canvas = document.getElementById(canvasId);
      const Ctx = Canvas.getContext("2d");

     // フォントを設定
     Ctx.font = '15px sans-serif';
     // 文字の水平位置を設定
     Ctx.textAlign = "start";
     // 文字の垂直位置を設定
     Ctx.textBaseline = "middle";
     // 塗りつぶしの色を設定
     Ctx.fillStyle = this.color;
     // 塗りつぶしの文字を描画、(文字列, x軸, y軸, 最大幅)
     Ctx.fillText(this.text,x,y,500);
   }
}

// 楕円をインスタンス化
const Ellipse1 = new ellipse(50,80,0,2,'blue','skyblue');
const Ellipse2 = new ellipse(50,80,0,2,'red','pink');

// ラベルをインスタンス化
const Lavel1 = new lavel('定義域','black');
const Lavel2 = new lavel('終域','black');

// 楕円を描くメソッドを使う
Ellipse1.draw(mapping,60,100);
Ellipse2.draw(mapping,190,100);

// ラベルを描くメソッドを使う
Lavel1.draw(mapping,35,10);
Lavel2.draw(mapping,175,10);
</script>

ラベルを定義したコンストラクタ函数では、それがインスタンス化されるときにラベルの文字列とその文字の色を引数として受け取るようにした。

ラベルを定義したコンストラクタ函数の中で定義したdrawメソッドでは、それが呼び出される際にcanvas要素のIDとラベルが描かれる場所を示す座標を受け取るようにした。

要素オブジェクト

HTML5 CanvasかJavaScriptに未対応か無効になっています。

要素のオブジェクトを定義するコンストラクタ函数が次のコード。

<script>
// 楕円のコンストラクタ函数を省略

// ラベルのコンストラクタ函数を省略

// 要素のコンストラクタ函数を定義
function element(text,color){

   // プロパティを定義
   this.text = text; // 文字列
   this.color = color; // 文字列の色

   // 要素を描くメソッドを定義
   this.draw = function(canvasId,x,y){

      // 座標プロパティ
      this.x = x; // 水平座標
      this.y = y; // 垂直座標

      // HTML5 Canvasを利用する
      const Canvas = document.getElementById(canvasId);
      const Ctx = Canvas.getContext("2d");        

      // フォントを設定
      Ctx.font = 'bold 15px sans-serif';
      // 文字の水平位置を設定
      Ctx.textAlign = "start";
      // 文字の垂直位置を設定
      Ctx.textBaseline = "middle";
      // 塗りつぶしの色を設定
      Ctx.fillStyle = this.color;
      // 塗りつぶしの文字を描画、(文字列,x軸,y軸,最大幅)
      Ctx.fillText(this.text,x,y,500);
   }
}

// 楕円をインスタンス化
const Ellipse1 = new ellipse(50,80,0,2,'blue','skyblue');
const Ellipse2 = new ellipse(50,80,0,2,'red','pink');

// ラベルをインスタンス化
const Lavel1 = new lavel('定義域','black');
const Lavel2 = new lavel('終域','black');

// 要素をインスタンス化
const Element1 = new element('a','black');
const Element2 = new element('b','black');
const Element3 = new element('d','black');
const Element4 = new element('e','black');
const Element5 = new element('f','black');
const Element6 = new eElement('α','black');
const Element7 = new element('β','black');
const Element8 = new element('γ','black');
const Element9 = new element('δ','black');
const Element10 = new element('ε','black');

// 楕円を描くメソッドを使う
Ellipse1.draw(mapping,60,100);
Ellipse2.draw(mapping,190,100);

// ラベルを描くメソッドを使う
Lavel1.draw(mapping,35,10);
Lavel2.draw(mapping,175,10);

// 要素を描くメソッドを使う
Element1.draw(mapping,55,40);
Element2.draw(mapping,55,70);
Element3.draw(mapping,55,100);
Element4.draw(mapping,55,130);
Element5.draw(mapping,55,160);
Element6.draw(mapping,185,40);
Element7.draw(mapping,185,70);
Element8.draw(mapping,185,100);
Element9.draw(mapping,185,130);
Element10.draw(mapping,185,160);
</script>

要素を定義したコンストラクタ函数では、それがインスタンス化されるときに文字列と文字列の色をその引数として受け取るようにした。

要素を定義したコンストラクタ函数の中で定義したdrawメソッドでは、それが呼び出される際にcanvas要素のIDと要素が描かれる場所を示す座標を受け取るようにした。

射オブジェクト

HTML5 CanvasかJavaScriptに未対応か無効になっています。

射のオブジェクトを定義するコンストラクタ函数が次のコード。

<script>
// 楕円のコンストラクタ函数を省略

// ラベルのコンストラクタ函数を省略

// 要素のコンストラクタ函数を省略

// 射のコンストラクタ函数を定義
function arrow(alength,width,color){

   // プロパティを定義
  this.length = alength; // 長さ
  this.width = width; // 太さ
  this.color = color; // 色

   // 射を描くメソッドを定義
   this.draw = function(canvasId,tailX,tailY,headX,headY){
      // HTML5 Canvasを利用する
      const Canvas = document.getElementById(canvasId);
      const Ctx = Canvas.getContext("2d");

      Ctx.beginPath(); // パスを初期化
      Ctx.lineWidth =  this.width; // 線の幅
      Ctx.moveTo(tailX + 15, tailY); // 線の始点
      Ctx.lineTo(headX + -5, headY); // 線の終点
      Ctx.strokeStyle = this.color; // 線の色
      Ctx.stroke(); // 線を描く
   }
}

// 楕円をインスタンス化
const Ellipse1 = new ellipse(50,80,0,2,'blue','skyblue');
const Ellipse2 = new ellipse(50,80,0,2,'red','pink');

// ラベルをインスタンス化
const Lavel1 = new lavel('定義域','black');
const Lavel2 = new lavel('終域','black');

// 要素をインスタンス化
const Element1 = new element('a','black');
const Element2 = new element('b','black');
const Element3 = new element('d','black');
const Element4 = new element('e','black');
const Element5 = new element('f','black');
const Element6 = new element('α','black');
const Element7 = new element('β','black');
const Element8 = new element('γ','black');
const Element9 = new element('δ','black');
const Element10 = new element('ε','black');

// 射クラスのインスタンス化
const Arrow1 = new arrow(10,1,'black');

// 楕円を描くメソッドを使う
Ellipse1.draw(mapping,60,100);
Ellipse2.draw(mapping,190,100);

// ラベルを描くメソッドを使う
Lavel1.draw(mapping,35,10);
Lavel2.draw(mapping,175,10);

// 要素を描くメソッドを使う
Element1.draw(mapping,55,40);
Element2.draw(mapping,55,70);
Element3.draw(mapping,55,100);
Element4.draw(mapping,55,130);
Element5.draw(mapping,55,160);
Element6.draw(mapping,185,40);
Element7.draw(mapping,185,70);
Element8.draw(mapping,185,100);
Element9.draw(mapping,185,130);
Element10.draw(mapping,185,160);

// 射を描くメソッドを使う
Arrow1.draw(mapping,Element1.x,Element1.y,
   Element6.x,Element6.y);
Arrow1.draw(mapping,Element2.x,Element2.y,
   Element6.x,Element6.y);
Arrow1.draw(mapping,Element3.x,Element3.y,
   Element7.x,Element7.y);
Arrow1.draw(mapping,Element4.x,Element4.y,
   Element9.x,Element9.y);
Arrow1.draw(mapping,Element5.x,Element5.y,
   Element10.x,Element10.y);
</script>

射を定義したコンストラクタ函数では、それがインスタンス化されるときに射の線の長さと太さと色を引数として受け取るようにした。

射を定義したコンストラクタ函数の中で定義したdrawメソッドでは、それが呼び出される際にcanvas要素のID、そして始点となる部分の水平座標と垂直座標、さらに終点となる部分の水平座標と垂直座標を受け取るようにした。

射の始点と終点の座標を指定するdrawメソッドの引数では要素オブジェクトのプロパティを利用している。

名前空間

最後に、変数名や函数名などが他のJavaSprictのコードと衝突しないように名前空間を作成した。JavaScriptでは正式に名前空間をサポートしていないけれども、函数や匿名函数やオブジェクト・リテラルを用いることでスコープを閉じることができるようなので、ここではそのために匿名函数を利用した。つまり、匿名函数でこれまで作成したコードをまるごと袋とじにした。

(function(){ // 匿名函数を使う
// ここにこれまで作成した一連のコードを置く。
})();

これは特に即時実行函数式とか即時呼び出し函数式と呼ばれることがある。

関連投稿

コメント

コメントを投稿

このブログの人気の投稿

LATEXで数式：指数と順列などで使う添数・添字

累乗（べき乗）で使われる指数（べき）など、右上に添えられる数や文字や記号はキャレット記号を用いて次のように表記することができる。添えられる数や文字や記号が複数に及んだり数式になる場合はそれらを{}で囲う必要がある。ちなみに、・は\cdotを、÷は\divを、≠は\neqをそれぞれ用い、分数は\frac{}{}で乗根は\sqrt[]{}で表すことができる。スペースを有効にするには\をスペースの前に付ける。 aのn乗an a^n a3=a⋅a⋅a a^3 = a \cdot a \cdot a am+n a^{m+n} 指数法則a0=1 (a≠0) a^0 = 1 \ (a \neq 0) 指数法則a1n=an a^{\frac{1}{n}} = \sqrt[n]{a} 指数法則amn=amn a^{\frac{m}{n}} = \sqrt[n]{a^m} 指数法則a−mn=1amn a^{-\frac{m}{n}} = \frac{1}{\sqrt[n]{a^m}} 指数法則aman=am+n a^m a^n = a^{m+n} 指数法則aman=1an−m (m<n) \frac{a^m}{a^n} = \frac{1}{a^{n-m}} \ (m < n) 指数法則(am)n=amn (a^m)^n = a^{mn} 指数法則(ab)n=anbn (ab)^n = a^n b^n 指数法則(ab)n=anbn \left(\frac{a}{b}\right)^n = \frac{a^n}{b^n} 指数法則\[ \frac{a^m}{...
続きを読む

LibreOffice 6 Calcでフォーム（ダイアログ）を作成してマクロで表示

イメージ
ここで用いたLibreOfficeのバージョンと設定 LibreOffice 6.1 LibreOfficeの「ツール」-「オプション」-「LibreOffice」の「詳細」で「Java実行環境を使用」にチェックが入っていること。「インストール済みのJava実行環境(JRE)」が表示されていること。 LibreOffice 6.1 Calcにはデータを入力したり表示したりするのに使うことができるフォームが用意されている。そしてそのフォームはダイアログと呼ばれている。今回はそのダイアログを作成し、それを表示させたり閉じたりするマクロをLibreOffice Basicを使って実装してみる。 フォームコントロールの作成 LibreOffice Calcを起動。 トップメニューで「表示」-「ツールバー」-「フォームコントロール」という順に選び、フォームコントロールのツールバーを表示させる。 フォームコントロールのツールバーの中から「ボタン」（プッシュ・ボタン）を選び、スプレッドシートの適当な場所にプッシュ・ボタンを作成して配置する。 作成されたプッシュ・ボタンの上でマウスの右クリックメニューを表示させ、その中から「コントロール」を選ぶ。 「属性 プッシュボタン」というダイアログが表示されるので、「全般」タブ内にある「タイトル」の項目を「ダイアログ表示」に変える。 トップメニューで「ファイル」-「保存」を選んで変更内容を保存する。 スプレッドシート上でのプッシュ・ボタンの作成とその属性の設定はこれで終わり。 ダイアログを作成 「閉じる」というコマンド・ボタンだけを持つ単純なダイアログを作成する。 LibreOffice Calcのトップメニューで「ツール」-「マクロ」-「ダイアログの管理」を選ぶ。 そうすると「LibreOffice Basicマクロの管理」というダイアログが開く。「ダイアログ」というタブを選び、ダイアログに表示されている.odsファイル（今開いているスプレッドシート名）を選ぶ。 「新規作成」ボタンを押して「Dialog1」を作成し、「編集」ボタンを押す。 そうすると統合開発環境(IDE)が起動し、ダイアログの雛形が表示されるはず。 ツールバーの中から「ボタン」（コマンド・ボタン）を選び、ダイアログの雛...
続きを読む

10の補数と9の補数と2の補数と1の補数

10進数と10の補数 10進法の四則演算に慣れている人なら算術的な直感で分かるのが10の補数。 算盤 そろばん を使っている人は10の補数と5の補数を出力する函数を会得しているかもしれない。 例えば、2に対して10の補数はいくつかと問われればそれは8だと分かるし、6に対して10の補数はいくつかと問われればそれは4だと分かるし、5に対して10の補数はいくつかと問われれば5だと直感的に分かる。 また、3に対して5の補数はいくつかと問われればそれは2だと分かるし、2に対して5の補数はいくつかと問われれば3だと分かる。 10の補数とは、ある自然数に対してそれにいくつの自然数を加えれば10になるのかという問いに答えたもの。自然数とは、ここでは0, 1, 2, 3, 4, 5, 6, 7, 8, 9のこと。 ある自然数xに対する10の補数yは次のように計算することによって答えることができる。 y=10−x 10進法の位取り記数法では、桁上がり（位上がり）が起こる数が10であるので、ある数にあといくつ足すと桁上がりが起こるかを理解していることは、その四則演算においてとても重要な暗記事項になっている。 10進法の四則演算に慣れた人の頭の中には次のような函数または対応表があるのかもしれない。 f(x)=10−x xは引数。「xに対する10の補数」を出力してくれる函数f(x)。 10の補数の対応表 10進数 10の補数 0 10 1 9 2 8 3 7 4 6 5 5 6 4 7 3 8 2 9 1 10 0 補数のこの対応表を見ると、数値を小さい順から並べた昇順と数値を大きい順から並べた降順との写像（マッピング）関係に見える。 10の補数と桁上がり 例えば、6+7=を計算するとき、人は6または7の補数を瞬時に思い浮かべ、加える数がそれを上回っている場合に桁上がりが起こると即座に認識するはず。つまり、6に対する10の補数である4を思い浮かべ、その4より大きい7から4を引いた数である3と10を足し合わせて答えを計算するかもしれない。 \begin{align*} 6 + 7 &= 7 -...
続きを読む