マウスカーソル情報

kickzone/SHChart · GitHub

だんだんそれっぽくなってきた。今日はここまで。残りはスクロール・拡大縮小と、DBからの読み込み。
本日苦労したところ：マウスカーソルの位置を取得するとき、MouseEvent.clientX が得られる位置は、ウインドウ内の位置だ。canvasはウインドウ端から若干(8ピクセルくらい)右にずれて配置されているので、clientXの位置をそのまま使用して描画すると、マウスカーソルの位置と8ピクセルくらいずれてしまう。なので、canvasの置かれている位置を考慮しないといけない。

//これではだめ
CanvasMouseMove = (e: MouseEvent) => {
    this.mi.drop();
    for (var i in this.graphs) {
        this.graphs[i].paintMouseInfo(e.clientX, this.mi);
    }
}

//これならOK
CanvasMouseMove = (e: MouseEvent) => {
    this.mi.drop();
    var xCanvas = e.clientX - this.canvas.offsetLeft;
    for (var i in this.graphs) {
        this.graphs[i].paintMouseInfo(xCanvas, this.mi);
    }
}

はじめはMouseEvent.xを使用して開発していたが、FireFoxでは使えないらしく全く動作しなかった。clientXを使用するのが無難。
それから、破線を引く機能がcanvasには存在しないので、自作する必要があった。easeljsのmoveToとlineToを交互に呼び出すことで実現可能だった。

public createDashX(x: number) {
    var g: createjs.Graphics = new createjs.Graphics();
    g.setStrokeStyle(1).beginStroke("#000000");
    //破線の数(*2)を計算
    var dashes: number = (this.ymax - this.ymin) / this.DASH_LEN;
    //半分ずつ線を引く
    for (var y: number = this.ymin, q: number = 0; q < dashes; y += this.DASH_LEN, q++) {
        if (q % 2 == 0) g.moveTo(x, y);
        else g.lineTo(x, y);
    }
    this.dashX = new createjs.Shape(g);
    this.stage.addChild(this.dashX);
}