2

在此处输入图像描述

这是一个在 HTML5 Canvas 上绘制的颜色条。每个颜色条代表一个时间戳，如 00:30 或 05:45 等。

这些颜色条基本上是我在画布上绘制的矩形。

我想为每个矩形注册一个点击事件，以便我可以显示时间戳并更新页面上的其他内容。任何人都可以在这里提供帮助，如何为每个矩形注册点击事件？我是否需要使用其他元素，例如部分或更多画布？

顺便说一句，我使用的是 EmberJS，所以更新数据不是问题。

更新

这是来自另一个 stackoverflow 问题的 JSfiddle。 http://jsfiddle.net/DV9Bw/

draw: function(index, score){
    var canvas = this.get('element')
    var ctx = canvas.getContext('2d');
    ctx.fillStyle=this.get('colorCodes')[Math.round(score)];
    ctx.fillRect(index*3,0,3,150);
    this.drawLastAmbiant()

看看，它返回了颜色的值，但我也想显示一些其他数据。

4

3 回答 3

1

这可能不是您的用例的完整解决方案，但是在使用您在此处提供的示例jsfiddle 搞砸了一些结果之后。

顺便说一句，我使用的是 EmberJS，所以更新数据不是问题。

我首先对示例进行了emberyfied以反映 ember 的使用。

我想棘手的部分是如何将 ember 记录中包含的数据与画布中的单击栏映射/关联model，因为单击的元素与您的模型和数据都没有关系。

一种可能的解决方法是在单击条时使用当前鼠标坐标计算条的索引，并通过计算的索引查找相关数据objectAt(index)。

请查看提供的jsbin以了解可能的解决方法（为简单起见，不使用任何框架），这可能是一种有点幼稚的方法，可以进一步改进，但作为一个起点，到目前为止它似乎可以工作。

希望能帮助到你。

于 2013-06-23T12:29:44.320 回答
1

这是一种方法。假设条形图绘制在画布的左上角（否则您需要添加对有条形图区域边界的检查）：

var barWidth  = 3;   //adjust to actual width of bars
var barHeight = 150; //adjust to actual height of bars

// handlemouse-click event 
canvas.onclick= function(e) {

    var pos = getMousePos(canvas, e);
    var x = pos.x;
    var y = pos.y;

    if (y>= 0 && y <= barHeight) {    //extend the check here (offsets/width)
        var index = (x / barWidth)|0; //divide on width and round off
        alert('You clicked bar index: ' + index);
    }
}

// get mouse position relative to canvas
function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}
于 2013-06-22T21:55:47.067 回答
0

获取画布上的点击事件，并使用画布的大小（.offsetWidth）/彩条数量来确定当前大小的条的宽度。然后计算 event.clientX / 条的宽度单击了哪个条。

于 2013-06-22T18:53:39.270 回答