打造自己的图表控件4

上一期已经完成了一个雏形。可以显示一个完整的折线图。本期给图表加上鼠标互动的功能。

首先新增一个专门处理鼠标事件的类。

class MouseNavigation extends ChartElement {
    constructor() {
        super()
    }
    get area() {
        return ChartArea.plot
    }
    hit(mouseEventArgs) {
        return false
    }
    onMouseDown(mouseEventArgs) {

    }
    onMouseMove(mouseEventArgs) {

    }
    onMouseUp(mouseEventArgs) {

    }
    onMouseWheel(mouseEventArgs) {

    }
}

hit 用来测试是否命中 

MouseEventArgs 定义如下，封装了鼠标相对于图表的位置 x,y. 触发事件时的 位置 和 屏幕尺寸，还有原始的事件对象。

class MouseEventArgs {
    constructor(x, y, area, screen, e) {
        this.x = x
        this.y = y
        this.area = area
        this._isPrevent = false
        this.event = e
        this.screen = screen
    }
    get isPrevent() {
        return this._isPrevent
    }
    prevent() {
        this._isPrevent = true
    }
}

 然后改造一下 Chart ，让它可以触发这些事件

class Chart {
    ...
    mouseDown(mouseEventArgs) {
        this._raiseMouseEvent('onMouseDown', mouseEventArgs)
    }
    mouseMove(mouseEventArgs) {
        this._raiseMouseEvent('onMouseMove', mouseEventArgs)
    }
    mouseUp(mouseEventArgs) {
        this._raiseMouseEvent('onMouseUp', mouseEventArgs)
    }
    mouseWheel(mouseEventArgs) {
        this._raiseMouseEvent('onMouseWheel', mouseEventArgs)
    }
    * _hits(mouseEventArgs) {
        let list = []
        for (let element of this.elements) {
            if (element instanceof MouseNavigation) {
                if (element.hit(mouseEventArgs)) {
                    list.push(element)
                }
            }
        }
        list = list.reverse()
        for (let element of list) {
            yield element
        }
    }
    _raiseMouseEvent(key, mouseEventArgs) {
        for (let element of this._hits(mouseEventArgs)) {          
            element[key](mouseEventArgs)
            if (mouseEventArgs.isPrevent) break
        }
    }
}

最后，在 CanvasDrawing 中注册事件

 由于在 init 中已经保存了 chart，所以 render 的时候就不用在传入 chart 了。

class CanvasDrawing {
    ...
    init(dom, chart) {
        this.chart = chart
        dom.appendChild(this.view)

        document.addEventListener("mousedown", e => {
            if (e.target == this.view) e.preventDefault() 
            var mouseEventArgs = this.createMouseEventArgs(e)
            chart.mouseDown(mouseEventArgs)
        })
        document.addEventListener("mouseup", e => {
            if (e.target == this.view) e.preventDefault()
            var mouseEventArgs = this.createMouseEventArgs(e)
            chart.mouseUp(mouseEventArgs)
        })
        document.addEventListener("mousemove", e => {
            if (e.target == this.view) e.preventDefault()
            var mouseEventArgs = this.createMouseEventArgs(e)
            chart.mouseMove(mouseEventArgs)
        })
        document.addEventListener("mousewheel", e => {
            if (e.target == this.view) e.preventDefault()
            var mouseEventArgs = this.createMouseEventArgs(e)
            chart.mouseWheel(mouseEventArgs)
        })
    }
    createMouseEventArgs(e) {
        let offsetX = this.view.offsetLeft
        let offsetY = this.view.offsetTop
        let x = e.pageX - offsetX
        let y = e.pageY - offsetY
        let area = this.findArea(x, y)
        let screen = this.getScreen(area)
        return new MouseEventArgs(x, y, area, screen, e)
    }
    renderChart() {
        let chart = this.chart
        ...
    }
    findArea(x, y) {
        for (let area of this.getArea()) {
            let [x2, y2, width, height] = this.getScreen(area)
            if (x >= x2 && x < x2 + width && y >= y2 && y < y2 + height) return area
        }
        return null
    }
    ...
}

最后实现一个 MouseNavigationDrawing 来支持拖拽和缩放。

class MouseNavigationDrawing extends MouseNavigation {
    constructor() {
        super()
        this.start = []
        this.draging = false
        this.screen = []
    }
    hit(mouseEventArgs) {
        if (this.draging) return true
        let e = mouseEventArgs
        if (e.area == this.area)
            return true
        return false
    }
    onMouseDown(mouseEventArgs) {
        let e = mouseEventArgs
        e.prevent()
        let ieLeftDown = this._isLeftDown(e)
        console.log(e)
        if (ieLeftDown) {
            this._startDrag(e)
        }
    }
    _startDrag(e) {
        this.start = [e.x, e.y]
        this.draging = true
        this.screen = e.screen
    }
    _stopDrag() {
        this.start = [0, 0]
        this.draging = false
    }
    _isLeftDown(e) {
        return e.event.button == 0
    }
    onMouseMove(mouseEventArgs) {
        let e = mouseEventArgs
        if (this.draging && this._isLeftDown(e)) {
            e.prevent()
            let startX = this.start[0]
            let startY = this.start[1]
            let width = this.screen[2]
            let height = this.screen[3]
            var deltaX = e.x - startX
            var deltaY = e.y - startY

            let visibleLeft = this.viewport.visible[0]
            let visibleBottom = this.viewport.visible[1]
            let visibleWidth = this.viewport.visible[2] - visibleLeft
            let visibleHeight = this.viewport.visible[3] - visibleBottom

            var offsetX = deltaX / width * visibleWidth
            var offsetY = deltaY / height * visibleHeight

            this.start = [e.x, e.y]
            this.viewport.offset(-offsetX, offsetY)
        }
    }
    onMouseUp(mouseEventArgs) {
        let e = mouseEventArgs
        if (this.draging) {
            e.prevent()
            this._stopDrag()
        }
    }
    onMouseWheel(mouseEventArgs) {
        let e = mouseEventArgs
        e.prevent()
        let delta = 0.1 * e.event.wheelDeltaY / 120 
        this.viewport.zoom(-delta)
    }
}

Viewport 添加 offset 和 zoom 来支持拖放 和 缩放

class Viewport {

    ...
    offset(x, y) {
        let [fromX, fromY, toX, toY] = this.visible
        this.visible = [fromX + x, fromY + y, toX + x, toY + y]
    }
    center() {
        let [fromX, fromY, toX, toY] = this.visible
        return [fromX + (toX - fromX) * 0.5, fromY + (toY - fromY) * 0.5]
    }
    zoom(delta) {
        let [fromX, fromY, toX, toY] = this.visible
        let [x, y] = this.center()
        let ratio = 1 + delta
        let left = x - (x - fromX) * ratio
        let right = left + (toX - fromX) * ratio
        let bottom = y - (y - fromY) * ratio
        let top = bottom + (toY - fromY) * ratio
        this.visible = [left, bottom, right, top]
    }
}

最后调用一下

    var width = 800
    var height = 600
    var dataCount = 1000
    var chart = new Chart()
   
  
    chart.add(new VerticalAxisDrawing())
    chart.add(new HorizontalAxisDrawing())
    chart.add(new MouseNavigationDrawing())
    var chartDrawing = new CanvasDrawing(width, height)
    chartDrawing.init(document.body, chart)
    var lines = []
    for (let index = 0; index < 50; index++) {
        var lineDrawing = new LineDrawing()
        chart.add(lineDrawing)
        lines.push(lineDrawing);
    }
    chart.viewport.setVisible(0, -1 * lines.length, dataCount , 1 * lines.length)
    var e = s => document.querySelector(s)

    var fps = e('#fps')
    var step = 0
    var begintime = +new Date()
    var count = 0
    function run() {
        requestAnimationFrame(run)
        var now = +new Date()
        count = ((count + 1) % 16)
        if (count == 0) {
            fps.innerHTML = ~~(1000 / (now - begintime))
        }
        begintime = now
        step += 1
        
        for (let j = 0; j < lines.length; j++) {
            let lineDrawing = lines[j]
            lineDrawing.data = []
            for (let i = 0; i < dataCount; i++) {
                lineDrawing.data.push(i)
                lineDrawing.data.push((j + 1) * Math.sin((step + i) * (360 * 4 / width) * Math.PI / 180))
            }
        }
        chartDrawing.renderChart(chart)
    }
    run()

效果

下载