打造自己的图表控件5
上一次加入了鼠标拖拽功能,这回加入我来加入一个区域框,并且框内数据的阴影,效果如下 具体实现思路就是,可以响应鼠标事件来移动和调整大小,并且获取覆盖的数据,画出阴影. 响应鼠标事件可以改造上次写的鼠标移动的功能 区域框的设计为2部分,一部分是上下的区域,用来移动整个区域框,一部分为左右的线,用来改变区域框的大小. 鼠标在这两个部分上点击时才会捕获鼠标事件. 具体实现如下 class VerticalRangeNavigation extends MouseNavigation { constructor() { super() this.start = [] this.draging = false this.screen = [] this.range = [] this._area = { "topBar":"topBar", "bottomBar":"bottomBar", "left":"left", "right":"right", "none":"none" } this.barSize = 20 this.hitTarget = this._area.none this.color = "#FF00FF" } setRange(from, to){ this.range = [from , to] } hit(mouseEventArgs) { if (this