グラフィックライブラリを作る的なはなし。

点の集合が線で、線の集合が面なんていうのはさておき、
グラフィック系だと最初に、【線を引く】なんていうことをやる場合が多いのですが、
実は、線を引くのは結構曲者なのですよ。図形を描く方が理解しやすい場合も多いのです。

本来なら、、（0,0）から（100,100）まで線を引くみたいなところから始めるのですが、
何が難しいかっていうと、、、、図形は面積があるので、そのまま描けばいいのですが、線は面積がない。
面積がないけど、ピクセルで描くから面積ができる。そこが難しいんです。

例でいうと、こんな感じ。

左は、（0,0）-（5,1）-(2,4)の３角形。

右は、（0,0）-(5,0)の直線。

三角形の方は、(0,0)という点に面積はなく、数学てやったグラフのような感じですが、

直線の方は、ピクセルに対して、0,1,2,3,,,という座標を与えているので、

点自体が１ピクセル面積をもってしまうのです。

よって、右の直線は、(0,0)-(6,0)-(6,1)-(0,1)の四角形と考えるならわかりやすいのですが、

(0,0)-(5,0)の直線と考えるのは、かなり無理があるのです。

しかし、とにかく線を気軽に引きたい場合などは、この方法もたしかに【あり】ですが、

DTP系のグラフィックスとしては【なし】ですかねー。

しかし、大方のグラフィックでは、線を引く命令は右図のような指定、

多角形を描く命令は左図のような指定をするんですよね。

もちろん、実際には、１ピクセル以下の描画はできませんから、アンチエイリアスをかけて

みたいな感じになりますけどねー。

FLEXでFLASH（AS）っぽく画像を表示

FLEXで画像を読み込んで表示。一番単純にして重要な機能であるが、
FLEXのサンプルとかHowTo本を見ると、
【まずImageコンポーネントを～～】
なんていう、私の趣味とかけ離れた手法がかかれている。
まぁそれはそれとして、どうActionScriptに展開されるかを確認するのも重要だが、
ここでは、FLASH-CS3っぽく表示させてみる。
すると、こんな感じ

view plainprint?

1. var loader = new Loader;  
2. loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e){  
3.  var bmp = new Bitmap;  
4.  bmp.bitmapData = loader.content.bitmapData.clone();  
5.  stage.addChild( bmp );  
6. });    
7. var urlfile = "http://localhost/ren2.jpg";  
8. var UR=new URLRequest(urlfile);  
9. UR.method = URLRequestMethod.POST;  
10. loader.load(UR);  

var loader = new Loader;
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e){
 var bmp = new Bitmap;
 bmp.bitmapData = loader.content.bitmapData.clone();
 stage.addChild( bmp );
});  
var urlfile = "http://localhost/ren2.jpg";
var UR=new URLRequest(urlfile);
UR.method = URLRequestMethod.POST;
loader.load(UR);

まぁ、いままでとなんら変わることもなく実行できましたね。
もちろん、これはこれとして、実際はクラスでキッチリ書きますYO。
まぁ実際はコンテナっぽいものを作って、そこに描画させることになるのかな。
だから、FLASH-AS3だと、Spriteかなんかで

view plainprint?

1. var sp = new Sprite;  
2. sp.addChild(bmp);  
3. stage.addChild( sp );  

var sp = new Sprite;
sp.addChild(bmp);
stage.addChild( sp );

的な。

でも、こんなことするなら、わざわざFLEXじゃなくて、FLASHですればいいじゃんって
ことなんですけど、、、まぁ、気分で使い分けてるだけっす。
mxなら、

view plainprint?

1. var temp : mx.controls.Image = new mx.controls.Image;  
2. temp.x = 30;  
3. temp.y = 85;  
4. temp.width = 205;  
5. temp.height = 216;  
6. temp.source = "http://localhost/ren2.jpg";  
7. addElement(temp);  

var temp : mx.controls.Image = new mx.controls.Image;
temp.x = 30;
temp.y = 85;
temp.width = 205;
temp.height = 216;
temp.source = "http://localhost/ren2.jpg";
addElement(temp);

ですかねー。

マウスイベントを最下層でひろうために。

CS3の時代にFlashで作ったAS3を見返して、FLEX４で実行させてみます。
クラスとしては後述の【keyAndMouse】クラスとしました。
keyAndMouseと言いながらも、keyは、ctrlとshiftをチェックするだけです。
要するにFLASHの、階層全てにイベントが発生するという特徴をいかして、
たとえボタンをクリックしてもkeydownがとれるように使います。
何につかうかといえば、何らかのGUIとしか言いようがないですけど、
今作ってるものには必要なんで＾＾；＾＾；
ということで、使い方は、mxmlのなかで、

view plainprint?

1. ～～略～～  
2. public function MD(e){  
3.  LL.text = "--M1---" + kam.getCS();  
4. }  
5. public function MU(e){  
6.  LL.text = "--M2---" + kam.getCS();  
7. }  
8. public function MM(e){  
9.  LL.text = "--M3---" + (ct++) + "/ " + kam.getCS();  
10. }  
11. public function MO(e){  
12.  LL.text = "--M4---" + kam.getCS();  
13. }  
14. ～～略～～  
15. protected function application1_creationCompleteHandler(event:FlexEvent):void  
16. {  
17.  kam = new keyAndMouse(this);   
18.  kam.setMD(MD);  
19.  kam.setMU(MU);  
20.  kam.setMM(MM);  
21.  kam.setMO(MO);  
22. ～～略～～  

～～略～～
public function MD(e){
 LL.text = "--M1---" + kam.getCS();
}
public function MU(e){
 LL.text = "--M2---" + kam.getCS();
}
public function MM(e){
 LL.text = "--M3---" + (ct++) + "/ " + kam.getCS();
}
public function MO(e){
 LL.text = "--M4---" + kam.getCS();
}
～～略～～
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
 kam = new keyAndMouse(this); 
 kam.setMD(MD);
 kam.setMU(MU);
 kam.setMM(MM);
 kam.setMO(MO);
～～略～～

って感じです。
要するに、、最下層のマウスイベントを、自分のクラス内にもってきたい時につかうのです。
まぁサンプルはどっちにしても同じ階層ですけど、このkamなるインスタンスを、引数として
別のクラスとかにもってって、そこで使うことをイメージしてます。
CS3のFLASHで作ってたときは、コンストラクタの引数はthisではなくstageでしたが、
引数をthis.stageにすると、
メインスレッド (中断 : TypeError: Error #1009: null のオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません。)
といって怒られるので、thisに変更したのですが、実は、単に書く場所がマズかっただけで、
applicationCompleteHandlerで設定してやればOKでした。怠慢でした^^;^^;

ってことで、クラスは以下。たいしたことないっすけどね。
あぁ、あんまり型を書かない人なんで、すんません。。

view plainprint?

1. package{  
2.  //----------------------------------  
3.  import flash.display.MovieClip;  
4.  import flash.display.Sprite;  
5.  import flash.events.Event;  
6.  import flash.events.KeyboardEvent;  
7.  import flash.events.MouseEvent;  
8.  import flash.ui.*;  
9.  //----------------------------------  
10.  public class keyAndMouse extends Sprite{  
11.   var father  = null;  
12.   var bControl = false;  
13.   var bShift  = false;  
14.   var funcMD  = null; // mouseDown event handler  
15.   var funcMU  = null; // mouseUp   event handler  
16.   var funcMM  = null; // mouseMove event handler  
17.   var funcMO  = null; // mouseOver event handler  
18.   var bKeep  = false;  
19.   //--------------------  
20.   var bMouseDown = false;  
21.   //--------------------  
22.   public function setMD(f){ funcMD = f;  }  
23.   public function setMU(f){ funcMU = f;  }  
24.   public function setMM(f){ funcMM = f;  }  
25.   public function setMO(f){ funcMO = f;  }  
26.   //--------------------  
27.   public function getCS(){  
28.    if(bControl && bShift) return 3;  
29.    else if(bShift)   return 2;  
30.    else if(bControl)  return 1;  
31.    return 0;  
32.   }  
33.   //--------------------  
34.   public function md(e){ if(funcMD) funcMD(e); }  
35.   public function mu(e){ if(funcMU) funcMU(e); }  
36.   public function mm(e){ if(funcMM) funcMM(e); }  
37.   public function mo(e){ if(funcMO) funcMO(e); }  
38.   //--------------------  
39.   function keyAndMouse(f,bb:Boolean=true){  
40.    bKeep = bb;  
41.    father = f;  
42.    this.addEventListener(Event.REMOVED_FROM_STAGE, removed);  
43.    //-------------------  
44.    // keyDown  
45.    //-------------------  
46.    father.addEventListener(KeyboardEvent.KEY_DOWN,  
47.     function (e){  
48.      if(e.keyCode == Keyboard.CONTROL) bControl = true;  
49.      if(e.keyCode == Keyboard.SHIFT)  bShift = true;  
50.     }  
51.    );  
52.    //-------------------  
53.    // keyUp  
54.    //-------------------  
55.    father.addEventListener(KeyboardEvent.KEY_UP,  
56.     function (e){  
57.      if(e.keyCode == Keyboard.CONTROL) bControl = false;  
58.      if(e.keyCode == Keyboard.SHIFT)  bShift  = false;  
59.     }  
60.    );  
61.    //-------------------  
62.    // mouseDown  
63.    //-------------------  
64.    father.addEventListener(MouseEvent.MOUSE_DOWN,  
65.     function (e){  
66.      if(bMouseDown){  
67.       if(funcMU) funcMU(e);  
68.       bMouseDown=false;  // 微妙な仕様  
69.       return;     //   
70.      }  
71.      bMouseDown = true;  
72.      if(funcMD) funcMD(e);  
73.     }  
74.    );  
75.    //-------------------  
76.    // mouseUp  
77.    //-------------------  
78.    father.addEventListener(MouseEvent.MOUSE_UP,  
79.     function (e){  
80.      bMouseDown = false;  
81.      if(funcMU){  
82.       funcMU(e);  
83.       if(!bKeep){  
84.        funcMD = null;  
85.        funcMU = null;  
86.        funcMM = null;  
87.       }  
88.      }  
89.     }  
90.    );  
91.    //-------------------  
92.    // mouseMove  
93.    //-------------------  
94.    father.addEventListener(MouseEvent.MOUSE_MOVE,  
95.     function (e){  
96.      if(funcMM) funcMM(e);  
97.     }  
98.    );  
99.    //-------------------  
100.    // mouseOver  
101.    //-------------------  
102.    father.addEventListener(MouseEvent.MOUSE_OVER,  
103.     function (e){  
104.      if(funcMO) funcMO(e);  
105.     }  
106.    );  
107.    //-------------------  
108.   }  
109.   //--------------------  
110.   // like a destructer  
111.   //--------------------  
112.   private function removed(e:Event):void{  
113.    removeEventListener(Event.REMOVED_FROM_STAGE, removed);  
114.   }  
115.   //--------------------  
116.  }  
117.  //----------------------------------  
118. }  

package{
 //----------------------------------
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.KeyboardEvent;
 import flash.events.MouseEvent;
 import flash.ui.*;
 //----------------------------------
 public class keyAndMouse extends Sprite{
  var father  = null;
  var bControl = false;
  var bShift  = false;
  var funcMD  = null; // mouseDown event handler
  var funcMU  = null; // mouseUp   event handler
  var funcMM  = null; // mouseMove event handler
  var funcMO  = null; // mouseOver event handler
  var bKeep  = false;
  //--------------------
  var bMouseDown = false;
  //--------------------
  public function setMD(f){ funcMD = f;  }
  public function setMU(f){ funcMU = f;  }
  public function setMM(f){ funcMM = f;  }
  public function setMO(f){ funcMO = f;  }
  //--------------------
  public function getCS(){
   if(bControl && bShift) return 3;
   else if(bShift)   return 2;
   else if(bControl)  return 1;
   return 0;
  }
  //--------------------
  public function md(e){ if(funcMD) funcMD(e); }
  public function mu(e){ if(funcMU) funcMU(e); }
  public function mm(e){ if(funcMM) funcMM(e); }
  public function mo(e){ if(funcMO) funcMO(e); }
  //--------------------
  function keyAndMouse(f,bb:Boolean=true){
   bKeep = bb;
   father = f;
   this.addEventListener(Event.REMOVED_FROM_STAGE, removed);
   //-------------------
   // keyDown
   //-------------------
   father.addEventListener(KeyboardEvent.KEY_DOWN,
    function (e){
     if(e.keyCode == Keyboard.CONTROL) bControl = true;
     if(e.keyCode == Keyboard.SHIFT)  bShift = true;
    }
   );
   //-------------------
   // keyUp
   //-------------------
   father.addEventListener(KeyboardEvent.KEY_UP,
    function (e){
     if(e.keyCode == Keyboard.CONTROL) bControl = false;
     if(e.keyCode == Keyboard.SHIFT)  bShift  = false;
    }
   );
   //-------------------
   // mouseDown
   //-------------------
   father.addEventListener(MouseEvent.MOUSE_DOWN,
    function (e){
     if(bMouseDown){
      if(funcMU) funcMU(e);
      bMouseDown=false;  // 微妙な仕様
      return;     // 
     }
     bMouseDown = true;
     if(funcMD) funcMD(e);
    }
   );
   //-------------------
   // mouseUp
   //-------------------
   father.addEventListener(MouseEvent.MOUSE_UP,
    function (e){
     bMouseDown = false;
     if(funcMU){
      funcMU(e);
      if(!bKeep){
       funcMD = null;
       funcMU = null;
       funcMM = null;
      }
     }
    }
   );
   //-------------------
   // mouseMove
   //-------------------
   father.addEventListener(MouseEvent.MOUSE_MOVE,
    function (e){
     if(funcMM) funcMM(e);
    }
   );
   //-------------------
   // mouseOver
   //-------------------
   father.addEventListener(MouseEvent.MOUSE_OVER,
    function (e){
     if(funcMO) funcMO(e);
    }
   );
   //-------------------
  }
  //--------------------
  // like a destructer
  //--------------------
  private function removed(e:Event):void{
   removeEventListener(Event.REMOVED_FROM_STAGE, removed);
  }
  //--------------------
 }
 //----------------------------------
}

グラフィックライブラリを作るのだよ。。

まぁ、いまどき、グラフィックライブラリを１から作る人はいないでしょう。きっと。
でも、必要性にせまられることもあるのです。
参考にしたのは、この本。残念ながら廃刊のようです。いい本なのにね。



自分で作る必要性は、私の場合は２つ。
１．既存ライブラリだと性能が低い場合
２．既存ライブラリだと高機能すぎて重すぎる場合
まぁ、１はほとんどなく、２が主要な理由です。
ってことで、いままで作ったものを整理する意味で、いろいろ書いてみます。
ちなみに、上記の本のみでグラフィックライブラリを作ってしまいました。
Amazonの中古で出てたら、買いましょう！

あぁそうそう、

もいいですね。あんまり読んでないので、読んだらまた書きます。
この本はよくない。

PHPでsmartyするとき。

PHPでsmartyするときなんですけどー、、
せっかく、テンプレート化するんだから、うまく分離してつくりたいものです。
ここでいううまく分離というのは、
テンプレートだけをブラウザで表示させても、それらしく見えるように作れれば、
それが一番いいのでは？
という考えです。
まぁちょっと考えればわかることなんですが、とりあえず、あんまり見たことはない。
たぶん、大方の人は、可変部分をテンプレートにいれないからです。
うぅーん、正確な言い方じゃなかった。
テンプレートをhtmlで表示させるときは有効だけど、smartyで使うときは無効になるような
デリミタ設定をしてやればいいのです。
それがこれ。

view plainprint?

1. $sm = new Smarty;  
2. $sm->left_delimiter = "<!--{";  
3. $sm->right_delimiter = "}-->";  

$sm = new Smarty;
$sm->left_delimiter = "<!--{";
$sm->right_delimiter = "}-->";

そうすると、

view plainprint?

1. <!--{$maintable}-->  
2. <!--{* -->  
3. <table>  
4. <tr><td>1</td><td>2</td></tr>  
5. <tr><td>A</td><td>B</td></tr>  
6. </table>  
7. <!-- *}-->  

<!--{$maintable}-->
<!--{* -->
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>A</td><td>B</td></tr>
</table>
<!-- *}-->

みたいに書けば、html表示したときはtableが表示され、smarty経由だと、tableが表示されなくなる。
よって、$maintableをおきかえれば、それでOKってことになりますね。
まぁ逆に、htmlができあがった時点で、可変部分については、デリミタで囲んで、置き換える変数を加えてやれば、それでOK。
昔は、DreamWeaverが８の時代には、拡張子がtplなやつを使えるように、
いろいろ設定したりアイコン作ったりしたけど、、最近はテンプレートの拡張子をhtmlしちゃうとといういい加減さです。^^;^^;