CreateJSでオブジェクトを作って操作する

#初めに
Create.jsで四角形のオブジェクトを作って、移動させてみます

#やってみたこと
##図形追加ONボタンを押したとき
 - マウスを押下した位置からマウスを離した箇所まで四角形を描画します
 - マウスを離すまでオブジェクトの縮小のもできます

##図形追加OFFボタンを押したとき
 - 描画したオブジェクトを移動することができます

# 注意点
Canvasにオブジェクトを追加するイベントはCanvasに追加する必要がある
オブジェクトを移動するイベントはオブジェクト自身（正確にはCreate.jsのShape）に追加する必要がある

# ソース

```sample.js
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css/base.css" />
  <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
  <script>
    //Canvasに対する各種イベント処理を管理するオブジェクト
    var myCanvasHander
    //Canvasに対する各種イベント処理の追加、削除を管理するオブジェクト定義します
    var sOpe  
    
    function MyCanvasHander(mystage){
        //CreateJsのStageオブジェクト
        var lstage = mystage
        var dragPointX
        var dragPointY
        var myshape
        var mouseclickflag
        var firstmove
        
        this.handleDown = function(e) {
            // ドラッグを開始した座標を覚えておく
            var rect = e.target.getBoundingClientRect();
            dragPointX = e.clientX - rect.left;
            dragPointY = e.clientY - rect.top;
            mouseclickflag =true
            firstmove = true;
        }
        this.handleMousemove = function(e){
            if(!mouseclickflag)return
            //mouseDownイベント後の初回のMoveイベント時は前のshapeは削除しない
            if(!firstmove && myshape && myshape.shape){
                lstage.removeChild(myshape.shape)
                 console.log("shape removed")
            }
            firstmove = false
            var rect = e.target.getBoundingClientRect();
            myshape = new Rectengle(
                dragPointX,
                dragPointY,
                e.clientX - rect.left-dragPointX,
                e.clientY - rect.top-dragPointY,
                "Yellow")
            myshape.init(lstage)
            myshape.shape.alpha = 0.5;
        }
        this.handleMouseup = function(e){
            var rect = e.target.getBoundingClientRect();
            console.log(myshape)
            myshape.shape.alpha = 1.0;
            mouseclickflag =false
        }
    }
    
    function ShapeOperationToCanvas(myCanvasHander){
        //Canvasに対する各種イベントの定義を行います
        var funcs ={
            mousedown:{handleDown:myCanvasHander.handleDown},
            mousemove:{handleMousemove:myCanvasHander.handleMousemove},
            mouseup:{handleMouseup:myCanvasHander.handleMouseup}
        }
        //Canvasに対する各種イベントを追加します
        this.addOperation = function(){
            var canvas = document.getElementById('myCanvas');
            canvas.addEventListener('mousedown', funcs['mousedown']['handleDown'], false);
            canvas.addEventListener('mousemove', funcs['mousemove']['handleMousemove'], false);
            canvas.addEventListener('mouseup', funcs['mouseup']['handleMouseup'], false);
        }
        //Canvasに対する各種イベントを削除します
        this.removeOperation = function (){
            var canvas = document.getElementById('myCanvas');
            canvas.removeEventListener('mousedown', funcs['mousedown']['handleDown']);
            canvas.removeEventListener('mousemove', funcs['mousemove']['handleMousemove']);
            canvas.removeEventListener('mouseup', funcs['mouseup']['handleMouseup']);
        }
    }
    
    // ページの読み込みが終わってから初期化
    window.addEventListener("load", init);
    function init() {
        //Stageの生成とキャンバスに対する操作は
        //画面のロード完了後、実行する
        myCanvasHander= new MyCanvasHander(new createjs.Stage("myCanvas"))
        sOpe = new ShapeOperationToCanvas(myCanvasHander)
    }
    
    function Rectengle(start_x,start_y,end_x,end_y,color){
        this.width=end_x-start_x
        this.height=end_y-start_y
        this.color=color
        this.start_x=start_x
        this.start_y=start_y
        this.end_x=end_x
        this.end_y=end_y
        this.shape
        
        this.init = function(stage){
            // 初期化
            //　図形を作成
            this.shape = new createjs.Shape();
            stage.addChild(this.shape);
            this.shape.graphics.beginFill(color)
            .drawRect(this.start_x,this.start_y,this.end_x,this.end_y);
            // ドラッグした場所を保存する変数
            var dragPointX;
            var dragPointY;
            // インタラクティブの設定 drawShape
            this.shape.addEventListener("mousedown", handleDown);
            this.shape.addEventListener("pressmove", handleMove);
            this.shape.addEventListener("pressup", handleUp);
            stage.update()
            var _self = this;
            // 図形を押したときの処理です
            function handleDown(event) {
              sOpe.removeOperation()
              // ドラッグを開始した座標を覚えておく
              dragPointX = stage.mouseX - _self.shape.x;
              dragPointY = stage.mouseY - _self.shape.y;
              // ボールを半透明にする
              _self.shape.alpha = 0.3;
            }
            // 図形を押した状態で動かしたときの処理です
            function handleMove(event) {
              // ボールはマウス座標に追随する
              // ただしドラッグ開始地点との補正をいれておく
              _self.shape.x = stage.mouseX - dragPointX;
              _self.shape.y = stage.mouseY - dragPointY;
            }
            // ボールからマウスを離したときの処理です
            function handleUp(event) {
              // ボールを元の透明度に戻す
              _self.shape.alpha = 1.0;
            }
            // 時間経過
            createjs.Ticker.addEventListener("tick", handleTick);
            function handleTick() {
              stage.update(); // 画面更新
            }
        }
    }
    
  </script>
</head>
<body>
  <canvas id="myCanvas" width="500" height="300"></canvas><br>
  <input type = button  value = "図形追加 ON" onclick="sOpe.addOperation()">
  <input type = button  value = "図形追加 OFF" onclick="sOpe.removeOperation()">
</body>
</html>
```