HTML5 Canvasでその他の論理ゲート記号を描く

今回は、HTML5 CanvasのAPIを利用してMIL（軍事）規格のXNORゲート記号を描いてみた。

XNORゲートのシンボルの完成図は次のとおり。

XNORゲートのシンボルは、XORゲートのソースコードとNORゲートのソースコードとを合成するだけなので簡単。XORゲートの本体部分の末尾に小さな円をくっつけ、さらにそこに接尾する直線の位置をそれに合わせてやや調節してやればよい。

まず前回の実用論理ゲート記号を描いたときのXORゲートのソースコード全体をコピー＆ペーストし、NORゲートのソースコードにある小さな円を描く部分のソースコードを挿入した。さらに、本体部分に付属する三つの直線を描く部分のソースコードをNORゲートのソースコードのそれに置き換えた。

これだけでXNORゲートのシンボル図のソースコードは完成。それは次のようになる。

<!DOCTYPE html>
<head>
<title>HTML5 Canvasで論理ゲート記号を描く</title>
</head>
<body>
<div style="text-align: center">
<canvas id="exclusiveNotOrGateSymbol" width="100" height="50">
あなたのブラウザはCanvas要素に対応していません。
</canvas>
</div>
<script>
//特定のcanvas要素を取得して変数に代入
var canvas = document.getElementById("exclusiveNotOrGateSymbol");
//2次元描画コンテキストを取得して変数に代入
var context = canvas.getContext("2d");

//translate(x,y)メソッドで図形を平行移動できる
context.translate(0, 0);
//scale()メソッドで図形を上下左右に伸縮できる
context.scale(1,1);

/*
XNORゲートの本体部分の輪郭線を描く
*/
//輪郭線の太さ
context.lineWidth = 2;
//輪郭線の色
context.strokeStyle = 'black';
//パス（軌道）を初期化
context.beginPath();
//輪郭線を描き始める座標
context.moveTo(15,2);
//本体上辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(55,2,60,22);
//本体下辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(50,42,15,40);
//本体左辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(27,22,15,2);
//closePath()メソッドでパスを閉じる
context.closePath();
//stroke()メソッドで描画
context.stroke();

/*
頭部の皿を描く
*/
//パス（軌道）を初期化
context.beginPath();
//描き始めの座標
context.moveTo(10,2);
//2次ベジェ曲線
context.quadraticCurveTo(24,22,10,40);
//パスを閉じずに描画
context.stroke();

/*
尾部にくっついている円の輪郭線を描く
*/
context.beginPath();
//円を描くためにarc(x,y,radius,startPoint,endPoint)メソッドを使う
context.arc(65,22,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();

/*
付属する3つの直線を描く
*/
context.lineWidth = 1;
context.beginPath();
//尾部の直線
context.moveTo(70,22);
context.lineTo(85,22);
//頭部の上側の直線
context.moveTo(0,11);
context.lineTo(20,11);
//頭部の下側の直線
context.moveTo(0,32);
context.lineTo(20,32);
//パスを閉じずに描画
context.stroke();
</script>
</body>
</html>

IMPLYゲート記号を描く

IMPLYゲートは、論理和のブール変数の一方を論理否定したものと等しい。

\[ x_1 \rightarrow x_2 = \overline{x_1} + x_2 \]

従って論理和の2つの入力側のブール変数（独立変数）の内の1つを論理否定するゲートを作ることでIMPLYゲートを実現することができる。

IMPLYゲートのシンボルの完成図は次のとおり。

IMPLYゲート記号を描くためのHTMLとJavaScriptのソースコードは次のとおり。

<!DOCTYPE html>
<head>
<title>HTML5 Canvasで論理ゲート記号を描く</title>
</head>
<body>
<div style="text-align: center">
<canvas id="implyGateSymbol" width="100" height="50">
あなたのブラウザはCanvas要素に対応していません。
</canvas>
</div>
<script>
//特定のcanvas要素を取得して変数に代入
var canvas = document.getElementById("implyGateSymbol");
//2次元描画コンテキストを取得して変数に代入
var context = canvas.getContext("2d");

//translate(x,y)メソッドで図形を平行移動できる
context.translate(0, 0);
//scale()メソッドで図形を上下左右に伸縮できる
context.scale(1,1);

/*
IMPLYゲートの本体部分の輪郭線を描く
*/
//輪郭線の太さ
context.lineWidth = 2;
//輪郭線の色
context.strokeStyle = 'black';
//パス（軌道）を初期化
context.beginPath();
//輪郭線を描き始める座標
context.moveTo(15,2);
//本体上辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(55,2,60,22);
//本体下辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(50,42,15,40);
//本体左辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(27,22,15,2);
//closePath()メソッドでパスを閉じる
context.closePath();
//stroke()メソッドで描画
context.stroke();

/*
頭部の片側にくっついている円の輪郭線を描く
*/
context.beginPath();
//円を描くためにarc(x,y,radius,startPoint,endPoint)メソッドを使う
context.arc(13,10,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();

/*
本体に付属する3つの直線を描く
*/
//直線の太さ
context.lineWidth = 1;
//パス（軌道）を初期化
context.beginPath();
/*右端尾部の直線*/
//描き始める座標
context.moveTo(60,22);
//直線の終点座標
context.lineTo(75,22);
/*左端頭部の上側の直線*/
context.moveTo(0,10);
context.lineTo(10,10);
/*左端頭部の下側の直線*/
context.moveTo(0,32);
context.lineTo(20,32);
//パスを閉じずに描画
context.stroke();
</script>
</body>
</html>

ド・モルガンの定理を描く

ド・モルガンの定理を表わすときに使われている、2つの入力変数（独立変数）を共に論理否定するORゲートとANDゲートを描いてみた。

ORゲート記号のほうはIMPLYゲート記号の頭部の片側にくっついている円を両側に増やせばよいだけ。その完成図は次のようになる。

このHTMLおよびJavaScriptのソースコードは次のとおり。

<!DOCTYPE html>
<head>
<title>HTML5 Canvasで論理ゲート記号を描く</title>
</head>
<body>
<div style="text-align: center">
<canvas id="deMorganOrGateSymbol" width="100" height="50">
あなたのブラウザはCanvas要素に対応していません。
</canvas>
</div>
<script>
//特定のcanvas要素を取得して変数に代入
var canvas = document.getElementById("deMorganOrGateSymbol");
//2次元描画コンテキストを取得して変数に代入
var context = canvas.getContext("2d");

//translate(x,y)メソッドで図形を平行移動できる
context.translate(0, 0);
//scale()メソッドで図形を上下左右に伸縮できる
context.scale(1,1);

/*
本体部分の輪郭線を描く
*/
//輪郭線の太さ
context.lineWidth = 2;
//輪郭線の色
context.strokeStyle = 'black';
//パス（軌道）を初期化
context.beginPath();
//輪郭線を描き始める座標
context.moveTo(15,2);
//本体上辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(55,2,60,22);
//本体下辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(50,42,15,40);
//本体左辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(27,22,15,2);
//closePath()メソッドでパスを閉じる
context.closePath();
//stroke()メソッドで描画
context.stroke();

/*
頭部の片側にくっついている円の輪郭線を描く
*/
context.beginPath();
//円を描くためにarc(x,y,radius,startPoint,endPoint)メソッドを使う
context.arc(13,10,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();
context.beginPath();
context.arc(13,32,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();

/*
本体に付属する3つの直線を描く
*/
//直線の太さ
context.lineWidth = 1;
//パス（軌道）を初期化
context.beginPath();
/*右端尾部の直線*/
//描き始める座標
context.moveTo(60,22);
//直線の終点座標
context.lineTo(75,22);
/*左端頭部の上側の直線*/
context.moveTo(0,10);
context.lineTo(10,10);
/*左端頭部の下側の直線*/
context.moveTo(0,32);
context.lineTo(10,32);
//パスを閉じずに描画
context.stroke();
</script>
</body>
</html>

論理否定の入力変数（独立変数）を2つ伴ったANDゲート記号の完成図は次のとおり。

このHTMLおよびJavaScriptのソースコードは次のとおり。

<!DOCTYPE html>
<head>
<title>HTML5 Canvasで論理ゲート記号を描く</title>
</head>
<body>
<div style="text-align: center">
<canvas id="deMorganOrGateSymbol" width="100" height="50">
あなたのブラウザはCanvas要素に対応していません。
</canvas>
</div>
<script>
var canvas = document.getElementById("deMorganAndGateSymbol");
var context = canvas.getContext("2d");

//translate(x,y)メソッドで図形を平行移動できる
context.translate(0, 0);
//図形を上下左右に伸縮
context.scale(1,1);

/*
本体部分の輪郭線を描く
*/
context.lineWidth = 2;
context.strokeStyle = 'black';
context.beginPath();
//輪郭線の描き始めの座標
context.moveTo(20,3);
//上の直線部分の終点座標
context.lineTo(41,3);
//bezierCurveTo()メソッドで右横の曲線部分を
context.bezierCurveTo(65,3,65,43,41,43);
//下の直線部分の終点座標
context.lineTo(20,43);
//左の直線部分の終点座標
context.lineTo(20,3);
context.closePath();
context.stroke();

/*
頭部の片側にくっついている円の輪郭線を描く
*/
context.beginPath();
//円を描くためにarc(x,y,radius,startPoint,endPoint)メソッドを使う
context.arc(15,11,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();
context.beginPath();
context.arc(15,35,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();

/*
付属する3つの直線を描く
*/
context.lineWidth = 1;
context.beginPath();
//尾部の直線
context.moveTo(57,22);
context.lineTo(72,22);
//頭部の上側の直線
context.moveTo(0,11);
context.lineTo(10,11);
//頭部の下側の直線
context.moveTo(0,35);
context.lineTo(10,35);
//パスを閉じずに描画
context.stroke();
</script>
</body>
</html>

ド・モルガンの定理を描いてみた。

各々のシンボルを平行移動させるためにtranslate(x,y)メソッドを用いた。この方法だと少しややこしい。translate(x,y)メソッドはキャンバスの座標系ごと移動させてしまうので平行移動に合わせて原点も移動してしまう。それ以降のtranslate(x,y)メソッドではその引数として相対的座標を指定しなければならない。

描くものを平行移動させるもう一つの方法は、xとyの変数を用いること。予約語varでxとyという変数を宣言し、各種メソッドの引数にぞれぞれ加算しておくと、変数に代入する値を変えるだけでキャンバスの上に描くオブジェクトが移動してくれるので便利。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTML5 Canvasで論理ゲート記号を描く</title>
</head>
<body>
<div style="text-align: center">
<canvas id="orGateSymbol_var" width="100" height="50">
あなたのブラウザはcanvas要素に対応していません。
</canvas>
</div>
<script>
var canvas = document.getElementById("orGateSymbol_var");
var context = canvas.getContext("2d");

/*
xとyの座標を入れる変数2つを宣言して0で初期化
変数の値を変えることでオブジェクトを平行移動
*/
var x = 0;
var y = 0;

//scale()メソッドで図形を上下左右に伸縮できる
context.scale(1,1);

/*
ORゲートの本体部分の輪郭線を描く
*/
context.lineWidth = 2;
context.strokeStyle = 'black';
context.beginPath();
//輪郭線を描き始める座標
context.moveTo(x+12,y+2);
//本体上辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(x+52,y+2,x+57,y+22);
//本体下辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(x+47,y+42,x+12,y+40);
//本体左辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(x+24,y+22,x+12,y+2);
context.closePath();
context.stroke();

/*
本体に付属する3つの直線を描く
*/
context.lineWidth = 1;
context.beginPath();
/*右端尾部の直線*/
context.moveTo(x+57,y+22);
context.lineTo(x+72,y+22);
/*左端頭部の上側の直線*/
context.moveTo(x+0,y+10);
context.lineTo(x+17,y+10);
/*左端頭部の下側の直線*/
context.moveTo(x+0,y+32);
context.lineTo(x+17,y+32);
//パスを閉じずに描画
context.stroke();
</script>
</body>
</html>

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

9月 12, 2020

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

このブログを検索

MathJax

学校に通わずに学ぶログ

ブログの説明