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);
}

Tweet