6 グラフィック機能

1 キャンバスという文字、線、画像の描画場所


  このIDEには、線画等を表示するキャンバスが用意されています



  描画コマンドを用いれば、グラフや図が描けます
  バーグラフ、リストや画像も描画できます


2 グラフィックコマンドを覚えて、図表を描くには

* 2019.12月時点の暫定版
コマンド形式 説明

 キャンバスを制御する

<?n> グラフィック出力先 n=0,1,2,,,9 (9 未満かも知れない)
<??n> グラフィックキャンバス n 表示
<??! n> キャンバスn 非表示
<"extent" x,y> キャンバスの横x縦yサイズ
<"place" x,y> キャンバスコーナー(左上)位置 (画面上の位置づけ)
<"backcolor" B,G,R> キャンバス背景色

 直線 円、扇、四角 を描く

<"fill" B,G,R> グラフの塗りつぶしの色を設定
<"color" B,G,R> ペンの色
<"pen" w> ペンの線幅 w
<"mode" n> 描画モード 0:ペン色  1:ペン色、背景色の排他的論理和
<"style" n> 線種別
<"at" x,y> ペンの位置を設定 x,y
<"at" "clock" "%" rad, n> 現在のペン位置を中心とする円周上の位置を12時位置を0%として、時計周りで位置を指定する 
<"at" "clock" "" rad, n> 現在のペン位置を中心とする円周上の位置を3時位置を0度として、反時計周りで角度を指定する 
<"line" x, y> ペンを現在位置から、x、y まで直線を描く
<"box" x, y> ペン位置をコーナーとして 対角位置コーナー x,y の長方形を描く
<"boxrate" "X" x, y, p1, p2> ペン位置をコーナーとして 対角位置コーナー x,y で X方向に 左端を基準(=0)とし、p1% から p2% の比率区間に 長方形を描く
Y 方向指定は "Y"
<"cir" R> ペン位置を中心として半径Rの円を描く
<"elli" a, b> 現在のペン位置を中心とする x半径a、y半径b の楕円を描く  x*x/a*a + y*y/b*b = 1
<"pie" r, a, b> 半径r の扇型を角度a から、角度b まで描く 反時計周り
<"pie" "%" r, a, b> 半径rの扇型を a%から、b%まで描く
<"ellipie" a,b, c, d> x半径a、y半径b の楕円扇を 角度c から 角度d まで反時計周りで描く
<"ellipie" "%" r, a, b> 半径r の楕円扇型を a%から、b%まで描く
<"polygon" n, x1,y1, x2,y2,... xn, yn> n角形を "fill" コマンドで指定した色で塗り描く
<"bezier" 4, x1,y1, x2,y2,... xn, yn> ベジェ曲線 "color" コマンドで指定した色で描く
座標は4点指定 1、4番点は端点、2、3番点は制御点

 文字列、文字列リストを描く

<"textat" "単語など" x, y, d> 文字列を X,Y位置から、傾斜角度d で描く  1=0.1度 
<"text" "単語など" d> 現在のペン位置で文字列を表示する  傾斜角度 d
<"font" "size" S> フォントサイズ設定  S
<"font" "color" B,G,R, B,G,R > 文字色 Blue, Green, Red、背景色 Blue, Green, Red
<"font" "style" n>
フォントスタイル番号
   1 太字
   2 斜体
   4 下線付き
   8 打消し線付き
 文字スタイル値は加算して使える
  例)1+8+2  太字斜体打消し線付き
<"font" "name" "system"> 文字描画で使用するフォントを フォント名 system にする
<"list" "" ? x, y, ang > リスト変数? の内容を位置x,y を左上として 傾斜角度ang で表示する
<"list" "noclip" ? x, y, ang > クリップ解除で リスト変数? の内容を位置x,y を左上として 傾斜角度ang で表示する
<"list" "back" B,G,R> リスト領域色 
<"list" "area" x1,y1, x2, y2> リスト領域
<"list" "margin" x1,y1, x2, y2> リスト領域に対するクリップマージン

 画像を保存する、画像を描画する

<"save" "bmp" "C:\data\file2.bmp" x1,y1,x2,y2> キャンバス指定領域 x1,y1,x2,y2 をファイルへ保存する bmp形式
<"save" "png" "C:\data\file2.png" x1,y1,x2,y2> キャンバス指定領域x1,y1,x2,y2 をファイルへ保存する png形式
<"load" "img" "C:\data\file1.bmp" x,y> キャンバスの指定位置 X, Yに画像を描画する
<"load" "area" x1, y1, x2, y2> キャンバスの描画領域 x1, y1, x2, y2 を指定する
<"load" "comp" > 画像を圧縮描画するオプションの指定

 不許複製 zeusoo.com



  サンプルプログラムと画像出力イメージです


//***************************************************** // 線グラフ、円グラフ例 // //***************************************************** // キャンバス設定 // <? 0> // キャンバス0番へ出力 <?? 0> // キャンバス0番表示 H=400; <"backColor" 200,255,255> //キャンバス背景 B,G,R <"extent" 1000,H> //キャンバスサイズ  <"place" 400,50> //キャンバス画面位置 左上コーナー //****************************************************** // サンプル描画 // //****************************************************** // ペン属性設定  ライン、テキスト共通 // <"style" 0> //ペン、フォント通常 <"color" 255,0,0> //ペン、フォント文字色 <"pen" 1> //ペン幅 //********************************************* // 折れ線グラフ // <"fill" 255,155,155> <"at" 100, 10> <"box" 300, 300> <"pen" 2> <"color" 0,0,0> <"at" 100, 300> <"line" 300, 300> <"line" 300, 10> <"line" 100, 10> <"line" 100, 300> <"at" 100+50, 310> <"line" 100+50, 290> <"at" 100+2*50, 310> <"line" 100+2*50, 290> <"at" 100+3*50, 310> <"line" 100+3*50, 290> <"at" 100-20, 300-50> <"line" 100, 300-50> <"at" 100-20, 300-50*2> <"line" 100, 300-50*2> <"at" 100-20, 300-50*3> <"line" 100, 300-50*3> <"at" 100-20, 300-50*4> <"line" 100, 300-50*4> <"at" 100-20, 300-50*5> <"line" 100, 300-50*5> <"pen" 5> <"color" 255,255,255> <"at" 100,250> <"line" 150, 150> <"at" 150,150> <"line" 200, 200> <"at" 200,200> <"line" 250, 80> //********************************************* // 円の分割  オプション % で指定 // "%" 半径、開始%、終了%     一周=100% 12時=0%、100% // "" 半径、開始角度、終了角度   一周=360度 3時=0度 // X1 = 670;Y1 = 150; <"pen" 1> <"color" 0,0,255><"Fill" 0,255,255> <"at" X1, Y1><"pie" "%" 100,0,25> <"color" 0,0,0> <"at" "clock" "%" 120, 12><"text" "成分1" 0> //<"at" "clock" "" 160, -45><"text" "成分1" 0> <"color" 0,255,0><"Fill" 0,255,0> <"at" X1, Y1><"pie" "%" 100,25,50> <"color" 255,255,255><"Fill" 128,128,128> <"at" "clock" "%" 100, 37><"text" "成分2" 0> <"color" 255,255,0><"Fill" 255,255,0> <"at" X1, Y1><"pie" "%" 100,50,75> <"color" 0,0,0> <"at" X1-80, Y1> <"at" "clock" "%" 100, 62><"text" "成分3" 0> <"color" 255,0,255><"Fill" 255,0,255> <"at" X1, Y1><"pie" "%" 100,75,100> <"color" 255,255,255><"Fill" 128,128,128> <"at" X1-80, Y1> <"at" "clock" "%" 100, 87><"text" "成分4" 0> //******************************************************* // End of script

3 画像表示と対応フォーマットなど少々


  現在使用可能な画像形式は、ビットマップ形式、PNG形式 のみです

  描画領域は右ボタンメニューでファイル保存できます